added Template util for escaped strings

Author: Shane Osbourne

packages/special-pages/pages/duckplayer/src/js/index.js

@@ -36,6 +36,7 @@ import {
     MessagingContext, TestTransportConfig
 } from '../../../../../messaging/index.js'
 import { DuckPlayerPageMessages, UserValues } from './messages'
+import { escapeHTML } from '../../../../../../src/dom-utils'
 
 // for docs
 export { DuckPlayerPageMessages, UserValues }
@@ -107,7 +108,7 @@ const VideoPlayer = {
      * Show an error instead of the video player iframe
      */
     showVideoError: (errorMessage) => {
-        VideoPlayer.playerContainer().innerHTML = '<div class="player-error"><b>ERROR:</b> <span class="player-error-message"></span></div>'
+        VideoPlayer.playerContainer().innerHTML = escapeHTML`<div class="player-error"><b>ERROR:</b> <span class="player-error-message"></span></div>`.toString()
 
         // @ts-expect-error - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
         document.querySelector('.player-error-message').textContent = errorMessage

src/dom-utils.js

@@ -0,0 +1,57 @@
+class Template {
+    constructor (strings, values) {
+        this.values = values
+        this.strings = strings
+    }
+
+    /**
+     * Escapes any occurrences of &, ", <, > or / with XML entities.
+     *
+     * @param {string} str
+     *        The string to escape.
+     * @return {string} The escaped string.
+     */
+    escapeXML (str) {
+        const replacements = {
+            '&': '&amp;',
+            '"': '&quot;',
+            "'": '&apos;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '/': '&#x2F;'
+        }
+        return String(str).replace(/[&"'<>/]/g, m => replacements[m])
+    }
+
+    potentiallyEscape (value) {
+        if (typeof value === 'object') {
+            if (value instanceof Array) {
+                return value.map(val => this.potentiallyEscape(val)).join('')
+            }
+
+            // If we are an escaped template let join call toString on it
+            if (value instanceof Template) {
+                return value
+            }
+
+            throw new Error('Unknown object to escape')
+        }
+        return this.escapeXML(value)
+    }
+
+    toString () {
+        const result = []
+
+        for (const [i, string] of this.strings.entries()) {
+            result.push(string)
+            if (i < this.values.length) {
+                result.push(this.potentiallyEscape(this.values[i]))
+            }
+        }
+        return result.join('')
+    }
+}
+
+export function escapeHTML (strings, ...values) {
+    return new Template(strings, values)
+}

src/features/duckplayer/components/ddg-video-overlay.js

@@ -3,6 +3,7 @@ import dax from '../assets/dax.svg'
 import { i18n } from '../text.js'
 import { appendImageAsBackground } from '../util.js'
 import { VideoOverlayManager } from '../video-overlay-manager.js'
+import { escapeHTML } from '../../../dom-utils.js'
 
 /**
  * The custom element that we use to present our UI elements
@@ -54,10 +55,11 @@ export class DDGVideoOverlay extends HTMLElement {
     createOverlay () {
         const overlayElement = document.createElement('div')
         overlayElement.classList.add('ddg-video-player-overlay')
-        overlayElement.innerHTML = `
+        const svgIcon = escapeHTML([dax], [])
+        overlayElement.innerHTML = escapeHTML`
             <div class="ddg-vpo-bg"></div>
             <div class="ddg-vpo-content">
-                <div class="ddg-eyeball">${dax}</div>
+                <div class="ddg-eyeball">${svgIcon}</div>
                 <div class="ddg-vpo-title">${i18n.t('videoOverlayTitle')}</div>
                 <div class="ddg-vpo-text">${i18n.t('videoOverlaySubtitle')}</div>
                 <div class="ddg-vpo-buttons">
@@ -70,7 +72,7 @@ export class DDGVideoOverlay extends HTMLElement {
                     </label>
                 </div>
             </div>
-            `
+            `.toString()
         /**
          * Set the link
          * @type {string}

src/features/duckplayer/icon-overlay.js

@@ -2,6 +2,7 @@ import { addTrustedEventListener, appendElement, VideoParams } from './util'
 import dax from './assets/dax.svg'
 import { i18n } from './text.js'
 import { OpenInDuckPlayerMsg } from './overlay-messages.js'
+import { escapeHTML } from '../../dom-utils.js'
 
 export const IconOverlay = {
     /**
@@ -41,20 +42,20 @@ export const IconOverlay = {
 
         overlayElement.setAttribute('class', 'ddg-overlay' + (extraClass ? ' ' + extraClass : ''))
         overlayElement.setAttribute('data-size', size)
-        overlayElement.innerHTML = `
+        const svgIcon = escapeHTML([dax], [])
+        overlayElement.innerHTML = escapeHTML`
                 <a class="ddg-play-privately" href="#">
                     <div class="ddg-dax">
-                        ${dax}
+                    ${svgIcon}
                     </div>
                     <div class="ddg-play-text-container">
                         <div class="ddg-play-text">
                             ${i18n.t('playText')}
                         </div>
                     </div>
-                </a>`
+                </a>`.toString()
 
         overlayElement.querySelector('a.ddg-play-privately')?.setAttribute('href', href)
-
         overlayElement.querySelector('a.ddg-play-privately')?.addEventListener('click', (event) => {
             event.preventDefault()
             event.stopPropagation()

unit-test/dom-utils.js

@@ -0,0 +1,29 @@
+import { escapeHTML } from '../src/dom-utils.js'
+
+describe('dom-utils.js - escapedTemplate', () => {
+    const tests = [
+        { title: 'single', input: () => escapeHTML`<p>Foo</p>`, expected: '<p>Foo</p>' },
+        { title: 'siblings', input: () => escapeHTML`<p>Foo</p><p>Bar</p>`, expected: '<p>Foo</p><p>Bar</p>' },
+        { title: 'nested', input: () => escapeHTML`<div>${escapeHTML`<p>${'Nested'}</p>`}</div>`, expected: '<div><p>Nested</p></div>' },
+        {
+            title: 'loop',
+            input: () => {
+                const items = [{ value: 'foo' }, { value: 'bar' }]
+                return escapeHTML`<h1>Heading</h1>
+                    <ul>
+                        ${items.map(item => escapeHTML`<li>${item.value}</li>`)};
+                    </ul>`
+            },
+            expected: `<h1>Heading</h1>
+                    <ul>
+                        <li>foo</li><li>bar</li>;
+                    </ul>`
+        }
+    ]
+    for (const test of tests) {
+        it(`should generate ${test.title}`, () => {
+            const actual = test.input().toString()
+            expect(actual).toEqual(test.expected)
+        })
+    }
+})