use trusted types where possible (#1011)

* use trusted types where possible

* linting

* add support for trusted types

* remove from module scope

---------

Co-authored-by: Shane Osbourne <sosbourne@duckduckgo.com>

src/dom-utils.js

@@ -81,3 +81,16 @@ function decodeHtml (html) {
     txt.innerHTML = html
     return txt.value
 }
+
+/**
+ * Use a policy if trustedTypes is available
+ * @return {{createHTML: (s: string) => any}}
+ */
+export function createPolicy () {
+    if (globalThis.trustedTypes) {
+        return globalThis.trustedTypes?.createPolicy?.('ddg-default', { createHTML: (s) => s })
+    }
+    return {
+        createHTML: (s) => s
+    }
+}

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

@@ -3,13 +3,15 @@ import dax from '../assets/dax.svg'
 import { overlayCopyVariants } from '../text.js'
 import { appendImageAsBackground } from '../util.js'
 import { VideoOverlay } from '../video-overlay.js'
-import { html, trustedUnsafe } from '../../../dom-utils.js'
+import { createPolicy, html, trustedUnsafe } from '../../../dom-utils.js'
 
 /**
  * The custom element that we use to present our UI elements
  * over the YouTube player
  */
 export class DDGVideoOverlay extends HTMLElement {
+    policy = createPolicy()
+
     static CUSTOM_TAG_NAME = 'ddg-video-overlay'
     /**
      * @param {object} options
@@ -60,7 +62,7 @@ export class DDGVideoOverlay extends HTMLElement {
         const overlayElement = document.createElement('div')
         overlayElement.classList.add('ddg-video-player-overlay')
         const svgIcon = trustedUnsafe(dax)
-        overlayElement.innerHTML = html`
+        const safeString = html`
             <div class="ddg-vpo-bg"></div>
             <div class="ddg-vpo-content">
                 <div class="ddg-eyeball">${svgIcon}</div>
@@ -79,6 +81,9 @@ export class DDGVideoOverlay extends HTMLElement {
                 </div>
             </div>
             `.toString()
+
+        overlayElement.innerHTML = this.policy.createHTML(safeString)
+
         /**
          * Set the link
          * @type {string}

src/features/duckplayer/icon-overlay.js

@@ -2,10 +2,11 @@ import css from './assets/styles.css'
 import { SideEffects, VideoParams } from './util.js'
 import dax from './assets/dax.svg'
 import { i18n } from './text.js'
-import { html, trustedUnsafe } from '../../dom-utils.js'
+import { createPolicy, html, trustedUnsafe } from '../../dom-utils.js'
 
 export class IconOverlay {
     sideEffects = new SideEffects()
+    policy = createPolicy()
 
     /** @type {HTMLElement | null} */
     element = null
@@ -36,7 +37,7 @@ export class IconOverlay {
         overlayElement.setAttribute('class', 'ddg-overlay' + (extraClass ? ' ' + extraClass : ''))
         overlayElement.setAttribute('data-size', size)
         const svgIcon = trustedUnsafe(dax)
-        overlayElement.innerHTML = html`
+        const safeString = html`
                 <a class="ddg-play-privately" href="#">
                     <div class="ddg-dax">
                     ${svgIcon}
@@ -48,6 +49,8 @@ export class IconOverlay {
                     </div>
                 </a>`.toString()
 
+        overlayElement.innerHTML = this.policy.createHTML(safeString)
+
         overlayElement.querySelector('a.ddg-play-privately')?.setAttribute('href', href)
         return overlayElement
     }