From b255b5d701004769bfdca4e1b729f3e0472bd947 Mon Sep 17 00:00:00 2001
From: Justin Ribeiro <justin@justinribeiro.com>
Date: Thu, 21 Jul 2022 16:47:16 -0700
Subject: [PATCH] feat(csp): add support for csp nonce to inline style (#68)

---
 lite-youtube.ts           |  9 ++++++++-
 test/lite-youtube.test.ts | 10 ++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/lite-youtube.ts b/lite-youtube.ts
index 48b75d8..f2db6f5 100644
--- 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
index ec7263a..cb11823 100644
--- 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();