From 59adbc348a37bccc8f9a277378e863efbe95497a Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 30 Jan 2022 00:27:26 +0300
Subject: [PATCH] Escape HTML

---
 package-lock.json                             |  9 +++-
 package.json                                  |  2 +
 src/components/actionSheet/actionSheet.js     | 11 +++--
 src/components/activitylog.js                 |  5 +-
 src/components/cardbuilder/cardBuilder.js     | 27 ++++++-----
 .../cardbuilder/chaptercardbuilder.js         |  3 +-
 src/components/channelMapper/channelMapper.js |  7 +--
 .../collectionEditor/collectionEditor.js      |  3 +-
 .../dashboard/users/SelectElement.tsx         |  3 +-
 .../users/SelectMaxParentalRating.tsx         |  3 +-
 src/components/dialog/dialog.js               |  5 +-
 .../directorybrowser/directorybrowser.js      |  9 ++--
 .../displaySettings/displaySettings.js        |  5 +-
 src/components/filtermenu/filtermenu.js       |  3 +-
 src/components/guide/guide.js                 |  9 ++--
 .../homeScreenSettings/homeScreenSettings.js  |  9 ++--
 src/components/homesections/homesections.js   |  7 +--
 src/components/itemMediaInfo/itemMediaInfo.js |  5 +-
 .../itemidentifier/itemidentifier.js          | 11 +++--
 .../libraryoptionseditor.js                   | 25 +++++-----
 src/components/listview/listview.js           |  3 +-
 .../mediaLibraryCreator.js                    |  5 +-
 .../mediaLibraryEditor/mediaLibraryEditor.js  |  7 +--
 src/components/mediainfo/mediainfo.js         |  7 +--
 .../metadataEditor/metadataEditor.js          | 11 +++--
 src/components/playback/nowplayinghelper.js   |  6 ++-
 .../playlisteditor/playlisteditor.js          |  3 +-
 src/components/prompt/prompt.js               |  6 +--
 .../recordingcreator/recordingcreator.js      |  8 ++--
 .../recordingcreator/seriesrecordingeditor.js |  2 +-
 src/components/remotecontrol/remotecontrol.js | 25 +++++-----
 src/components/search/SearchSuggestions.tsx   |  3 +-
 .../subtitleeditor/subtitleeditor.js          | 11 +++--
 src/components/upnextdialog/upnextdialog.js   |  2 +-
 src/controllers/dashboard/dashboard.js        | 37 ++++++++-------
 src/controllers/dashboard/devices/device.js   |  2 +-
 src/controllers/dashboard/devices/devices.js  |  7 +--
 src/controllers/dashboard/dlna/profile.js     | 11 +++--
 src/controllers/dashboard/dlna/profiles.js    |  3 +-
 src/controllers/dashboard/dlna/settings.js    |  3 +-
 src/controllers/dashboard/library.js          |  5 +-
 src/controllers/dashboard/metadatanfo.js      |  3 +-
 .../notifications/notification/index.js       |  5 +-
 .../dashboard/users/userpasswordpage.js       |  2 +-
 src/controllers/itemDetails/index.js          | 47 ++++++++++---------
 src/controllers/movies/moviegenres.js         |  3 +-
 src/controllers/movies/moviesrecommended.js   |  4 +-
 src/controllers/playback/video/index.js       |  3 +-
 src/controllers/session/selectServer/index.js |  3 +-
 src/controllers/shows/tvgenres.js             |  3 +-
 src/controllers/user/menu/index.js            |  2 +-
 src/controllers/user/profile/index.js         |  2 +-
 src/elements/emby-input/emby-input.js         |  4 +-
 .../emby-playstatebutton.js                   |  2 +-
 .../emby-ratingbutton/emby-ratingbutton.js    |  2 +-
 src/elements/emby-select/emby-select.js       |  4 +-
 src/elements/emby-slider/emby-slider.js       |  2 +-
 src/elements/emby-textarea/emby-textarea.js   |  4 +-
 src/scripts/editorsidebar.js                  |  3 +-
 src/scripts/libraryMenu.js                    | 11 +++--
 60 files changed, 245 insertions(+), 192 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 92f5392cae..25ff48f5a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2568,6 +2568,12 @@
         "@types/node": "*"
       }
     },
+    "@types/escape-html": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/escape-html/-/escape-html-1.0.1.tgz",
+      "integrity": "sha512-4mI1FuUUZiuT95fSVqvZxp/ssQK9zsa86S43h9x3zPOSU9BBJ+BfDkXwuaU7BfsD+e7U0/cUUfJFk3iW2M4okA==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "8.4.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.4.1.tgz",
@@ -5299,8 +5305,7 @@
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
     },
     "escape-string-regexp": {
       "version": "1.0.5",
diff --git a/package.json b/package.json
index 27a498c947..8069a55dc4 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@babel/preset-react": "7.16.7",
     "@babel/preset-typescript": "7.16.7",
     "@thornbill/jellyfin-sdk": "0.4.1",
+    "@types/escape-html": "1.0.1",
     "@types/lodash-es": "4.17.6",
     "@types/react": "17.0.39",
     "@types/react-dom": "17.0.12",
@@ -75,6 +76,7 @@
     "date-fns": "2.28.0",
     "dompurify": "2.3.4",
     "epubjs": "0.3.90",
+    "escape-html": "1.0.3",
     "fast-text-encoding": "1.0.3",
     "flv.js": "1.6.2",
     "headroom.js": "0.12.0",
diff --git a/src/components/actionSheet/actionSheet.js b/src/components/actionSheet/actionSheet.js
index 0b040861b0..12d080e3b9 100644
--- a/src/components/actionSheet/actionSheet.js
+++ b/src/components/actionSheet/actionSheet.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import globalize from '../../scripts/globalize';
@@ -156,10 +157,10 @@ export function show(options) {
     }
 
     if (options.title) {
-        html += '<h1 class="actionSheetTitle">' + options.title + '</h1>';
+        html += '<h1 class="actionSheetTitle">' + escapeHtml(options.title) + '</h1>';
     }
     if (options.text) {
-        html += '<p class="actionSheetText">' + options.text + '</p>';
+        html += '<p class="actionSheetText">' + escapeHtml(options.text) + '</p>';
     }
 
     let scrollerClassName = 'actionSheetScroller';
@@ -212,17 +213,17 @@ export function show(options) {
         html += '<div class="listItemBody actionsheetListItemBody">';
 
         html += '<div class="listItemBodyText actionSheetItemText">';
-        html += (item.name || item.textContent || item.innerText);
+        html += escapeHtml(item.name || item.textContent || item.innerText);
         html += '</div>';
 
         if (item.secondaryText) {
-            html += `<div class="listItemBodyText secondary">${item.secondaryText}</div>`;
+            html += `<div class="listItemBodyText secondary">${escapeHtml(item.secondaryText)}</div>`;
         }
 
         html += '</div>';
 
         if (item.asideText) {
-            html += `<div class="listItemAside actionSheetItemAsideText">${item.asideText}</div>`;
+            html += `<div class="listItemAside actionSheetItemAsideText">${escapeHtml(item.asideText)}</div>`;
         }
 
         html += '</button>';
diff --git a/src/components/activitylog.js b/src/components/activitylog.js
index dab5633f7d..b48b364fc7 100644
--- a/src/components/activitylog.js
+++ b/src/components/activitylog.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import { Events } from 'jellyfin-apiclient';
 import globalize from '../scripts/globalize';
 import dom from '../scripts/dom';
@@ -33,13 +34,13 @@ import alert from './alert';
 
         html += '<div class="listItemBody three-line">';
         html += '<div class="listItemBodyText">';
-        html += entry.Name;
+        html += escapeHtml(entry.Name);
         html += '</div>';
         html += '<div class="listItemBodyText secondary">';
         html += datefns.formatRelative(Date.parse(entry.Date), Date.parse(new Date()), { locale: dfnshelper.getLocale() });
         html += '</div>';
         html += '<div class="listItemBodyText secondary listItemBodyText-nowrap">';
-        html += entry.ShortOverview || '';
+        html += escapeHtml(entry.ShortOverview || '');
         html += '</div>';
         html += '</div>';
 
diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js
index c2300fb2d8..7826cf2f81 100644
--- a/src/components/cardbuilder/cardBuilder.js
+++ b/src/components/cardbuilder/cardBuilder.js
@@ -5,6 +5,7 @@
  * @module components/cardBuilder/cardBuilder
  */
 
+import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
 import itemHelper from '../itemHelper';
@@ -813,11 +814,11 @@ import ServerConnections from '../ServerConnections';
                                 IsFolder: true
                             }));
                         } else {
-                            lines.push(item.SeriesName);
+                            lines.push(escapeHtml(item.SeriesName));
                         }
                     } else {
                         if (isUsingLiveTvNaming(item)) {
-                            lines.push(item.Name);
+                            lines.push(escapeHtml(item.Name));
 
                             if (!item.EpisodeTitle) {
                                 titleAdded = true;
@@ -826,7 +827,7 @@ import ServerConnections from '../ServerConnections';
                             const parentTitle = item.SeriesName || item.Series || item.Album || item.AlbumArtist || '';
 
                             if (parentTitle || showTitle) {
-                                lines.push(parentTitle);
+                                lines.push(escapeHtml(parentTitle));
                             }
                         }
                     }
@@ -860,7 +861,7 @@ import ServerConnections from '../ServerConnections';
                         item.AlbumArtists[0].IsFolder = true;
                         lines.push(getTextActionButton(item.AlbumArtists[0], null, serverId));
                     } else {
-                        lines.push(isUsingLiveTvNaming(item) ? item.Name : (item.SeriesName || item.Series || item.Album || item.AlbumArtist || ''));
+                        lines.push(escapeHtml(isUsingLiveTvNaming(item) ? item.Name : (item.SeriesName || item.Series || item.Album || item.AlbumArtist || '')));
                     }
                 }
 
@@ -948,13 +949,13 @@ import ServerConnections from '../ServerConnections';
 
                         }, item.ChannelName));
                     } else {
-                        lines.push(item.ChannelName || '&nbsp;');
+                        lines.push(escapeHtml(item.ChannelName) || '&nbsp;');
                     }
                 }
 
                 if (options.showCurrentProgram && item.Type === 'TvChannel') {
                     if (item.CurrentProgram) {
-                        lines.push(item.CurrentProgram.Name);
+                        lines.push(escapeHtml(item.CurrentProgram.Name));
                     } else {
                         lines.push('');
                     }
@@ -980,13 +981,13 @@ import ServerConnections from '../ServerConnections';
                     if (item.RecordAnyChannel) {
                         lines.push(globalize.translate('AllChannels'));
                     } else {
-                        lines.push(item.ChannelName || globalize.translate('OneChannel'));
+                        lines.push(escapeHtml(item.ChannelName) || globalize.translate('OneChannel'));
                     }
                 }
 
                 if (options.showPersonRoleOrType) {
                     if (item.Role) {
-                        lines.push(globalize.translate('PersonRole', item.Role));
+                        lines.push(globalize.translate('PersonRole', escapeHtml(item.Role)));
                     }
                 }
             }
@@ -996,7 +997,7 @@ import ServerConnections from '../ServerConnections';
             }
 
             if (overlayText && showTitle) {
-                lines = [item.Name];
+                lines = [escapeHtml(item.Name)];
             }
 
             const addRightTextMargin = isOuterFooter && options.cardLayout && !options.centerText && options.cardFooterAside !== 'none' && layoutManager.mobile;
@@ -1031,6 +1032,8 @@ import ServerConnections from '../ServerConnections';
                 text = itemHelper.getDisplayName(item);
             }
 
+            text = escapeHtml(text);
+
             if (layoutManager.tv) {
                 return text;
             }
