feat(csp): add support for csp nonce to inline style (#68)

justinribeiro · Jul 21, 2022 · b255b5d · b255b5d
1 parent 4ed2a51
commit b255b5d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/lite-youtube.ts b/lite-youtube.ts
@@ -111,8 +111,12 @@ export class LiteYTEmbed extends HTMLElement {
    */
   private setupDom(): void {
     const shadowDom = this.attachShadow({ mode: 'open' });
+    let nonce = '';
+    if (window.liteYouTubeNonce) {
+      nonce = `nonce="${window.liteYouTubeNonce}"`;
+    }
     shadowDom.innerHTML = `
-      <style>
+      <style ${nonce}>
         :host {
           contain: content;
           display: block;
@@ -446,4 +450,7 @@ declare global {
   interface HTMLElementTagNameMap {
     'lite-youtube': LiteYTEmbed;
   }
+  interface Window {
+    liteYouTubeNonce: string;
+  }
 }
diff --git a/test/lite-youtube.test.ts b/test/lite-youtube.test.ts
@@ -166,6 +166,16 @@ describe('<lite-youtube>', () => {
     expect(el['isYouTubeShort']()).to.be.equal(true);
   });
 
+  it('check for nonce injector', async () => {
+    window.liteYouTubeNonce = 'test-abcd1234';
+    const el = await fixture<LiteYTEmbed>(
+      html`<lite-youtube videoid="guJLfqTFfIw"></lite-youtube>`
+    );
+    expect(
+      el.shadowRoot.querySelector('style')?.getAttribute('nonce')
+    ).to.equal(window.liteYouTubeNonce);
+  });
+
   it('is valid A11y via aXe', async () => {
     const el = await fixture<LiteYTEmbed>(baseTemplate);
     await expect(el).shadowDom.to.be.accessible();