fix(player): Fixed issue with potential XSS attack for custom elements

openplayerjs · Aug 28, 2022 · c3a73bc · c3a73bc
1 parent 9a811b9
commit c3a73bc
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 11 deletions.
diff --git a/dist/esm/controls.js b/dist/esm/controls.js
@@ -322,10 +322,9 @@ class Controls {
             Object.assign(element.style, item.styles);
         }
         if (item.type === 'button' && item.icon) {
-            const icon = /\.(jpg|png|svg|gif)$/.test(item.icon)
+            element.innerHTML = /\.(jpg|png|svg|gif)$/.test(item.icon)
                 ? `<img src="${sanitize(item.icon)}">`
                 : sanitize(item.icon);
-            element.innerHTML = icon;
         }
         else if (item.content) {
             element.innerHTML = sanitize(item.content, false);
@@ -344,7 +343,9 @@ class Controls {
             const items = item.subitems.map((s) => {
                 let itemIcon = '';
                 if (s.icon) {
-                    itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon) ? `<img src="${s.icon}">` : s.icon;
+                    itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon)
+                        ? `<img src="${sanitize(s.icon)}">`
+                        : sanitize(s.icon, false);
                 }
                 return `<div class="op-settings__menu-item" tabindex="0" ${s.title ? `title="${s.title}"` : ''} role="menuitemradio">
                     <div class="op-settings__menu-label" id="${s.id}" data-value="${item.id}-${s.id}">${itemIcon} ${s.label}</div>

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -4591,8 +4591,7 @@ var Controls = function () {
       }
 
       if (item.type === 'button' && item.icon) {
-        var icon = /\.(jpg|png|svg|gif)$/.test(item.icon) ? "<img src=\"".concat(sanitize(item.icon), "\">") : sanitize(item.icon);
-        element.innerHTML = icon;
+        element.innerHTML = /\.(jpg|png|svg|gif)$/.test(item.icon) ? "<img src=\"".concat(sanitize(item.icon), "\">") : sanitize(item.icon);
       } else if (item.content) {
         element.innerHTML = sanitize(item.content, false);
       }
@@ -4614,7 +4613,7 @@ var Controls = function () {
           var itemIcon = '';
 
           if (s.icon) {
-            itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon) ? "<img src=\"".concat(s.icon, "\">") : s.icon;
+            itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon) ? "<img src=\"".concat(sanitize(s.icon), "\">") : sanitize(s.icon, false);
           }
 
           return "<div class=\"op-settings__menu-item\" tabindex=\"0\" ".concat(s.title ? "title=\"".concat(s.title, "\"") : '', " role=\"menuitemradio\">\n                    <div class=\"op-settings__menu-label\" id=\"").concat(s.id, "\" data-value=\"").concat(item.id, "-").concat(s.id, "\">").concat(itemIcon, " ").concat(s.label, "</div>\n                </div>");

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/controls.ts b/src/js/controls.ts
@@ -379,11 +379,9 @@ class Controls implements PlayerComponent {
         }
 
         if (item.type === 'button' && item.icon) {
-            const icon = /\.(jpg|png|svg|gif)$/.test(item.icon)
+            element.innerHTML = /\.(jpg|png|svg|gif)$/.test(item.icon)
                 ? `<img src="${sanitize(item.icon)}">`
                 : sanitize(item.icon);
-
-            element.innerHTML = icon;
         } else if (item.content) {
             element.innerHTML = sanitize(item.content, false);
         }
@@ -404,7 +402,9 @@ class Controls implements PlayerComponent {
             const items = item.subitems.map((s) => {
                 let itemIcon = '';
                 if (s.icon) {
-                    itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon) ? `<img src="${s.icon}">` : s.icon;
+                    itemIcon = /\.(jpg|png|svg|gif)$/.test(s.icon)
+                        ? `<img src="${sanitize(s.icon)}">`
+                        : sanitize(s.icon, false);
                 }
                 return `<div class="op-settings__menu-item" tabindex="0" ${
                     s.title ? `title="${s.title}"` : ''