@@ -1442,7 +1445,7 @@ import ServerConnections from '../ServerConnections';
             const mediaTypeData = item.MediaType ? (' data-mediatype="' + item.MediaType + '"') : '';
             const collectionTypeData = item.CollectionType ? (' data-collectiontype="' + item.CollectionType + '"') : '';
             const channelIdData = item.ChannelId ? (' data-channelid="' + item.ChannelId + '"') : '';
-            const pathData = item.Path ? (' data-path="' + item.Path + '"') : '';
+            const pathData = item.Path ? (' data-path="' + escapeHtml(item.Path) + '"') : '';
             const contextData = options.context ? (' data-context="' + options.context + '"') : '';
             const parentIdData = options.parentId ? (' data-parentid="' + options.parentId + '"') : '';
             const startDate = item.StartDate ? (' data-startdate="' + item.StartDate.toString() + '"') : '';
@@ -1454,7 +1457,7 @@ import ServerConnections from '../ServerConnections';
                 additionalCardContent += getHoverMenuHtml(item, action);
             }
 
-            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + prefix + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
+            return '<' + tagName + ' data-index="' + index + '"' + timerAttributes + actionAttribute + ' data-isfolder="' + (item.IsFolder || false) + '" data-serverid="' + (item.ServerId || options.serverId) + '" data-id="' + (item.Id || item.ItemId) + '" data-type="' + item.Type + '"' + mediaTypeData + collectionTypeData + channelIdData + pathData + positionTicksData + collectionIdData + playlistIdData + contextData + parentIdData + startDate + endDate + ' data-prefix="' + escapeHtml(prefix) + '" class="' + className + '"' + ariaLabelAttribute + '>' + cardImageContainerOpen + innerCardFooter + cardImageContainerClose + overlayButtons + additionalCardContent + cardScalableClose + outerCardFooter + cardBoxClose + '</' + tagName + '>';
         }
 
         /**
@@ -1544,7 +1547,7 @@ import ServerConnections from '../ServerConnections';
             }
 
             const defaultName = isUsingLiveTvNaming(item) ? item.Name : itemHelper.getDisplayName(item);
-            return '<div class="cardText cardDefaultText">' + defaultName + '</div>';
+            return '<div class="cardText cardDefaultText">' + escapeHtml(defaultName) + '</div>';
         }
 
         /**
diff --git a/src/components/cardbuilder/chaptercardbuilder.js b/src/components/cardbuilder/chaptercardbuilder.js
index 9f48017936..da8de34f9a 100644
--- a/src/components/cardbuilder/chaptercardbuilder.js
+++ b/src/components/cardbuilder/chaptercardbuilder.js
@@ -5,6 +5,7 @@
  * @module components/cardBuilder/chaptercardbuilder
  */
 
+import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import imageLoader from '../images/imageLoader';
 import layoutManager from '../layoutManager';
@@ -98,7 +99,7 @@ import ServerConnections from '../ServerConnections';
         }
 
         let nameHtml = '';
-        nameHtml += `<div class="cardText">${chapter.Name}</div>`;
+        nameHtml += `<div class="cardText">${escapeHtml(chapter.Name)}</div>`;
         nameHtml += `<div class="cardText">${datetime.getDisplayRunningTime(chapter.StartPositionTicks)}</div>`;
 
         const cardBoxCssClass = 'cardBox';
diff --git a/src/components/channelMapper/channelMapper.js b/src/components/channelMapper/channelMapper.js
index d1338f182e..be9ff841ce 100644
--- a/src/components/channelMapper/channelMapper.js
+++ b/src/components/channelMapper/channelMapper.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
@@ -29,7 +30,7 @@ export default class channelMapper {
             }).then(mapping => {
                 const listItem = dom.parentWithClass(button, 'listItem');
                 button.setAttribute('data-providerid', mapping.ProviderChannelId);
-                listItem.querySelector('.secondary').innerHTML = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
+                listItem.querySelector('.secondary').innerText = getMappingSecondaryName(mapping, currentMappingOptions.ProviderName);
                 loading.hide();
             });
         }
