add csp trusted types policy

keithamus · keithamus · commit cb00190cd932 · 2023-04-21T14:52:18.000+01:00
diff --git a/README.md b/README.md
@@ -120,6 +120,65 @@ completer.addEventListener('auto-complete-change', function(event) {
 })
 ```
 
+### CSP Trusted Types
+
+You can call
+`setCSPTrustedTypesPolicy(policy: TrustedTypePolicy | Promise<TrustedTypePolicy> | null)`
+from JavaScript to set a
+[CSP trusted types policy](https://web.dev/trusted-types/), which can perform
+(synchronous) filtering or rejection of the `fetch` response before it is
+inserted into the page:
+
+```ts
+import AutoCompleteElement from 'auto-complete-element'
+import DOMPurify from 'dompurify' // Using https://github.com/cure53/DOMPurify
+
+// This policy removes all HTML markup except links.
+const policy = trustedTypes.createPolicy('links-only', {
+  createHTML: (htmlText: string) => {
+    return DOMPurify.sanitize(htmlText, {
+      ALLOWED_TAGS: ['a'],
+      ALLOWED_ATTR: ['href'],
+      RETURN_TRUSTED_TYPE: true
+    })
+  }
+})
+AutoCompleteElement.setCSPTrustedTypesPolicy(policy)
+```
+
+The policy has access to the `fetch` response object. Due to platform
+constraints, only synchronous information from the response (in addition to the
+HTML text body) can be used in the policy:
+
+```ts
+import AutoCompleteElement from 'auto-complete-element'
+
+const policy = trustedTypes.createPolicy('require-server-header', {
+  createHTML: (htmlText: string, response: Response) => {
+    if (response.headers.get('X-Server-Sanitized') !== 'sanitized=true') {
+      // Note: this will reject the contents, but the error may be caught before it shows in the JS console.
+      throw new Error('Rejecting HTML that was not marked by the server as sanitized.')
+    }
+    return htmlText
+  }
+})
+AutoCompleteElement.setCSPTrustedTypesPolicy(policy)
+```
+
+Note that:
+
+- Only a single policy can be set, shared by all `AutoCompleteElement` fetches.
+- You should call `setCSPTrustedTypesPolicy()` ahead of any other load of
+  `auto-complete` element in your code.
+  - If your policy itself requires asynchronous work to construct, you can also
+    pass a `Promise<TrustedTypePolicy>`.
+  - Pass `null` to remove the policy.
+- Not all browsers
+  [support the trusted types API in JavaScript](https://caniuse.com/mdn-api_trustedtypes).
+  You may want to use the
+  [recommended tinyfill](https://github.com/w3c/trusted-types#tinyfill) to
+  construct a policy without causing issues in other browsers.
+
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].
diff --git a/src/auto-complete-element.ts b/src/auto-complete-element.ts
@@ -1,11 +1,27 @@
 import Autocomplete from './autocomplete.js'
 import AutocompleteEvent from './auto-complete-event.js'
-import {fragment} from './send.js'
 
 const state = new WeakMap()
 
+export interface CSPTrustedTypesPolicy {
+  createHTML: (s: string, response: Response) => CSPTrustedHTMLToStringable
+}
+
+// Note: basically every object (and some primitives) in JS satisfy this
+// `CSPTrustedHTMLToStringable` interface, but this is the most compatible shape
+// we can use.
+interface CSPTrustedHTMLToStringable {
+  toString: () => string
+}
+
+let cspTrustedTypesPolicyPromise: Promise<CSPTrustedTypesPolicy> | null = null
+
 // eslint-disable-next-line custom-elements/file-name-matches-element
 export default class AutocompleteElement extends HTMLElement {
+  static setCSPTrustedTypesPolicy(policy: CSPTrustedTypesPolicy | Promise<CSPTrustedTypesPolicy> | null): void {
+    cspTrustedTypesPolicyPromise = policy === null ? policy : Promise.resolve(policy)
+  }
+
   #forElement: HTMLElement | null = null
   get forElement(): HTMLElement | null {
     if (this.#forElement?.isConnected) {
@@ -87,6 +103,7 @@ export default class AutocompleteElement extends HTMLElement {
     }
   }
 
+  // HEAD
   get fetchOnEmpty(): boolean {
     return this.hasAttribute('fetch-on-empty')
   }
@@ -96,7 +113,27 @@ export default class AutocompleteElement extends HTMLElement {
   }
 
   fetchResult = fragment
-
+  //
+  #requestController?: AbortController
+  async fetchResult(url: URL): Promise<string | CSPTrustedHTMLToStringable> {
+    this.#requestController?.abort()
+    const {signal} = (this.#requestController = new AbortController())
+    const res = await fetch(url.toString(), {
+      signal,
+      headers: {
+        Accept: 'text/fragment+html',
+      },
+    })
+    if (!res.ok) {
+      throw new Error(await res.text())
+    }
+    if (cspTrustedTypesPolicyPromise) {
+      const cspTrustedTypesPolicy = await cspTrustedTypesPolicyPromise
+      return cspTrustedTypesPolicy.createHTML(await res.text(), res)
+    }
+    return await res.text()
+  }
+  //f21528e (add csp trusted types policy)
   static get observedAttributes(): string[] {
     return ['open', 'value', 'for']
   }
@@ -122,8 +159,8 @@ export default class AutocompleteElement extends HTMLElement {
         this.dispatchEvent(
           new AutocompleteEvent('auto-complete-change', {
             bubbles: true,
-            relatedTarget: autocomplete.input
-          })
+            relatedTarget: autocomplete.input,
+          }),
         )
         break
     }
diff --git a/src/autocomplete.ts b/src/autocomplete.ts
@@ -202,10 +202,10 @@ export default class Autocomplete {
 
     this.container.dispatchEvent(new CustomEvent('loadstart'))
     this.container
-      .fetchResult(this.input, url.toString())
+      .fetchResult(url)
       .then(html => {
         // eslint-disable-next-line github/no-inner-html
-        this.results.innerHTML = html
+        this.results.innerHTML = html as string
         this.identifyOptions()
         const allNewOptions = this.results.querySelectorAll('[role="option"]')
         const hasResults = !!allNewOptions.length
diff --git a/src/send.ts b/src/send.ts
diff --git a/test/test.js b/test/test.js
@@ -67,7 +67,7 @@ describe('auto-complete element', function () {
           value = event.target.value
           relatedTarget = event.relatedTarget
         },
-        {once: true}
+        {once: true},
       )
 
       assert.isTrue(keydown(input, 'Enter'))
@@ -370,6 +370,41 @@ describe('auto-complete element', function () {
       assert.equal(5, list.children.length)
     })
   })
+
+  describe('trustedHTML', () => {
+    beforeEach(function () {
+      document.body.innerHTML = `
+        <div id="mocha-fixture">
+          <auto-complete src="/search" for="popup" data-autoselect="true">
+            <input type="text">
+            <ul id="popup"></ul>
+            <div id="popup-feedback"></div>
+          </auto-complete>
+        </div>
+      `
+    })
+
+    it('calls trusted types policy, passing response to it', async function () {
+      const calls = []
+      const html = '<li><strong>replacement</strong></li>'
+      window.AutocompleteElement.setCSPTrustedTypesPolicy({
+        createHTML(str, res) {
+          calls.push([str, res])
+          return html
+        },
+      })
+      const container = document.querySelector('auto-complete')
+      const popup = container.querySelector('#popup')
+      const input = container.querySelector('input')
+
+      triggerInput(input, 'hub')
+      await once(container, 'loadend')
+
+      assert.equal(calls.length, 1)
+      assert.equal(popup.children.length, 1)
+      assert.equal(popup.innerHTML, html)
+    })
+  })
 })
 
 function waitForElementToChange(el) {
@@ -402,15 +437,15 @@ const keyCodes = {
   ArrowUp: 38,
   Enter: 13,
   Escape: 27,
-  Tab: 9
+  Tab: 9,
 }
 
 function keydown(element, key, alt = false) {
   const e = {
     shiftKey: false,
     altKey: alt,
     ctrlKey: false,
-    metaKey: false
+    metaKey: false,
   }
 
   key = key.replace(/\b(Ctrl|Alt|Meta)\+/g, function (_, type) {