@@ -75,12 +76,12 @@ export default class channelMapper {
             html += '<span class="material-icons listItemIcon dvr" aria-hidden="true"></span>';
             html += '<div class="listItemBody two-line">';
             html += '<h3 class="listItemBodyText">';
-            html += channel.Name;
+            html += escapeHtml(channel.Name);
             html += '</h3>';
             html += '<div class="secondary listItemBodyText">';
 
             if (channel.ProviderChannelName) {
-                html += getMappingSecondaryName(channel, providerName);
+                html += escapeHtml(getMappingSecondaryName(channel, providerName));
             }
 
             html += '</div>';
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index f78573af3d..946ddfebbb 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
@@ -112,7 +113,7 @@ import toast from '../toast/toast';
             html += `<option value="">${globalize.translate('OptionNew')}</option>`;
 
             html += result.Items.map(i => {
-                return `<option value="${i.Id}">${i.Name}</option>`;
+                return `<option value="${i.Id}">${escapeHtml(i.Name)}</option>`;
             });
 
             select.innerHTML = html;
diff --git a/src/components/dashboard/users/SelectElement.tsx b/src/components/dashboard/users/SelectElement.tsx
index a8d88b81c8..329dd9b575 100644
--- a/src/components/dashboard/users/SelectElement.tsx
+++ b/src/components/dashboard/users/SelectElement.tsx
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
@@ -26,7 +27,7 @@ type IProps = {
 const SelectElement: FunctionComponent<IProps> = ({ className, label, currentProviderId, providers }: IProps) => {
     const renderOption = providers.map((provider) => {
         const selected = provider.Id === currentProviderId || providers.length < 2 ? ' selected' : '';
-        return '<option value="' + provider.Id + '"' + selected + '>' + provider.Name + '</option>';
+        return '<option value="' + provider.Id + '"' + selected + '>' + escapeHtml(provider.Name) + '</option>';
     });
 
     return (
diff --git a/src/components/dashboard/users/SelectMaxParentalRating.tsx b/src/components/dashboard/users/SelectMaxParentalRating.tsx
index 24afe7b277..d1865b29e7 100644
--- a/src/components/dashboard/users/SelectMaxParentalRating.tsx
+++ b/src/components/dashboard/users/SelectMaxParentalRating.tsx
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import React, { FunctionComponent } from 'react';
 import globalize from '../../../scripts/globalize';
 
@@ -27,7 +28,7 @@ const SelectMaxParentalRating: FunctionComponent<IProps> = ({ className, label,
     const renderOption = () => {
         let content = '';
         for (const rating of parentalRatings) {
-            content += `<option value='${rating.Value}'>${rating.Name}</option>`;
+            content += `<option value='${rating.Value}'>${escapeHtml(rating.Name)}</option>`;
         }
         return content;
     };
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index e95b8a42e0..68b8c0a4ba 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
@@ -47,7 +48,7 @@ import template from './dialog.template.html';
         }
 
         if (options.title) {
-            dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || '';
+            dlg.querySelector('.formDialogHeaderTitle').innerText = options.title || '';
         } else {
             dlg.querySelector('.formDialogHeaderTitle').classList.add('hide');
         }
@@ -82,7 +83,7 @@ import template from './dialog.template.html';
                 buttonClass += ' formDialogFooterItem-vertical formDialogFooterItem-nomarginbottom';
             }
 
-            html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${item.name}</button>`;
+            html += `<button is="emby-button" type="button" class="${buttonClass}" data-id="${item.id}"${autoFocus}>${escapeHtml(item.name)}</button>`;
 
             if (item.description) {
                 html += `<div class="formDialogFooterItem formDialogFooterItem-autosize fieldDescription" style="margin-top:.25em!important;margin-bottom:1.25em!important;">${item.description}</div>`;
diff --git a/src/components/directorybrowser/directorybrowser.js b/src/components/directorybrowser/directorybrowser.js
index cc11736d99..ceb47b4438 100644
--- a/src/components/directorybrowser/directorybrowser.js
+++ b/src/components/directorybrowser/directorybrowser.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import loading from '../loading/loading';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import dom from '../../scripts/dom';
@@ -71,10 +72,10 @@ function refreshDirectoryBrowser(page, path, fileOptions, updatePathOnError) {
 
 function getItem(cssClass, type, path, name) {
     let html = '';
-    html += `<div class="listItem listItem-border ${cssClass}" data-type="${type}" data-path="${path}">`;
+    html += `<div class="listItem listItem-border ${cssClass}" data-type="${type}" data-path="${escapeHtml(path)}">`;
     html += '<div class="listItemBody" style="padding-left:0;padding-top:.5em;padding-bottom:.5em;">';
     html += '<div class="listItemBodyText">';
-    html += name;
+    html += escapeHtml(name);
     html += '</div>';
     html += '</div>';
     html += '<span class="material-icons arrow_forward" aria-hidden="true" style="font-size:inherit;"></span>';
@@ -87,7 +88,7 @@ function getEditorHtml(options, systemInfo) {
     html += '<div class="formDialogContent scrollY">';
     html += '<div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">';
     if (!options.pathReadOnly) {
-        const instruction = options.instruction ? `${options.instruction}<br/><br/>` : '';
+        const instruction = options.instruction ? `${escapeHtml(options.instruction)}<br/><br/>` : '';
         html += '<div class="infoBanner" style="margin-bottom:1.5em;">';
         html += instruction;
         if (systemInfo.OperatingSystem.toLowerCase() === 'bsd') {
@@ -266,7 +267,7 @@ class DirectoryBrowser {
                 html += '<div class="formDialogHeader">';
                 html += `<button is="paper-icon-button-light" class="btnCloseDialog autoSize" tabindex="-1" title="${globalize.translate('ButtonBack')}"><span class="material-icons arrow_back" aria-hidden="true"></span></button>`;
                 html += '<h3 class="formDialogHeaderTitle">';
-                html += options.header || globalize.translate('HeaderSelectPath');
+                html += escapeHtml(options.header) || globalize.translate('HeaderSelectPath');
                 html += '</h3>';
                 html += '</div>';
                 html += getEditorHtml(options, systemInfo);
diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index bf93e7a005..9b9df94131 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import browser from '../../scripts/browser';
 import layoutManager from '../layoutManager';
 import { pluginManager } from '../pluginManager';
@@ -21,7 +22,7 @@ import template from './displaySettings.template.html';
     function fillThemes(select, selectedTheme) {
         skinManager.getThemes().then(themes => {
             select.innerHTML = themes.map(t => {
-                return `<option value="${t.id}">${t.name}</option>`;
+                return `<option value="${t.id}">${escapeHtml(t.name)}</option>`;
             }).join('');
 
             // get default theme
@@ -47,7 +48,7 @@ import template from './displaySettings.template.html';
         });
 
         selectScreensaver.innerHTML = options.map(o => {
-            return `<option value="${o.value}">${o.name}</option>`;
+            return `<option value="${o.value}">${escapeHtml(o.name)}</option>`;
         }).join('');
 
         selectScreensaver.value = userSettings.screensaver();
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 8c71782968..6f2378eca3 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from '../../scripts/dom';
 import focusManager from '../focusManager';
 import dialogHelper from '../dialogHelper/dialogHelper';
@@ -37,7 +38,7 @@ function renderOptions(context, selector, cssClass, items, isCheckedFn) {
         const checkedHtml = isCheckedFn(filter) ? ' checked' : '';
         itemHtml += '<label>';
         itemHtml += '<input is="emby-checkbox" type="checkbox"' + checkedHtml + ' data-filter="' + filter.Id + '" class="' + cssClass + '"/>';
-        itemHtml += '<span>' + filter.Name + '</span>';
+        itemHtml += '<span>' + escapeHtml(filter.Name) + '</span>';
         itemHtml += '</label>';
 
         return itemHtml;
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index 017bfdb415..c9b5b108e0 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import inputManager from '../../scripts/inputManager';
 import browser from '../../scripts/browser';
 import globalize from '../../scripts/globalize';
@@ -538,7 +539,7 @@ function Guide(options) {
 
                 html += '<div class="guide-programNameCaret hide"><span class="guideProgramNameCaretIcon material-icons keyboard_arrow_left" aria-hidden="true"></span></div>';
 
-                html += '<div class="guideProgramNameText">' + program.Name;
+                html += '<div class="guideProgramNameText">' + escapeHtml(program.Name);
 
                 let indicatorHtml = null;
                 if (program.IsLive && options.showLiveIndicator) {
@@ -556,7 +557,7 @@ function Guide(options) {
                     html += '<div class="guideProgramSecondaryInfo">';
 
                     if (program.EpisodeTitle && options.showEpisodeTitle) {
-                        html += '<span class="programSecondaryTitle">' + program.EpisodeTitle + '</span>';
+                        html += '<span class="programSecondaryTitle">' + escapeHtml(program.EpisodeTitle) + '</span>';
                     }
                     html += '</div>';
                 }
@@ -604,7 +605,7 @@ function Guide(options) {
                 title.push(channel.Name);
             }
 
-            html += '<button title="' + title.join(' ') + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
+            html += '<button title="' + escapeHtml(title.join(' ')) + '" type="button" class="' + cssClass + '"' + ' data-action="link" data-isfolder="' + channel.IsFolder + '" data-id="' + channel.Id + '" data-serverid="' + channel.ServerId + '" data-type="' + channel.Type + '">';
 
             if (hasChannelImage) {
                 const url = apiClient.getScaledImageUrl(channel.Id, {
@@ -621,7 +622,7 @@ function Guide(options) {
             }
 
             if (!hasChannelImage && channel.Name) {
-                html += '<div class="guideChannelName">' + channel.Name + '</div>';
+                html += '<div class="guideChannelName">' + escapeHtml(channel.Name) + '</div>';
             }
 
             html += '</button>';
diff --git a/src/components/homeScreenSettings/homeScreenSettings.js b/src/components/homeScreenSettings/homeScreenSettings.js
index 7561a40791..2adba2f6b8 100644
--- a/src/components/homeScreenSettings/homeScreenSettings.js
+++ b/src/components/homeScreenSettings/homeScreenSettings.js
@@ -1,4 +1,5 @@
 
+import escapeHtml from 'escape-html';
 import layoutManager from '../layoutManager';
 import focusManager from '../focusManager';
 import globalize from '../../scripts/globalize';
@@ -32,7 +33,7 @@ import template from './homeScreenSettings.template.html';
 
             currentHtml += '<label>';
             currentHtml += `<input type="checkbox" is="emby-checkbox" class="chkGroupFolder" data-folderid="${i.Id}" id="${id}"${checkedHtml}/>`;
-            currentHtml += `<span>${i.Name}</span>`;
+            currentHtml += `<span>${escapeHtml(i.Name)}</span>`;
             currentHtml += '</label>';
 
             return currentHtml;
@@ -165,7 +166,7 @@ import template from './homeScreenSettings.template.html';
             const selectedHtml = selected ? ' selected' : '';
             const optionValue = o.isDefault ? '' : o.value;
 
-            return `<option value="${optionValue}"${selectedHtml}>${o.name}</option>`;
+            return `<option value="${optionValue}"${selectedHtml}>${escapeHtml(o.name)}</option>`;
         }).join('');
     }
 
@@ -182,7 +183,7 @@ import template from './homeScreenSettings.template.html';
             currentHtml += '<div class="listItemBody">';
 
             currentHtml += '<div>';
-            currentHtml += view.Name;
+            currentHtml += escapeHtml(view.Name);
             currentHtml += '</div>';
 
             currentHtml += '</div>';
@@ -265,7 +266,7 @@ import template from './homeScreenSettings.template.html';
             prefix += '<div class="verticalSection">';
 
             prefix += '<h2 class="sectionTitle">';
-            prefix += item.Name;
+            prefix += escapeHtml(item.Name);
             prefix += '</h2>';
 
             html = prefix + html;
diff --git a/src/components/homesections/homesections.js b/src/components/homesections/homesections.js
index 25c231d560..320dc94471 100644
--- a/src/components/homesections/homesections.js
+++ b/src/components/homesections/homesections.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import cardBuilder from '../cardbuilder/cardBuilder';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
@@ -192,7 +193,7 @@ import ServerConnections from '../ServerConnections';
         for (let i = 0, length = items.length; i < length; i++) {
             const item = items[i];
             const icon = imageHelper.getLibraryIcon(item.CollectionType);
-            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '" aria-hidden="true"></span><span class="homeLibraryText">' + item.Name + '</span></a>';
+            html += '<a is="emby-linkbutton" href="' + appRouter.getRouteUrl(item) + '" class="raised homeLibraryButton"><span class="material-icons homeLibraryIcon ' + icon + '" aria-hidden="true"></span><span class="homeLibraryText">' + escapeHtml(item.Name) + '</span></a>';
         }
 
         html += '</div>';
@@ -281,12 +282,12 @@ import ServerConnections from '../ServerConnections';
                 section: 'latest'
             }) + '" class="more button-flat button-flat-mini sectionTitleTextButton">';
             html += '<h2 class="sectionTitle sectionTitle-cards">';
-            html += globalize.translate('LatestFromLibrary', parent.Name);
+            html += globalize.translate('LatestFromLibrary', escapeHtml(parent.Name));
             html += '</h2>';
             html += '<span class="material-icons chevron_right" aria-hidden="true"></span>';
             html += '</a>';
         } else {
-            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', parent.Name) + '</h2>';
+            html += '<h2 class="sectionTitle sectionTitle-cards">' + globalize.translate('LatestFromLibrary', escapeHtml(parent.Name)) + '</h2>';
         }
         html += '</div>';
 
diff --git a/src/components/itemMediaInfo/itemMediaInfo.js b/src/components/itemMediaInfo/itemMediaInfo.js
index a61dd165de..08c290379c 100644
--- a/src/components/itemMediaInfo/itemMediaInfo.js
+++ b/src/components/itemMediaInfo/itemMediaInfo.js
@@ -5,6 +5,7 @@
  * @module components/itemMediaInfo/itemMediaInfo
  */
 
+import escapeHtml from 'escape-html';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
 import toast from '../toast/toast';
@@ -55,7 +56,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
     function getMediaSourceHtml(user, item, version) {
         let html = '<div class="mediaInfoSource">';
         if (version.Name) {
-            html += `<div><h2 class="mediaInfoStreamType">${version.Name}${copyButtonHtml}</h2></div>\n`;
+            html += `<div><h2 class="mediaInfoStreamType">${escapeHtml(version.Name)}${copyButtonHtml}</h2></div>\n`;
         }
         if (version.Container) {
             html += `${createAttribute(globalize.translate('MediaInfoContainer'), version.Container)}<br/>`;
@@ -181,7 +182,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
     }
 
     function createAttribute(label, value) {
-        return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute">${value}</span>\n`;
+        return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute">${escapeHtml(value)}</span>\n`;
     }
 
     function loadMediaInfo(itemId, serverId) {
diff --git a/src/components/itemidentifier/itemidentifier.js b/src/components/itemidentifier/itemidentifier.js
index 885f21a2f3..eae3257513 100644
--- a/src/components/itemidentifier/itemidentifier.js
+++ b/src/components/itemidentifier/itemidentifier.js
@@ -5,6 +5,7 @@
  * @module components/itemidentifier/itemidentifier
  */
 
+import escapeHtml from 'escape-html';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
 import globalize from '../../scripts/globalize';
@@ -162,7 +163,7 @@ import template from './itemidentifier.template.html';
         currentSearchResult = identifyResult;
 
         const lines = [];
-        lines.push(identifyResult.Name);
+        lines.push(escapeHtml(identifyResult.Name));
 
         if (identifyResult.ProductionYear) {
             lines.push(identifyResult.ProductionYear);
@@ -218,7 +219,7 @@ import template from './itemidentifier.template.html';
         if (result.ImageUrl) {
             html += `<div class="cardImageContainer coveredImage" style="background-image:url('${result.ImageUrl}');"></div>`;
         } else {
-            html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${result.Name}</div></div>`;
+            html += `<div class="cardImageContainer coveredImage defaultCardBackground defaultCardBackground1"><div class="cardText cardCenteredText">${escapeHtml(result.Name)}</div></div>`;
         }
         html += '</div>';
         html += '</div>';
@@ -245,7 +246,7 @@ import template from './itemidentifier.template.html';
             } else {
                 html += '<div class="cardText cardText-secondary cardTextCentered">';
             }
-            html += lines[i] || '&nbsp;';
+            html += escapeHtml(lines[i]) || '&nbsp;';
             html += '</div>';
         }
 
@@ -299,7 +300,7 @@ import template from './itemidentifier.template.html';
                     fullName = `${idInfo.Name} ${globalize.translate(idInfo.Type)}`;
                 }
 
-                const idLabel = globalize.translate('LabelDynamicExternalId', fullName);
+                const idLabel = globalize.translate('LabelDynamicExternalId', escapeHtml(fullName));
 
                 html += `<input is="emby-input" class="txtLookupId" data-providerkey="${idInfo.Key}" id="${id}" label="${idLabel}"/>`;
 
@@ -364,7 +365,7 @@ import template from './itemidentifier.template.html';
                 dlg.querySelector('.fldPath').classList.add('hide');
             }
 
-            dlg.querySelector('.txtPath').innerHTML = item.Path || '';
+            dlg.querySelector('.txtPath').innerText = item.Path || '';
 
             dialogHelper.open(dlg);
 
diff --git a/src/components/libraryoptionseditor/libraryoptionseditor.js b/src/components/libraryoptionseditor/libraryoptionseditor.js
index f57e6e1b65..59478280a9 100644
--- a/src/components/libraryoptionseditor/libraryoptionseditor.js
+++ b/src/components/libraryoptionseditor/libraryoptionseditor.js
@@ -5,6 +5,7 @@
  * @module components/libraryoptionseditor/libraryoptionseditor
  */
 
+import escapeHtml from 'escape-html';
 import globalize from '../../scripts/globalize';
 import dom from '../../scripts/dom';
 import '../../elements/emby-checkbox/emby-checkbox';
@@ -68,11 +69,11 @@ import template from './libraryoptionseditor.template.html';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (let i = 0; i < plugins.length; i++) {
             const plugin = plugins[i];
-            html += `<div class="listItem localReaderOption sortableOption" data-pluginname="${plugin.Name}">`;
+            html += `<div class="listItem localReaderOption sortableOption" data-pluginname="${escapeHtml(plugin.Name)}">`;
             html += '<span class="listItemIcon material-icons live_tv" aria-hidden="true"></span>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
-            html += plugin.Name;
+            html += escapeHtml(plugin.Name);
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
@@ -101,7 +102,7 @@ import template from './libraryoptionseditor.template.html';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (let i = 0; i < metadataSavers.length; i++) {
             const plugin = metadataSavers[i];
-            html += `<label><input type="checkbox" data-defaultenabled="${plugin.DefaultEnabled}" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="${plugin.Name}" ${false}><span>${plugin.Name}</span></label>`;
+            html += `<label><input type="checkbox" data-defaultenabled="${plugin.DefaultEnabled}" is="emby-checkbox" class="chkMetadataSaver" data-pluginname="${escapeHtml(plugin.Name)}" ${false}><span>${escapeHtml(plugin.Name)}</span></label>`;
         }
         html += '</div>';
         html += `<div class="fieldDescription" style="margin-top:.25em;">${globalize.translate('LabelMetadataSaversHelp')}</div>`;
@@ -122,13 +123,13 @@ import template from './libraryoptionseditor.template.html';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
 
         plugins.forEach((plugin, index) => {
-            html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
+            html += '<div class="listItem metadataFetcherItem sortableOption" data-pluginname="' + escapeHtml(plugin.Name) + '">';
             const isChecked = libraryOptionsForType.MetadataFetchers ? libraryOptionsForType.MetadataFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
             const checkedHtml = isChecked ? ' checked="checked"' : '';
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkMetadataFetcher" data-pluginname="' + escapeHtml(plugin.Name) + '" ' + checkedHtml + '><span></span></label>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
-            html += plugin.Name;
+            html += escapeHtml(plugin.Name);
             html += '</h3>';
             html += '</div>';
             if (index > 0) {
@@ -188,13 +189,13 @@ import template from './libraryoptionseditor.template.html';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (let i = 0; i < plugins.length; i++) {
             const plugin = plugins[i];
-            html += `<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="${plugin.Name}">`;
+            html += `<div class="listItem subtitleFetcherItem sortableOption" data-pluginname="${escapeHtml(plugin.Name)}">`;
             const isChecked = libraryOptions.DisabledSubtitleFetchers ? !libraryOptions.DisabledSubtitleFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
             const checkedHtml = isChecked ? ' checked="checked"' : '';
-            html += `<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="${plugin.Name}" ${checkedHtml}><span></span></label>`;
+            html += `<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkSubtitleFetcher" data-pluginname="${escapeHtml(plugin.Name)}" ${checkedHtml}><span></span></label>`;
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
-            html += plugin.Name;
+            html += escapeHtml(plugin.Name);
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
@@ -227,13 +228,13 @@ import template from './libraryoptionseditor.template.html';
         html += '<div class="checkboxList paperList checkboxList-paperList">';
         for (let i = 0; i < plugins.length; i++) {
             const plugin = plugins[i];
-            html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + plugin.Name + '">';
+            html += '<div class="listItem imageFetcherItem sortableOption" data-pluginname="' + escapeHtml(plugin.Name) + '">';
             const isChecked = libraryOptionsForType.ImageFetchers ? libraryOptionsForType.ImageFetchers.includes(plugin.Name) : plugin.DefaultEnabled;
             const checkedHtml = isChecked ? ' checked="checked"' : '';
-            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + plugin.Name + '" ' + checkedHtml + '><span></span></label>';
+            html += '<label class="listItemCheckboxContainer"><input type="checkbox" is="emby-checkbox" class="chkImageFetcher" data-pluginname="' + escapeHtml(plugin.Name) + '" ' + checkedHtml + '><span></span></label>';
             html += '<div class="listItemBody">';
             html += '<h3 class="listItemBodyText">';
-            html += plugin.Name;
+            html += escapeHtml(plugin.Name);
             html += '</h3>';
             html += '</div>';
             if (i > 0) {
diff --git a/src/components/listview/listview.js b/src/components/listview/listview.js
index d75580f824..ee75656367 100644
--- a/src/components/listview/listview.js
+++ b/src/components/listview/listview.js
@@ -5,6 +5,7 @@
  * @module components/listview/listview
  */
 
+import escapeHtml from 'escape-html';
 import itemHelper from '../itemHelper';
 import mediaInfo from '../mediainfo/mediainfo';
 import indicators from '../indicators/indicators';
@@ -203,7 +204,7 @@ import ServerConnections from '../ServerConnections';
                     } else {
                         html += '<h2 class="listGroupHeader">';
                     }
-                    html += itemGroupTitle;
+                    html += escapeHtml(itemGroupTitle);
                     html += '</h2>';
 
                     html += '<div>';
diff --git a/src/components/mediaLibraryCreator/mediaLibraryCreator.js b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
index 889804bc9d..c1e6826f6e 100644
--- a/src/components/mediaLibraryCreator/mediaLibraryCreator.js
+++ b/src/components/mediaLibraryCreator/mediaLibraryCreator.js
@@ -5,6 +5,7 @@
  * @module components/mediaLibraryCreator/mediaLibraryCreator
  */
 
+import escapeHtml from 'escape-html';
 import loading from '../loading/loading';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import dom from '../../scripts/dom';
@@ -120,10 +121,10 @@ import template from './mediaLibraryCreator.template.html';
         let html = '';
         html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
-        html += `<div class="listItemBodyText">${pathInfo.Path}</div>`;
+        html += `<div class="listItemBodyText">${escapeHtml(pathInfo.Path)}</div>`;
 
         if (pathInfo.NetworkPath) {
-            html += `<div class="listItemBodyText secondary">${pathInfo.NetworkPath}</div>`;
+            html += `<div class="listItemBodyText secondary">${escapeHtml(pathInfo.NetworkPath)}</div>`;
         }
 
         html += '</div>';
diff --git a/src/components/mediaLibraryEditor/mediaLibraryEditor.js b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
index aaf0c1e550..9cbe9b0519 100644
--- a/src/components/mediaLibraryEditor/mediaLibraryEditor.js
+++ b/src/components/mediaLibraryEditor/mediaLibraryEditor.js
@@ -5,6 +5,7 @@
  * @module components/mediaLibraryEditor/mediaLibraryEditor
  */
 
+import escapeHtml from 'escape-html';
 import 'jquery';
 import loading from '../loading/loading';
 import dialogHelper from '../dialogHelper/dialogHelper';
@@ -111,11 +112,11 @@ import template from './mediaLibraryEditor.template.html';
         html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-left:.5em;">`;
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
         html += '<h3 class="listItemBodyText">';
-        html += pathInfo.Path;
+        html += escapeHtml(pathInfo.Path);
         html += '</h3>';
 
         if (pathInfo.NetworkPath) {
-            html += `<div class="listItemBodyText secondary">${pathInfo.NetworkPath}</div>`;
+            html += `<div class="listItemBodyText secondary">${escapeHtml(pathInfo.NetworkPath)}</div>`;
         }
 
         html += '</div>';
@@ -213,7 +214,7 @@ export class showEditor {
         dlg.classList.add('background-theme-a');
         dlg.classList.add('formDialog');
         dlg.innerHTML = globalize.translateHtml(template);
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
+        dlg.querySelector('.formDialogHeaderTitle').innerText = options.library.Name;
         initEditor(dlg, options);
         dlg.addEventListener('close', onDialogClosed);
         dialogHelper.open(dlg);
diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js
index 737d8a4624..f21bc8f666 100644
--- a/src/components/mediainfo/mediainfo.js
+++ b/src/components/mediainfo/mediainfo.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import globalize from '../../scripts/globalize';
 import { appRouter } from '../appRouter';
@@ -77,10 +78,10 @@ import '../../elements/emby-button/emby-button';
                         Name: item.ChannelName,
                         Id: item.ChannelId
 
-                    })}">${item.ChannelName}</a>`
+                    })}">${escapeHtml(item.ChannelName)}</a>`
                 });
             } else {
-                miscInfo.push(item.ChannelName);
+                miscInfo.push(escapeHtml(item.ChannelName));
             }
         }
 
@@ -221,7 +222,7 @@ import '../../elements/emby-button/emby-button';
                 });
 
                 if (text) {
-                    miscInfo.push(text);
+                    miscInfo.push(escapeHtml(text));
                 }
             } else if (item.IsMovie && item.ProductionYear && options.originalAirDate !== false) {
                 miscInfo.push(item.ProductionYear);
diff --git a/src/components/metadataEditor/metadataEditor.js b/src/components/metadataEditor/metadataEditor.js
index ce2f27faad..d5e39d45af 100644
--- a/src/components/metadataEditor/metadataEditor.js
+++ b/src/components/metadataEditor/metadataEditor.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from '../../scripts/dom';
 import layoutManager from '../layoutManager';
 import dialogHelper from '../dialogHelper/dialogHelper';
@@ -448,12 +449,12 @@ import template from './metadataEditor.template.html';
                 fullName = idInfo.Name + ' ' + globalize.translate(idInfo.Type);
             }
 
-            const labelText = globalize.translate('LabelDynamicExternalId', fullName);
+            const labelText = globalize.translate('LabelDynamicExternalId', escapeHtml(fullName));
 
             html += '<div class="inputContainer">';
             html += '<div class="flex align-items-center">';
 
-            const value = providerIds[idInfo.Key] || '';
+            const value = escapeHtml(providerIds[idInfo.Key] || '');
 
             html += '<div class="flex-grow">';
             html += '<input is="emby-input" class="txtExternalId" value="' + value + '" data-providerkey="' + idInfo.Key + '" data-formatstring="' + formatString + '" id="' + id + '" label="' + labelText + '"/>';
@@ -860,7 +861,7 @@ import template from './metadataEditor.template.html';
         for (let i = 0, length = ratings.length; i < length; i++) {
             rating = ratings[i];
 
-            html += "<option value='" + rating.Value + "'>" + rating.Name + '</option>';
+            html += "<option value='" + escapeHtml(rating.Value) + "'>" + escapeHtml(rating.Name) + '</option>';
         }
 
         select.innerHTML = html;
@@ -893,7 +894,7 @@ import template from './metadataEditor.template.html';
             html += '<div class="listItemBody">';
 
             html += '<div class="textValue">';
-            html += items[i];
+            html += escapeHtml(items[i]);
             html += '</div>';
 
             html += '</div>';
@@ -923,7 +924,7 @@ import template from './metadataEditor.template.html';
             html += '<button style="text-align:left;" type="button" class="btnEditPerson clearButton" data-index="' + i + '">';
 
             html += '<div class="textValue">';
-            html += (person.Name || '');
+            html += escapeHtml(person.Name || '');
             html += '</div>';
 
             if (person.Role && person.Role !== lastType) {
diff --git a/src/components/playback/nowplayinghelper.js b/src/components/playback/nowplayinghelper.js
index a2b72ca84f..507e689c7f 100644
--- a/src/components/playback/nowplayinghelper.js
+++ b/src/components/playback/nowplayinghelper.js
@@ -1,3 +1,5 @@
+import escapeHtml from 'escape-html';
+
 export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
     let topItem = nowPlayingItem;
     let bottomItem = null;
@@ -59,13 +61,13 @@ export function getNowPlayingNames(nowPlayingItem, includeNonNameInfo) {
     const list = [];
 
     list.push({
-        text: topText,
+        text: escapeHtml(topText),
         item: topItem
     });
 
     if (bottomText) {
         list.push({
-            text: bottomText,
+            text: escapeHtml(bottomText),
             item: bottomItem
         });
     }
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index 8dfc26eb5f..440685fd9c 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from '../../scripts/dom';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import loading from '../loading/loading';
@@ -126,7 +127,7 @@ import ServerConnections from '../ServerConnections';
             html += `<option value="">${globalize.translate('OptionNew')}</option>`;
 
             html += result.Items.map(i => {
-                return `<option value="${i.Id}">${i.Name}</option>`;
+                return `<option value="${i.Id}">${escapeHtml(i.Name)}</option>`;
             });
 
             select.innerHTML = html;
diff --git a/src/components/prompt/prompt.js b/src/components/prompt/prompt.js
index c59a6e724f..df93cfbbf2 100644
--- a/src/components/prompt/prompt.js
+++ b/src/components/prompt/prompt.js
@@ -54,10 +54,10 @@ export default (() => {
             dialogHelper.close(dlg);
         });
 
-        dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || '';
+        dlg.querySelector('.formDialogHeaderTitle').innerText = options.title || '';
 
         if (options.description) {
-            dlg.querySelector('.fieldDescription').innerHTML = options.description;
+            dlg.querySelector('.fieldDescription').innerText = options.description;
         } else {
             dlg.querySelector('.fieldDescription').classList.add('hide');
         }
@@ -79,7 +79,7 @@ export default (() => {
             return false;
         });
 
-        dlg.querySelector('.submitText').innerHTML = options.confirmText || globalize.translate('ButtonOk');
+        dlg.querySelector('.submitText').innerText = options.confirmText || globalize.translate('ButtonOk');
 
         dlg.style.minWidth = `${Math.min(400, dom.getWindowSize().innerWidth - 50)}px`;
 
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index c3d59ac217..4387b2e09b 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -81,10 +81,10 @@ function renderRecording(context, defaultTimer, program, apiClient, refreshRecor
             imageContainer.classList.add('hide');
         }
 
-        context.querySelector('.recordingDialog-itemName').innerHTML = program.Name;
-        context.querySelector('.formDialogHeaderTitle').innerHTML = program.Name;
-        context.querySelector('.itemGenres').innerHTML = (program.Genres || []).join(' / ');
-        context.querySelector('.itemOverview').innerHTML = program.Overview || '';
+        context.querySelector('.recordingDialog-itemName').innerText = program.Name;
+        context.querySelector('.formDialogHeaderTitle').innerText = program.Name;
+        context.querySelector('.itemGenres').innerText = (program.Genres || []).join(' / ');
+        context.querySelector('.itemOverview').innerText = program.Overview || '';
 
         const formDialogFooter = context.querySelector('.formDialogFooter');
         const now = new Date();
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index b4bbba863b..a649b1231b 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -45,7 +45,7 @@ function renderTimer(context, item) {
     context.querySelector('.selectKeepUpTo').value = item.KeepUpTo || 0;
 
     if (item.ChannelName || item.ChannelNumber) {
-        context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
+        context.querySelector('.optionChannelOnly').innerText = globalize.translate('ChannelNameOnly', item.ChannelName || item.ChannelNumber);
     } else {
         context.querySelector('.optionChannelOnly').innerHTML = globalize.translate('OneChannel');
     }
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index d6940f632c..5205093610 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import backdrop from '../backdrop/backdrop';
 import listView from '../listview/listview';
@@ -139,13 +140,13 @@ function updateNowPlayingInfo(context, state, serverId) {
     if (item) {
         const nowPlayingServerId = (item.ServerId || serverId);
         if (item.Type == 'Audio' || item.MediaStreams[0].Type == 'Audio') {
-            const songName = item.Name;
+            const songName = escapeHtml(item.Name);
             let artistsSeries = '';
             let albumName = '';
             if (item.Artists != null) {
                 if (item.ArtistItems != null) {
                     for (const artist of item.ArtistItems) {
-                        const artistName = artist.Name;
+                        const artistName = escapeHtml(artist.Name);
                         const artistId = artist.Id;
                         artistsSeries += `<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=${artistId}&serverId=${nowPlayingServerId}">${artistName}</a>`;
                         if (artist !== item.ArtistItems.slice(-1)[0]) {
@@ -157,7 +158,7 @@ function updateNowPlayingInfo(context, state, serverId) {
                     // to normal item.Artists item.
                     // TODO: Normalise fields returned by all the players
                     for (const artist of item.Artists) {
-                        artistsSeries += `<a>${artist}</a>`;
+                        artistsSeries += `<a>${escapeHtml(artist)}</a>`;
                         if (artist !== item.Artists.slice(-1)[0]) {
                             artistsSeries += ', ';
                         }
@@ -165,27 +166,27 @@ function updateNowPlayingInfo(context, state, serverId) {
                 }
             }
             if (item.Album != null) {
-                albumName = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.AlbumId + `&serverId=${nowPlayingServerId}">` + item.Album + '</a>';
+                albumName = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.AlbumId + `&serverId=${nowPlayingServerId}">` + escapeHtml(item.Album) + '</a>';
             }
-            context.querySelector('.nowPlayingAlbum').innerHTML = albumName;
-            context.querySelector('.nowPlayingArtist').innerHTML = artistsSeries;
-            context.querySelector('.nowPlayingSongName').innerHTML = songName;
+            context.querySelector('.nowPlayingAlbum').innerText = albumName;
+            context.querySelector('.nowPlayingArtist').innerText = artistsSeries;
+            context.querySelector('.nowPlayingSongName').innerText = songName;
         } else if (item.Type == 'Episode') {
             if (item.SeasonName != null) {
                 const seasonName = item.SeasonName;
-                context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${seasonName}</a>`;
+                context.querySelector('.nowPlayingSeason').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.SeasonId + `&serverId=${nowPlayingServerId}">${escapeHtml(seasonName)}</a>`;
             }
             if (item.SeriesName != null) {
                 const seriesName = item.SeriesName;
                 if (item.SeriesId != null) {
-                    context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${seriesName}</a>`;
+                    context.querySelector('.nowPlayingSerie').innerHTML = '<a class="button-link emby-button" is="emby-linkbutton" href="#!/details?id=' + item.SeriesId + `&serverId=${nowPlayingServerId}">${escapeHtml(seriesName)}</a>`;
                 } else {
-                    context.querySelector('.nowPlayingSerie').innerHTML = seriesName;
+                    context.querySelector('.nowPlayingSerie').innerText = seriesName;
                 }
             }
-            context.querySelector('.nowPlayingEpisode').innerHTML = item.Name;
+            context.querySelector('.nowPlayingEpisode').innerText = item.Name;
         } else {
-            context.querySelector('.nowPlayingPageTitle').innerHTML = displayName;
+            context.querySelector('.nowPlayingPageTitle').innerText = displayName;
         }
 
         if (displayName.length > 0 && item.Type != 'Audio' && item.Type != 'Episode') {
diff --git a/src/components/search/SearchSuggestions.tsx b/src/components/search/SearchSuggestions.tsx
index 596ad64518..fee361a162 100644
--- a/src/components/search/SearchSuggestions.tsx
+++ b/src/components/search/SearchSuggestions.tsx
@@ -1,4 +1,5 @@
 import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
+import escapeHtml from 'escape-html';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 
 import { appRouter } from '../appRouter';
@@ -16,7 +17,7 @@ const createSuggestionLink = ({ name, href }: { name: string, href: string }) =>
     class='button-link'
     style='display: inline-block; padding: 0.5em 1em;'
     href='${href}'
->${name}</a>`
+>${escapeHtml(name)}</a>`
 });
 
 type SearchSuggestionsProps = {
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index 883cc29fbe..ead71f9cee 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import { appHost } from '../apphost';
 import dialogHelper from '../dialogHelper/dialogHelper';
 import layoutManager from '../layoutManager';
@@ -103,11 +104,11 @@ function fillSubtitleList(context, item) {
             itemHtml += '<div class="listItemBody two-line">';
 
             itemHtml += '<div>';
-            itemHtml += s.DisplayTitle || '';
+            itemHtml += escapeHtml(s.DisplayTitle || '');
             itemHtml += '</div>';
 
             if (s.Path) {
-                itemHtml += '<div class="secondary listItemBodyText">' + (s.Path) + '</div>';
+                itemHtml += '<div class="secondary listItemBodyText">' + escapeHtml(s.Path) + '</div>';
             }
 
             itemHtml += '</a>';
@@ -199,7 +200,7 @@ function renderSearchResults(context, results) {
 
         html += '<div class="listItemBody ' + bodyClass + '">';
 
-        html += '<div>' + (result.Name) + '</div>';
+        html += '<div>' + escapeHtml(result.Name) + '</div>';
         html += '<div class="secondary listItemBodyText">';
 
         if (result.Format) {
@@ -212,7 +213,7 @@ function renderSearchResults(context, results) {
         html += '</div>';
 
         if (result.Comment) {
-            html += '<div class="secondary listItemBodyText">' + (result.Comment) + '</div>';
+            html += '<div class="secondary listItemBodyText">' + escapeHtml(result.Comment) + '</div>';
         }
 
         if (result.IsHashMatch) {
@@ -265,7 +266,7 @@ function reload(context, apiClient, itemId) {
         }
 
         if (file) {
-            context.querySelector('.pathValue').innerHTML = file;
+            context.querySelector('.pathValue').innerText = file;
             context.querySelector('.originalFile').classList.remove('hide');
         } else {
             context.querySelector('.pathValue').innerHTML = '';
diff --git a/src/components/upnextdialog/upnextdialog.js b/src/components/upnextdialog/upnextdialog.js
index 2284975f13..4eac3eae60 100644
--- a/src/components/upnextdialog/upnextdialog.js
+++ b/src/components/upnextdialog/upnextdialog.js
@@ -80,7 +80,7 @@ import '../../assets/css/flexstyles.scss';
             title = item.SeriesName + ' - ' + title;
         }
 
-        elem.querySelector('.upNextDialog-title').innerHTML = title || '';
+        elem.querySelector('.upNextDialog-title').innerText = title || '';
 
         instance.itemType = item.Type;
 
diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js
index b7468c266d..d4110b05ef 100644
--- a/src/controllers/dashboard/dashboard.js
+++ b/src/controllers/dashboard/dashboard.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import datetime from '../../scripts/datetime';
 import { Events } from 'jellyfin-apiclient';
 import itemHelper from '../../components/itemHelper';
@@ -199,10 +200,10 @@ import confirm from '../../components/confirm/confirm';
 
     function reloadSystemInfo(view, apiClient) {
         apiClient.getSystemInfo().then(function (systemInfo) {
-            view.querySelector('#serverName').innerHTML = globalize.translate('DashboardServerName', systemInfo.ServerName);
-            view.querySelector('#versionNumber').innerHTML = globalize.translate('DashboardVersionNumber', systemInfo.Version);
-            view.querySelector('#operatingSystem').innerHTML = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
-            view.querySelector('#architecture').innerHTML = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
+            view.querySelector('#serverName').innerText = globalize.translate('DashboardServerName', systemInfo.ServerName);
+            view.querySelector('#versionNumber').innerText = globalize.translate('DashboardVersionNumber', systemInfo.Version);
+            view.querySelector('#operatingSystem').innerText = globalize.translate('DashboardOperatingSystem', systemInfo.OperatingSystem);
+            view.querySelector('#architecture').innerText = globalize.translate('DashboardArchitecture', systemInfo.SystemArchitecture);
 
             if (systemInfo.CanSelfRestart) {
                 view.querySelector('#btnRestartServer').classList.remove('hide');
@@ -210,11 +211,11 @@ import confirm from '../../components/confirm/confirm';
                 view.querySelector('#btnRestartServer').classList.add('hide');
             }
 
-            view.querySelector('#cachePath').innerHTML = systemInfo.CachePath;
-            view.querySelector('#logPath').innerHTML = systemInfo.LogPath;
-            view.querySelector('#transcodePath').innerHTML = systemInfo.TranscodingTempPath;
-            view.querySelector('#metadataPath').innerHTML = systemInfo.InternalMetadataPath;
-            view.querySelector('#webPath').innerHTML = systemInfo.WebPath;
+            view.querySelector('#cachePath').innerText = systemInfo.CachePath;
+            view.querySelector('#logPath').innerText = systemInfo.LogPath;
+            view.querySelector('#transcodePath').innerText = systemInfo.TranscodingTempPath;
+            view.querySelector('#metadataPath').innerText = systemInfo.InternalMetadataPath;
+            view.querySelector('#webPath').innerText = systemInfo.WebPath;
         });
     }
 
@@ -279,8 +280,8 @@ import confirm from '../../components/confirm/confirm';
                 }
 
                 html += '<div class="sessionAppName" style="display:inline-block;">';
-                html += '<div class="sessionDeviceName">' + session.DeviceName + '</div>';
-                html += '<div class="sessionAppSecondaryText">' + DashboardPage.getAppSecondaryText(session) + '</div>';
+                html += '<div class="sessionDeviceName">' + escapeHtml(session.DeviceName) + '</div>';
+                html += '<div class="sessionAppSecondaryText">' + escapeHtml(DashboardPage.getAppSecondaryText(session)) + '</div>';
                 html += '</div>';
                 html += '</div>';
 
@@ -289,7 +290,7 @@ import confirm from '../../components/confirm/confirm';
                 html += '<div class="sessionNowPlayingInfo" data-imgsrc="' + nowPlayingName.image + '">';
                 html += nowPlayingName.html;
                 html += '</div>';
-                html += '<div class="sessionNowPlayingTime">' + DashboardPage.getSessionNowPlayingTime(session) + '</div>';
+                html += '<div class="sessionNowPlayingTime">' + escapeHtml(DashboardPage.getSessionNowPlayingTime(session)) + '</div>';
                 html += '</div>';
 
                 let percent = 100 * session?.PlayState?.PositionTicks / nowPlayingItem?.RunTimeTicks;
@@ -480,16 +481,16 @@ import confirm from '../../components/confirm/confirm';
                 };
             }
 
-            let topText = itemHelper.getDisplayName(nowPlayingItem);
+            let topText = escapeHtml(itemHelper.getDisplayName(nowPlayingItem));
             let bottomText = '';
 
             if (nowPlayingItem.Artists && nowPlayingItem.Artists.length) {
                 bottomText = topText;
-                topText = nowPlayingItem.Artists[0];
+                topText = escapeHtml(nowPlayingItem.Artists[0]);
             } else {
                 if (nowPlayingItem.SeriesName || nowPlayingItem.Album) {
                     bottomText = topText;
-                    topText = nowPlayingItem.SeriesName || nowPlayingItem.Album;
+                    topText = escapeHtml(nowPlayingItem.SeriesName || nowPlayingItem.Album);
                 } else if (nowPlayingItem.ProductionYear) {
                     bottomText = nowPlayingItem.ProductionYear;
                 }
@@ -575,9 +576,9 @@ import confirm from '../../components/confirm/confirm';
             btnSessionPlayPauseIcon.classList.remove('play_arrow', 'pause');
             btnSessionPlayPauseIcon.classList.add(session.PlayState && session.PlayState.IsPaused ? 'play_arrow' : 'pause');
 
-            row.querySelector('.sessionNowPlayingTime').innerHTML = DashboardPage.getSessionNowPlayingTime(session);
-            row.querySelector('.sessionUserName').innerHTML = DashboardPage.getUsersHtml(session);
-            row.querySelector('.sessionAppSecondaryText').innerHTML = DashboardPage.getAppSecondaryText(session);
+            row.querySelector('.sessionNowPlayingTime').innerText = DashboardPage.getSessionNowPlayingTime(session);
+            row.querySelector('.sessionUserName').innerText = DashboardPage.getUsersHtml(session);
+            row.querySelector('.sessionAppSecondaryText').innerText = DashboardPage.getAppSecondaryText(session);
             const nowPlayingName = DashboardPage.getNowPlayingName(session);
             const nowPlayingInfoElem = row.querySelector('.sessionNowPlayingInfo');
 
diff --git a/src/controllers/dashboard/devices/device.js b/src/controllers/dashboard/devices/device.js
index ab9b5a664c..607986c7f3 100644
--- a/src/controllers/dashboard/devices/device.js
+++ b/src/controllers/dashboard/devices/device.js
@@ -8,7 +8,7 @@ import Dashboard from '../../../scripts/clientUtils';
 
     function load(page, device, deviceOptions) {
         page.querySelector('#txtCustomName', page).value = deviceOptions.CustomName || '';
-        page.querySelector('.reportedName', page).innerHTML = device.Name || '';
+        page.querySelector('.reportedName', page).innerText = device.Name || '';
     }
 
     function loadData() {
diff --git a/src/controllers/dashboard/devices/devices.js b/src/controllers/dashboard/devices/devices.js
index a75eebce31..9fa75489fa 100644
--- a/src/controllers/dashboard/devices/devices.js
+++ b/src/controllers/dashboard/devices/devices.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import cardBuilder from '../../../components/cardbuilder/cardBuilder';
 import loading from '../../../components/loading/loading';
 import dom from '../../../scripts/dom';
@@ -118,15 +119,15 @@ import confirm from '../../../components/confirm/confirm';
             }
 
             deviceHtml += "<div class='cardText'>";
-            deviceHtml += device.Name;
+            deviceHtml += escapeHtml(device.Name);
             deviceHtml += '</div>';
             deviceHtml += "<div class='cardText cardText-secondary'>";
-            deviceHtml += device.AppName + ' ' + device.AppVersion;
+            deviceHtml += escapeHtml(device.AppName + ' ' + device.AppVersion);
             deviceHtml += '</div>';
             deviceHtml += "<div class='cardText cardText-secondary'>";
 
             if (device.LastUserName) {
-                deviceHtml += device.LastUserName;
+                deviceHtml += escapeHtml(device.LastUserName);
                 deviceHtml += ', ' + formatDistanceToNow(Date.parse(device.DateLastActivity), localeWithSuffix);
             }
 
diff --git a/src/controllers/dashboard/dlna/profile.js b/src/controllers/dashboard/dlna/profile.js
index 0962f7a592..00088cb6b6 100644
--- a/src/controllers/dashboard/dlna/profile.js
+++ b/src/controllers/dashboard/dlna/profile.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import loading from '../../../components/loading/loading';
 import globalize from '../../../scripts/globalize';
@@ -76,7 +77,7 @@ import toast from '../../../components/toast/toast';
         profile.CodecProfiles = profile.CodecProfiles || [];
         profile.ResponseProfiles = profile.ResponseProfiles || [];
         const usersHtml = '<option></option>' + users.map(function (u) {
-            return '<option value="' + u.Id + '">' + u.Name + '</option>';
+            return '<option value="' + u.Id + '">' + escapeHtml(u.Name) + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(profile.UserId || '');
         renderSubProfiles(page, profile);
@@ -88,8 +89,8 @@ import toast from '../../../components/toast/toast';
             let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info" aria-hidden="true"></span>';
             li += '<div class="listItemBody">';
-            li += '<h3 class="listItemBodyText">' + h.Name + ': ' + (h.Value || '') + '</h3>';
-            li += '<div class="listItemBodyText secondary">' + (h.Match || '') + '</div>';
+            li += '<h3 class="listItemBodyText">' + escapeHtml(h.Name + ': ' + (h.Value || '')) + '</h3>';
+            li += '<div class="listItemBodyText secondary">' + escapeHtml(h.Match || '') + '</div>';
             li += '</div>';
             li += '<button type="button" is="paper-icon-button-light" class="btnDeleteIdentificationHeader listItemButton" data-index="' + index + '"><span class="material-icons delete" aria-hidden="true"></span></button>';
             li += '</div>';
@@ -144,7 +145,7 @@ import toast from '../../../components/toast/toast';
             let li = '<div class="listItem">';
             li += '<span class="material-icons listItemIcon info" aria-hidden="true"></span>';
             li += '<div class="listItemBody">';
-            li += '<h3 class="listItemBodyText">' + h.Name + ' = ' + (h.Value || '') + '</h3>';
+            li += '<h3 class="listItemBodyText">' + escapeHtml(h.Name + ' = ' + (h.Value || '')) + '</h3>';
             li += '</div>';
             li += '<button type="button" is="paper-icon-button-light" class="btnDeleteXmlAttribute listItemButton" data-index="0"><span class="material-icons delete" aria-hidden="true"></span></button>';
             return li += '</div>';
@@ -186,7 +187,7 @@ import toast from '../../../components/toast/toast';
             let li = '<div class="listItem lnkEditSubProfile" data-index="' + index + '">';
             li += '<span class="material-icons listItemIcon info" aria-hidden="true"></span>';
             li += '<div class="listItemBody">';
-            li += '<h3 class="listItemBodyText">' + (h.Format || '') + '</h3>';
+            li += '<h3 class="listItemBodyText">' + escapeHtml(h.Format || '') + '</h3>';
             li += '</div>';
             li += '<button type="button" is="paper-icon-button-light" class="btnDeleteProfile listItemButton" data-index="' + index + '"><span class="material-icons delete" aria-hidden="true"></span></button>';
             li += '</div>';
diff --git a/src/controllers/dashboard/dlna/profiles.js b/src/controllers/dashboard/dlna/profiles.js
index 40e1b2ee72..63c61aa3c3 100644
--- a/src/controllers/dashboard/dlna/profiles.js
+++ b/src/controllers/dashboard/dlna/profiles.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import globalize from '../../../scripts/globalize';
 import loading from '../../../components/loading/loading';
@@ -42,7 +43,7 @@ import confirm from '../../../components/confirm/confirm';
             html += '<span class="listItemIcon material-icons live_tv" aria-hidden="true"></span>';
             html += '<div class="listItemBody two-line">';
             html += "<a is='emby-linkbutton' style='padding:0;margin:0;' data-ripple='false' class='clearLink' href='#!/dlnaprofile.html?id=" + profile.Id + "'>";
-            html += '<div>' + profile.Name + '</div>';
+            html += '<div>' + escapeHtml(profile.Name) + '</div>';
             html += '</a>';
             html += '</div>';
 
diff --git a/src/controllers/dashboard/dlna/settings.js b/src/controllers/dashboard/dlna/settings.js
index 4fa8467f36..7da0746cfe 100644
--- a/src/controllers/dashboard/dlna/settings.js
+++ b/src/controllers/dashboard/dlna/settings.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import loading from '../../../components/loading/loading';
 import libraryMenu from '../../../scripts/libraryMenu';
@@ -14,7 +15,7 @@ import Dashboard from '../../../scripts/clientUtils';
         $('#chkBlastAliveMessages', page).prop('checked', config.BlastAliveMessages);
         $('#txtBlastInterval', page).val(config.BlastAliveMessageIntervalSeconds);
         const usersHtml = users.map(function (u) {
-            return '<option value="' + u.Id + '">' + u.Name + '</option>';
+            return '<option value="' + u.Id + '">' + escapeHtml(u.Name) + '</option>';
         }).join('');
         $('#selectUser', page).html(usersHtml).val(config.DefaultUserId || '');
         loading.hide();
diff --git a/src/controllers/dashboard/library.js b/src/controllers/dashboard/library.js
index e94b9ee909..38202ccb62 100644
--- a/src/controllers/dashboard/library.js
+++ b/src/controllers/dashboard/library.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import taskButton from '../../scripts/taskbutton';
 import loading from '../../components/loading/loading';
@@ -297,7 +298,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
 
             if (virtualFolder.showNameWithIcon) {
                 html += '<div style="margin:1em 0;position:width:100%;">';
-                html += virtualFolder.Name;
+                html += escapeHtml(virtualFolder.Name);
                 html += '</div>';
             }
 
@@ -319,7 +320,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         if (virtualFolder.showNameWithIcon) {
             html += '&nbsp;';
         } else {
-            html += virtualFolder.Name;
+            html += escapeHtml(virtualFolder.Name);
         }
 
         html += '</div>';
diff --git a/src/controllers/dashboard/metadatanfo.js b/src/controllers/dashboard/metadatanfo.js
index b0af868582..e0da30b5ef 100644
--- a/src/controllers/dashboard/metadatanfo.js
+++ b/src/controllers/dashboard/metadatanfo.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import loading from '../../components/loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
@@ -10,7 +11,7 @@ import alert from '../../components/alert';
     function loadPage(page, config, users) {
         let html = '<option value="" selected="selected">' + globalize.translate('None') + '</option>';
         html += users.map(function (user) {
-            return '<option value="' + user.Id + '">' + user.Name + '</option>';
+            return '<option value="' + user.Id + '">' + escapeHtml(user.Name) + '</option>';
         }).join('');
         $('#selectUser', page).html(html).val(config.UserId || '');
         $('#selectReleaseDateFormat', page).val(config.ReleaseDateFormat);
diff --git a/src/controllers/dashboard/notifications/notification/index.js b/src/controllers/dashboard/notifications/notification/index.js
index 1bd5100c96..2b562ea073 100644
--- a/src/controllers/dashboard/notifications/notification/index.js
+++ b/src/controllers/dashboard/notifications/notification/index.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import '../../../../elements/emby-checkbox/emby-checkbox';
 import Dashboard from '../../../../scripts/clientUtils';
@@ -7,7 +8,7 @@ function fillItems(elem, items, cssClass, idPrefix, currentList, isEnabledList)
     html += items.map(function (u) {
         const isChecked = isEnabledList ? currentList.indexOf(u.Id) != -1 : currentList.indexOf(u.Id) == -1;
         const checkedHtml = isChecked ? ' checked="checked"' : '';
-        return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + u.Name + '</span></label>';
+        return '<label><input is="emby-checkbox" class="' + cssClass + '" type="checkbox" data-itemid="' + u.Id + '"' + checkedHtml + '/><span>' + escapeHtml(u.Name) + '</span></label>';
     }).join('');
     html += '</div>';
     elem.html(html).trigger('create');
@@ -37,7 +38,7 @@ function reload(page) {
             $('.monitorUsers', page).hide();
         }
 
-        $('.notificationType', page).html(typeInfo.Name || 'Unknown Notification');
+        $('.notificationType', page).html(escapeHtml(typeInfo.Name) || 'Unknown Notification');
 
         if (!notificationConfig) {
             notificationConfig = {
diff --git a/src/controllers/dashboard/users/userpasswordpage.js b/src/controllers/dashboard/users/userpasswordpage.js
index ab76ce474f..fa9c95ce20 100644
--- a/src/controllers/dashboard/users/userpasswordpage.js
+++ b/src/controllers/dashboard/users/userpasswordpage.js
@@ -13,7 +13,7 @@ import confirm from '../../../components/confirm/confirm';
         ApiClient.getUser(userid).then(function (user) {
             Dashboard.getCurrentUser().then(function (loggedInUser) {
                 libraryMenu.setTitle(user.Name);
-                page.querySelector('.username').innerHTML = user.Name;
+                page.querySelector('.username').innerText = user.Name;
                 let showPasswordSection = true;
                 let showLocalAccessSection = false;
 
diff --git a/src/controllers/itemDetails/index.js b/src/controllers/itemDetails/index.js
index 7c3856afb8..445e68aafa 100644
--- a/src/controllers/itemDetails/index.js
+++ b/src/controllers/itemDetails/index.js
@@ -1,4 +1,5 @@
 import { intervalToDuration } from 'date-fns';
+import escapeHtml from 'escape-html';
 import { appHost } from '../../components/apphost';
 import loading from '../../components/loading/loading';
 import { appRouter } from '../../components/appRouter';
@@ -211,7 +212,7 @@ function renderTrackSelections(page, instance, item, forceReload) {
     const selectedId = mediaSources[0].Id;
     select.innerHTML = mediaSources.map(function (v) {
         const selected = v.Id === selectedId ? ' selected' : '';
-        return '<option value="' + v.Id + '"' + selected + '>' + v.Name + '</option>';
+        return '<option value="' + v.Id + '"' + selected + '>' + escapeHtml(v.Name) + '</option>';
     }).join('');
 
     if (mediaSources.length > 1) {
@@ -415,7 +416,7 @@ function getArtistLinksHtml(artists, serverId, context) {
             itemType: 'MusicArtist',
             serverId: serverId
         });
-        html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + artist.Name + '</a>');
+        html.push('<a style="color:inherit;" class="button-link" is="emby-linkbutton" href="' + href + '">' + escapeHtml(artist.Name) + '</a>');
     }
 
     return html.join(' / ');
@@ -438,21 +439,21 @@ function renderName(item, container, context) {
         parentNameHtml.push(getArtistLinksHtml(item.ArtistItems, item.ServerId, context));
         parentNameLast = true;
     } else if (item.SeriesName && item.Type === 'Episode') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${item.SeriesName}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
     } else if (item.IsSeries || item.EpisodeTitle) {
-        parentNameHtml.push(item.Name);
+        parentNameHtml.push(escapeHtml(item.Name));
     }
 
     if (item.SeriesName && item.Type === 'Season') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${item.SeriesName}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeriesId}" data-serverid="${item.ServerId}" data-type="Series" data-isfolder="true">${escapeHtml(item.SeriesName)}</a>`);
     } else if (item.ParentIndexNumber != null && item.Type === 'Episode') {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeasonId}" data-serverid="${item.ServerId}" data-type="Season" data-isfolder="true">${item.SeasonName}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.SeasonId}" data-serverid="${item.ServerId}" data-type="Season" data-isfolder="true">${escapeHtml(item.SeasonName)}</a>`);
     } else if (item.ParentIndexNumber != null && item.IsSeries) {
-        parentNameHtml.push(item.SeasonName || 'S' + item.ParentIndexNumber);
+        parentNameHtml.push(escapeHtml(item.SeasonName) || 'S' + item.ParentIndexNumber);
     } else if (item.Album && item.AlbumId && (item.Type === 'MusicVideo' || item.Type === 'Audio')) {
-        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.AlbumId}" data-serverid="${item.ServerId}" data-type="MusicAlbum" data-isfolder="true">${item.Album}</a>`);
+        parentNameHtml.push(`<a style="color:inherit;" class="button-link itemAction" is="emby-linkbutton" href="#" data-action="link" data-id="${item.AlbumId}" data-serverid="${item.ServerId}" data-type="MusicAlbum" data-isfolder="true">${escapeHtml(item.Album)}</a>`);
     } else if (item.Album) {
-        parentNameHtml.push(item.Album);
+        parentNameHtml.push(escapeHtml(item.Album));
     }
 
     // FIXME: This whole section needs some refactoring, so it becames easier to scale across all form factors. See GH #1022
@@ -473,9 +474,9 @@ function renderName(item, container, context) {
         }
     }
 
-    const name = itemHelper.getDisplayName(item, {
+    const name = escapeHtml(itemHelper.getDisplayName(item, {
         includeParentInfo: false
-    });
+    }));
 
     if (html && !parentNameLast) {
         if (tvSeasonHtml) {
@@ -490,7 +491,7 @@ function renderName(item, container, context) {
     }
 
     if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-        html += '<h4 class="itemName infoText originalTitle">' + item.OriginalTitle + '</h4>';
+        html += '<h4 class="itemName infoText originalTitle">' + escapeHtml(item.OriginalTitle) + '</h4>';
     }
 
     container.innerHTML = html;
@@ -667,7 +668,7 @@ function reloadFromItem(instance, page, params, item, user) {
             location = `<a is="emby-linkbutton" class="button-link textlink" target="_blank" href="https://www.openstreetmap.org/search?query=${encodeURIComponent(location)}">${location}</a>`;
         }
         itemBirthLocation.classList.remove('hide');
-        itemBirthLocation.innerHTML = globalize.translate('BirthPlaceValue', location);
+        itemBirthLocation.innerText = globalize.translate('BirthPlaceValue', location);
     } else {
         itemBirthLocation.classList.add('hide');
     }
@@ -947,7 +948,7 @@ function renderGenres(page, item, context = inferContext(item)) {
             Id: p.Id
         }, {
             context: context
-        }) + '">' + p.Name + '</a>';
+        }) + '">' + escapeHtml(p.Name) + '</a>';
     }).join(', ');
 
     const genresLabel = page.querySelector('.genresLabel');
@@ -976,7 +977,7 @@ function renderWriter(page, item, context) {
             Id: person.Id
         }, {
             context: context
-        }) + '">' + person.Name + '</a>';
+        }) + '">' + escapeHtml(person.Name) + '</a>';
     }).join(', ');
 
     const writersLabel = page.querySelector('.writersLabel');
@@ -1005,7 +1006,7 @@ function renderDirector(page, item, context) {
             Id: person.Id
         }, {
             context: context
-        }) + '">' + person.Name + '</a>';
+        }) + '">' + escapeHtml(person.Name) + '</a>';
     }).join(', ');
 
     const directorsLabel = page.querySelector('.directorsLabel');
@@ -1058,7 +1059,7 @@ function renderTagline(page, item) {
 
     if (item.Taglines && item.Taglines.length) {
         taglineElement.classList.remove('hide');
-        taglineElement.innerHTML = item.Taglines[0];
+        taglineElement.innerText = item.Taglines[0];
     } else {
         taglineElement.classList.add('hide');
     }
@@ -1125,7 +1126,7 @@ function renderMoreFromSeason(view, item, apiClient) {
             }
 
             section.classList.remove('hide');
-            section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.SeasonName);
+            section.querySelector('h2').innerText = globalize.translate('MoreFromValue', item.SeasonName);
             const itemsContainer = section.querySelector('.itemsContainer');
             cardBuilder.buildCards(result.Items, {
                 parentContainer: section,
@@ -1184,9 +1185,9 @@ function renderMoreFromArtist(view, item, apiClient) {
             section.classList.remove('hide');
 
             if (item.Type === 'MusicArtist') {
-                section.querySelector('h2').innerHTML = globalize.translate('HeaderAppearsOn');
+                section.querySelector('h2').innerText = globalize.translate('HeaderAppearsOn');
             } else {
-                section.querySelector('h2').innerHTML = globalize.translate('MoreFromValue', item.AlbumArtists[0].Name);
+                section.querySelector('h2').innerText = globalize.translate('MoreFromValue', item.AlbumArtists[0].Name);
             }
 
             cardBuilder.buildCards(result.Items, {
@@ -1276,7 +1277,7 @@ function renderSeriesAirTime(page, item, isStatic) {
     }
     if (item.Studios.length) {
         if (isStatic) {
-            html += ' on ' + item.Studios[0].Name;
+            html += ' on ' + escapeHtml(item.Studios[0].Name);
         } else {
             const context = inferContext(item);
             const href = appRouter.getRouteUrl(item.Studios[0], {
@@ -1284,7 +1285,7 @@ function renderSeriesAirTime(page, item, isStatic) {
                 itemType: 'Studio',
                 serverId: item.ServerId
             });
-            html += ' on <a class="textlink button-link" is="emby-linkbutton" href="' + href + '">' + item.Studios[0].Name + '</a>';
+            html += ' on <a class="textlink button-link" is="emby-linkbutton" href="' + href + '">' + escapeHtml(item.Studios[0].Name) + '</a>';
         }
     }
     if (html) {
@@ -1310,7 +1311,7 @@ function renderTags(page, item) {
     }
 
     if (tagElements.length) {
-        itemTags.innerHTML = globalize.translate('TagsValue', tagElements.join(', '));
+        itemTags.innerText = globalize.translate('TagsValue', tagElements.join(', '));
         itemTags.classList.remove('hide');
     } else {
         itemTags.innerHTML = '';
diff --git a/src/controllers/movies/moviegenres.js b/src/controllers/movies/moviegenres.js
index 0bda9f3af4..62320fa3ab 100644
--- a/src/controllers/movies/moviegenres.js
+++ b/src/controllers/movies/moviegenres.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import layoutManager from '../../components/layoutManager';
 import loading from '../../components/loading/loading';
 import libraryBrowser from '../../scripts/libraryBrowser';
@@ -150,7 +151,7 @@ import '../../elements/emby-button/emby-button';
                         parentId: params.topParentId
                     }) + '" class="more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre' + item.Id + '">';
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
-                    html += item.Name;
+                    html += escapeHtml(item.Name);
                     html += '</h2>';
                     html += '<span class="material-icons hide chevron_right" aria-hidden="true"></span>';
                     html += '</a>';
diff --git a/src/controllers/movies/moviesrecommended.js b/src/controllers/movies/moviesrecommended.js
index 31b19a5a2f..b9532e3d8c 100644
--- a/src/controllers/movies/moviesrecommended.js
+++ b/src/controllers/movies/moviesrecommended.js
@@ -1,4 +1,4 @@
-
+import escapeHtml from 'escape-html';
 import { Events } from 'jellyfin-apiclient';
 import layoutManager from '../../components/layoutManager';
 import inputManager from '../../scripts/inputManager';
@@ -127,7 +127,7 @@ import Dashboard from '../../scripts/clientUtils';
         }
 
         html += '<div class="verticalSection">';
-        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + title + '</h2>';
+        html += '<h2 class="sectionTitle sectionTitle-cards padded-left">' + escapeHtml(title) + '</h2>';
         const allowBottomPadding = true;
 
         if (enableScrollX()) {
diff --git a/src/controllers/playback/video/index.js b/src/controllers/playback/video/index.js
index 32abe27275..a27e119768 100644
--- a/src/controllers/playback/video/index.js
+++ b/src/controllers/playback/video/index.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import { playbackManager } from '../../../components/playback/playbackmanager';
 import SyncPlay from '../../../components/syncPlay/core';
 import browser from '../../../scripts/browser';
@@ -1236,7 +1237,7 @@ import { appRouter } from '../../../components/appRouter';
                 html += '<img class="chapterThumb" src="' + src + '" />';
                 html += '<div class="chapterThumbTextContainer">';
                 html += '<div class="chapterThumbText chapterThumbText-dim">';
-                html += chapter.Name;
+                html += escapeHtml(chapter.Name);
                 html += '</div>';
                 html += '<h2 class="chapterThumbText">';
                 html += datetime.getDisplayRunningTime(positionTicks);
diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js
index 632267558c..3d4cc0c576 100644
--- a/src/controllers/session/selectServer/index.js
+++ b/src/controllers/session/selectServer/index.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import loading from '../../../components/loading/loading';
 import { appRouter } from '../../../components/appRouter';
 import layoutManager from '../../../components/layoutManager';
@@ -71,7 +72,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
             cardContainer += '</div>';
             cardContainer += '</div>';
             cardContainer += '<div class="cardFooter">';
-            cardContainer += '<div class="cardText cardTextCentered">' + item.name + '</div>';
+            cardContainer += '<div class="cardText cardTextCentered">' + escapeHtml(item.name) + '</div>';
             cardContainer += '</div></div></button>';
             return cardContainer;
         }).join('');
diff --git a/src/controllers/shows/tvgenres.js b/src/controllers/shows/tvgenres.js
index a14d25344a..7db974744b 100644
--- a/src/controllers/shows/tvgenres.js
+++ b/src/controllers/shows/tvgenres.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import layoutManager from '../../components/layoutManager';
 import loading from '../../components/loading/loading';
 import libraryBrowser from '../../scripts/libraryBrowser';
@@ -148,7 +149,7 @@ import '../../elements/emby-button/emby-button';
                         parentId: params.topParentId
                     }) + '" class="more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre' + item.Id + '">';
                     html += '<h2 class="sectionTitle sectionTitle-cards">';
-                    html += item.Name;
+                    html += escapeHtml(item.Name);
                     html += '</h2>';
                     html += '<span class="material-icons hide chevron_right" aria-hidden="true"></span>';
                     html += '</a>';
diff --git a/src/controllers/user/menu/index.js b/src/controllers/user/menu/index.js
index f9443c92d1..07d907d2e2 100644
--- a/src/controllers/user/menu/index.js
+++ b/src/controllers/user/menu/index.js
@@ -55,7 +55,7 @@ export default function (view, params) {
                 console.debug('Failed to get QuickConnect status');
             });
         ApiClient.getUser(userId).then(function (user) {
-            page.querySelector('.headerUsername').innerHTML = user.Name;
+            page.querySelector('.headerUsername').innerText = user.Name;
             if (user.Policy.IsAdministrator && !layoutManager.tv) {
                 page.querySelector('.adminSection').classList.remove('hide');
             }
diff --git a/src/controllers/user/profile/index.js b/src/controllers/user/profile/index.js
index 750bacab90..c6d23eb2f9 100644
--- a/src/controllers/user/profile/index.js
+++ b/src/controllers/user/profile/index.js
@@ -12,7 +12,7 @@ function reloadUser(page) {
     const userId = getParameterByName('userId');
     loading.show();
     ApiClient.getUser(userId).then(function (user) {
-        page.querySelector('.username').innerHTML = user.Name;
+        page.querySelector('.username').innerText = user.Name;
         libraryMenu.setTitle(user.Name);
 
         let imageUrl = 'assets/img/avatar.png';
diff --git a/src/elements/emby-input/emby-input.js b/src/elements/emby-input/emby-input.js
index beea22af54..f9ea23f2ea 100644
--- a/src/elements/emby-input/emby-input.js
+++ b/src/elements/emby-input/emby-input.js
@@ -45,7 +45,7 @@ import 'webcomponents.js/webcomponents-lite';
         const parentNode = this.parentNode;
         const document = this.ownerDocument;
         const label = document.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
+        label.innerText = this.getAttribute('label') || '';
         label.classList.add('inputLabel');
         label.classList.add('inputLabelUnfocused');
 
@@ -114,7 +114,7 @@ import 'webcomponents.js/webcomponents-lite';
     };
 
     EmbyInputPrototype.label = function (text) {
-        this.labelElement.innerHTML = text;
+        this.labelElement.innerText = text;
     };
 
     document.registerElement('emby-input', {
diff --git a/src/elements/emby-playstatebutton/emby-playstatebutton.js b/src/elements/emby-playstatebutton/emby-playstatebutton.js
index 43140e4ec6..63ab3fd660 100644
--- a/src/elements/emby-playstatebutton/emby-playstatebutton.js
+++ b/src/elements/emby-playstatebutton/emby-playstatebutton.js
@@ -79,7 +79,7 @@ import ServerConnections from '../../components/ServerConnections';
 
         const text = button.querySelector('.button-text');
         if (text) {
-            text.innerHTML = button.title;
+            text.innerText = button.title;
         }
     }
 
diff --git a/src/elements/emby-ratingbutton/emby-ratingbutton.js b/src/elements/emby-ratingbutton/emby-ratingbutton.js
index de42531891..dea35f36f3 100644
--- a/src/elements/emby-ratingbutton/emby-ratingbutton.js
+++ b/src/elements/emby-ratingbutton/emby-ratingbutton.js
@@ -97,7 +97,7 @@ import ServerConnections from '../../components/ServerConnections';
 
         const text = button.querySelector('.button-text');
         if (text) {
-            text.innerHTML = button.title;
+            text.innerText = button.title;
         }
     }
 
diff --git a/src/elements/emby-select/emby-select.js b/src/elements/emby-select/emby-select.js
index d1057a86ed..e069687822 100644
--- a/src/elements/emby-select/emby-select.js
+++ b/src/elements/emby-select/emby-select.js
@@ -135,7 +135,7 @@ import 'webcomponents.js/webcomponents-lite';
         this.classList.add('emby-select');
 
         const label = this.ownerDocument.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
+        label.innerText = this.getAttribute('label') || '';
         label.classList.add('selectLabel');
         label.htmlFor = this.id;
         this.parentNode?.insertBefore(label, this);
@@ -148,7 +148,7 @@ import 'webcomponents.js/webcomponents-lite';
     EmbySelectPrototype.setLabel = function (text) {
         const label = this.parentNode?.querySelector('label');
 
-        label.innerHTML = text;
+        label.innerText = text;
     };
 
     document.registerElement('emby-select', {
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 5c05a393ef..0bb20270e6 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -154,7 +154,7 @@ import '../emby-input/emby-input';
 
         if (topContainer && this.getAttribute('label')) {
             const label = this.ownerDocument.createElement('label');
-            label.innerHTML = this.getAttribute('label');
+            label.innerText = this.getAttribute('label');
             label.classList.add('sliderLabel');
             label.htmlFor = this.id;
             topContainer.insertBefore(label, topContainer.firstChild);
diff --git a/src/elements/emby-textarea/emby-textarea.js b/src/elements/emby-textarea/emby-textarea.js
index 309164ddde..27195ab2ab 100644
--- a/src/elements/emby-textarea/emby-textarea.js
+++ b/src/elements/emby-textarea/emby-textarea.js
@@ -107,7 +107,7 @@ import '../emby-input/emby-input';
 
         const parentNode = this.parentNode;
         const label = this.ownerDocument.createElement('label');
-        label.innerHTML = this.getAttribute('label') || '';
+        label.innerText = this.getAttribute('label') || '';
         label.classList.add('textareaLabel');
 
         label.htmlFor = this.id;
@@ -123,7 +123,7 @@ import '../emby-input/emby-input';
         });
 
         this.label = function (text) {
-            label.innerHTML = text;
+            label.innerText = text;
         };
 
         new autoGrow(this);
diff --git a/src/scripts/editorsidebar.js b/src/scripts/editorsidebar.js
index 2fba0fcfd4..55a90f9d04 100644
--- a/src/scripts/editorsidebar.js
+++ b/src/scripts/editorsidebar.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import 'jquery';
 import globalize from './globalize';
 import 'material-design-icons-iconfont';
@@ -62,7 +63,7 @@ import Dashboard from './clientUtils';
         if (item.LockData) {
             htmlName += '<span class="material-icons metadataSidebarIcon lock" aria-hidden="true"></span>';
         }
-        htmlName += name;
+        htmlName += escapeHtml(name);
         htmlName += '</div>';
         return htmlName;
     }
diff --git a/src/scripts/libraryMenu.js b/src/scripts/libraryMenu.js
index f709acc49c..f4051ea83c 100644
--- a/src/scripts/libraryMenu.js
+++ b/src/scripts/libraryMenu.js
@@ -1,3 +1,4 @@
+import escapeHtml from 'escape-html';
 import dom from './dom';
 import layoutManager from '../components/layoutManager';
 import inputManager from './inputManager';
@@ -558,7 +559,7 @@ import Headroom from 'headroom.js';
         }
 
         menuHtml += '<span class="navMenuOptionText">';
-        menuHtml += item.name;
+        menuHtml += escapeHtml(item.name);
         menuHtml += '</span>';
         return menuHtml + '</a>';
     }
@@ -576,7 +577,7 @@ import Headroom from 'headroom.js';
                     menuHtml += getToolsLinkHtml(item);
                 } else if (item.name) {
                     menuHtml += '<h3 class="sidebarHeader">';
-                    menuHtml += item.name;
+                    menuHtml += escapeHtml(item.name);
                     menuHtml += '</h3>';
                 }
             }
@@ -700,7 +701,7 @@ import Headroom from 'headroom.js';
 
                     return `<a is="emby-linkbutton" data-itemid="${itemId}" class="lnkMediaFolder navMenuOption" href="${getItemHref(i, i.CollectionType)}">
                                     <span class="material-icons navMenuOptionIcon ${icon}" aria-hidden="true"></span>
-                                    <span class="sectionName navMenuOptionText">${i.Name}</span>
+                                    <span class="sectionName navMenuOptionText">${escapeHtml(i.Name)}</span>
                                   </a>`;
                 }).join('');
                 libraryMenuOptions.innerHTML = html;
@@ -751,7 +752,7 @@ import Headroom from 'headroom.js';
         if (info && !info.isLocalPlayer) {
             icon.classList.add('cast_connected');
             headerCastButton.classList.add('castButton-active');
-            context.querySelector('.headerSelectedPlayer').innerHTML = info.deviceName || info.name;
+            context.querySelector('.headerSelectedPlayer').innerText = info.deviceName || info.name;
         } else {
             icon.classList.add('cast');
             headerCastButton.classList.remove('castButton-active');
@@ -973,7 +974,7 @@ import Headroom from 'headroom.js';
             pageTitleElement.classList.remove('pageTitleWithLogo');
             pageTitleElement.classList.remove('pageTitleWithDefaultLogo');
             pageTitleElement.style.backgroundImage = null;
-            pageTitleElement.innerHTML = html || '';
+            pageTitleElement.innerText = html || '';
         }
 
         document.title = title || 'Jellyfin';