From 8157f2719062345e3e70512d10beace743f51721 Mon Sep 17 00:00:00 2001
From: Zack Moore <zack.moore@hashicorp.com>
Date: Thu, 6 Mar 2025 16:29:19 -0500
Subject: [PATCH 1/5] working on adding cspNonce

---
 .../src/modifiers/hds-code-editor.ts          | 37 ++++++++++++++++++-
 showcase/app/components/shw/flex/index.gts    |  2 +-
 showcase/app/components/shw/grid/index.gts    |  2 +-
 .../app/components/shw/placeholder/index.gts  |  2 +-
 showcase/app/index.html                       |  1 +
 5 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/modifiers/hds-code-editor.ts b/packages/components/src/modifiers/hds-code-editor.ts
index 272b65758f7..44d164d97dd 100644
--- a/packages/components/src/modifiers/hds-code-editor.ts
+++ b/packages/components/src/modifiers/hds-code-editor.ts
@@ -39,6 +39,7 @@ export interface HdsCodeEditorSignature {
       ariaDescribedBy?: string;
       ariaLabel?: string;
       ariaLabelledBy?: string;
+      cspNonce?: string;
       hasLineWrapping?: boolean;
       language?: HdsCodeEditorLanguages;
       value?: string;
@@ -55,6 +56,27 @@ async function defineStreamLanguage(streamParser: StreamParserType<unknown>) {
   return StreamLanguage.define(streamParser);
 }
 
+function getCSPNonceFromMeta(): string | undefined {
+  const meta = document.querySelector(
+    'meta[http-equiv="Content-Security-Policy"]'
+  );
+
+  if (meta === null) {
+    return undefined;
+  }
+
+  const content = meta.getAttribute('content');
+
+  if (content === null) {
+    return undefined;
+  }
+
+  // searches for either "style-src" or "script-src" followed by anything until a token like 'nonce-<value>'
+  const match = content.match(/(?:style-src|script-src)[^;]*'nonce-([^']+)'/);
+
+  return match ? match[1] : undefined;
+}
+
 const LOADER_HEIGHT = '164px';
 
 const LANGUAGES: Record<
@@ -276,7 +298,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
 
   private _buildExtensionsTask = task(
     { drop: true },
-    async ({ language, hasLineWrapping }) => {
+    async ({ cspNonce, language, hasLineWrapping }) => {
       const [
         {
           keymap,
@@ -337,6 +359,13 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         extensions = [languageExtension, ...extensions];
       }
 
+      // add nonce to the editor view if it exists
+      const nonce = cspNonce ?? getCSPNonceFromMeta();
+
+      if (nonce !== undefined) {
+        extensions = [...extensions, EditorView.cspNonce.of(nonce)];
+      }
+
       return extensions;
     }
   );
@@ -346,18 +375,20 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
     async (
       element: HTMLElement,
       {
+        cspNonce,
         language,
         value,
         hasLineWrapping,
       }: Pick<
         HdsCodeEditorSignature['Args']['Named'],
-        'language' | 'value' | 'hasLineWrapping'
+        'cspNonce' | 'language' | 'value' | 'hasLineWrapping'
       >
     ) => {
       try {
         const { EditorState } = await import('@codemirror/state');
 
         const extensions = await this._buildExtensionsTask.perform({
+          cspNonce,
           language,
           hasLineWrapping: hasLineWrapping ?? false,
         });
@@ -395,6 +426,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
         ariaDescribedBy,
         ariaLabel,
         ariaLabelledBy,
+        cspNonce,
         hasLineWrapping,
         language,
         value,
@@ -406,6 +438,7 @@ export default class HdsCodeEditorModifier extends Modifier<HdsCodeEditorSignatu
       this.element = element;
 
       const editor = await this._createEditorTask.perform(element, {
+        cspNonce,
         language,
         value,
         hasLineWrapping,
diff --git a/showcase/app/components/shw/flex/index.gts b/showcase/app/components/shw/flex/index.gts
index 7839ec2f372..0b8a5222f16 100644
--- a/showcase/app/components/shw/flex/index.gts
+++ b/showcase/app/components/shw/flex/index.gts
@@ -55,7 +55,7 @@ export default class ShwFlex extends Component<ShwFlexSignature> {
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
       {{yield (hash Label=ShwLabel)}}
-      <div class="shw-flex__items" style={{this.itemsStyle}} ...attributes>
+      <div class="shw-flex__items" ...attributes>
         {{yield (hash Item=ShwFlexItem)}}
       </div>
     </div>
diff --git a/showcase/app/components/shw/grid/index.gts b/showcase/app/components/shw/grid/index.gts
index be627d411f0..fd07f9809cc 100644
--- a/showcase/app/components/shw/grid/index.gts
+++ b/showcase/app/components/shw/grid/index.gts
@@ -65,7 +65,7 @@ export default class ShwGrid extends Component<ShwGridSignature> {
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
       {{yield (hash Label=ShwLabel)}}
-      <div class="shw-grid__items" style={{this.itemsStyle}} ...attributes>
+      <div class="shw-grid__items" ...attributes>
         {{yield (hash Item=ShwGridItem)}}
       </div>
     </div>
diff --git a/showcase/app/components/shw/placeholder/index.gts b/showcase/app/components/shw/placeholder/index.gts
index 5518d0ab80d..c4a1f0f9246 100644
--- a/showcase/app/components/shw/placeholder/index.gts
+++ b/showcase/app/components/shw/placeholder/index.gts
@@ -80,7 +80,7 @@ export default class ShwPlaceholder extends Component<ShwPlaceholderSignature> {
   }
 
   <template>
-    <div class="shw-placeholder" style={{this.style}} ...attributes>
+    <div class="shw-placeholder" ...attributes>
       {{#if @text}}
         {{@text}}
       {{else}}
diff --git a/showcase/app/index.html b/showcase/app/index.html
index 1d0faeb19b4..f33d16f7b52 100644
--- a/showcase/app/index.html
+++ b/showcase/app/index.html
@@ -12,6 +12,7 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="google-site-verification" content="_aU7ePXLFbs8nz644U2Nv1mpq2OiKnXCrwaDgZFTo-4">
+    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-abc123';">
 
     {{content-for "head"}}
 

From 1864c42f44464d9cf2e220198e2d240e5eea9f6b Mon Sep 17 00:00:00 2001
From: Zack Moore <zack.moore@hashicorp.com>
Date: Fri, 7 Mar 2025 17:57:04 -0500
Subject: [PATCH 2/5] reverting inline style removal

---
 showcase/app/components/shw/flex/index.gts        | 2 +-
 showcase/app/components/shw/grid/index.gts        | 2 +-
 showcase/app/components/shw/placeholder/index.gts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/showcase/app/components/shw/flex/index.gts b/showcase/app/components/shw/flex/index.gts
index 0b8a5222f16..7839ec2f372 100644
--- a/showcase/app/components/shw/flex/index.gts
+++ b/showcase/app/components/shw/flex/index.gts
@@ -55,7 +55,7 @@ export default class ShwFlex extends Component<ShwFlexSignature> {
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
       {{yield (hash Label=ShwLabel)}}
-      <div class="shw-flex__items" ...attributes>
+      <div class="shw-flex__items" style={{this.itemsStyle}} ...attributes>
         {{yield (hash Item=ShwFlexItem)}}
       </div>
     </div>
diff --git a/showcase/app/components/shw/grid/index.gts b/showcase/app/components/shw/grid/index.gts
index fd07f9809cc..be627d411f0 100644
--- a/showcase/app/components/shw/grid/index.gts
+++ b/showcase/app/components/shw/grid/index.gts
@@ -65,7 +65,7 @@ export default class ShwGrid extends Component<ShwGridSignature> {
         <ShwLabel>{{@label}}</ShwLabel>
       {{/if}}
       {{yield (hash Label=ShwLabel)}}
-      <div class="shw-grid__items" ...attributes>
+      <div class="shw-grid__items" style={{this.itemsStyle}} ...attributes>
         {{yield (hash Item=ShwGridItem)}}
       </div>
     </div>
diff --git a/showcase/app/components/shw/placeholder/index.gts b/showcase/app/components/shw/placeholder/index.gts
index c4a1f0f9246..5518d0ab80d 100644
--- a/showcase/app/components/shw/placeholder/index.gts
+++ b/showcase/app/components/shw/placeholder/index.gts
@@ -80,7 +80,7 @@ export default class ShwPlaceholder extends Component<ShwPlaceholderSignature> {
   }
 
   <template>
-    <div class="shw-placeholder" ...attributes>
+    <div class="shw-placeholder" style={{this.style}} ...attributes>
       {{#if @text}}
         {{@text}}
       {{else}}

From 4180c7adca6df3fa0ee2ee5db4c26ac8bd9c7022 Mon Sep 17 00:00:00 2001
From: Zack Moore <zack.moore@hashicorp.com>
Date: Fri, 7 Mar 2025 18:00:31 -0500
Subject: [PATCH 3/5] updated changeset

---
 .changeset/lucky-panthers-joke.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/lucky-panthers-joke.md

diff --git a/.changeset/lucky-panthers-joke.md b/.changeset/lucky-panthers-joke.md
new file mode 100644
index 00000000000..75b24ee0f32
--- /dev/null
+++ b/.changeset/lucky-panthers-joke.md
@@ -0,0 +1,7 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`hds-code-editor` modifier - Add `cspNonce` argument and automatice nonce detection
+
+`CodeEditor` - Add `cspNonce` argument and automatice nonce detection

From fdf2d41240bca356d0ba526e9d0cb328cda6723b Mon Sep 17 00:00:00 2001
From: Zack Moore <zack.moore@hashicorp.com>
Date: Fri, 7 Mar 2025 18:21:09 -0500
Subject: [PATCH 4/5] adding test

---
 .../src/modifiers/hds-code-editor.ts          |  2 +-
 showcase/app/index.html                       |  1 -
 .../unit/modifiers/hds-code-editor-test.js    | 99 +++++++++++++++++++
 3 files changed, 100 insertions(+), 2 deletions(-)
 create mode 100644 showcase/tests/unit/modifiers/hds-code-editor-test.js

diff --git a/packages/components/src/modifiers/hds-code-editor.ts b/packages/components/src/modifiers/hds-code-editor.ts
index 44d164d97dd..45f6d8c923f 100644
--- a/packages/components/src/modifiers/hds-code-editor.ts
+++ b/packages/components/src/modifiers/hds-code-editor.ts
@@ -56,7 +56,7 @@ async function defineStreamLanguage(streamParser: StreamParserType<unknown>) {
   return StreamLanguage.define(streamParser);
 }
 
-function getCSPNonceFromMeta(): string | undefined {
+export function getCSPNonceFromMeta(): string | undefined {
   const meta = document.querySelector(
     'meta[http-equiv="Content-Security-Policy"]'
   );
diff --git a/showcase/app/index.html b/showcase/app/index.html
index f33d16f7b52..1d0faeb19b4 100644
--- a/showcase/app/index.html
+++ b/showcase/app/index.html
@@ -12,7 +12,6 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
     <meta name="google-site-verification" content="_aU7ePXLFbs8nz644U2Nv1mpq2OiKnXCrwaDgZFTo-4">
-    <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'nonce-abc123';">
 
     {{content-for "head"}}
 
diff --git a/showcase/tests/unit/modifiers/hds-code-editor-test.js b/showcase/tests/unit/modifiers/hds-code-editor-test.js
new file mode 100644
index 00000000000..f915e4d6a0b
--- /dev/null
+++ b/showcase/tests/unit/modifiers/hds-code-editor-test.js
@@ -0,0 +1,99 @@
+import { module, test } from 'qunit';
+
+import { getCSPNonceFromMeta } from '@hashicorp/design-system-components/modifiers/hds-code-editor';
+
+module('Unit | Helper | hds-code-editor', function (hooks) {
+  hooks.afterEach(() => {
+    const meta = document.querySelector(
+      'meta[http-equiv="Content-Security-Policy"]'
+    );
+
+    if (meta) {
+      meta.parentNode.removeChild(meta);
+    }
+  });
+
+  test('returns undefined when no meta tag is present', function (assert) {
+    const existing = document.querySelector(
+      'meta[http-equiv="Content-Security-Policy"]'
+    );
+
+    if (existing) {
+      existing.parentNode.removeChild(existing);
+    }
+
+    assert.strictEqual(
+      getCSPNonceFromMeta(),
+      undefined,
+      'Should return undefined if no meta tag is found'
+    );
+  });
+
+  test('returns undefined when meta tag is present without a content attribute', function (assert) {
+    const meta = document.createElement('meta');
+
+    meta.setAttribute('http-equiv', 'Content-Security-Policy');
+
+    document.head.appendChild(meta);
+
+    assert.strictEqual(
+      getCSPNonceFromMeta(),
+      undefined,
+      'Should return undefined if content attribute is missing'
+    );
+  });
+
+  test('extracts nonce from a meta tag with a style-src directive', function (assert) {
+    const meta = document.createElement('meta');
+
+    meta.setAttribute('http-equiv', 'Content-Security-Policy');
+    meta.setAttribute(
+      'content',
+      "default-src 'none'; style-src 'nonce-ABC123';"
+    );
+
+    document.head.appendChild(meta);
+
+    assert.strictEqual(
+      getCSPNonceFromMeta(),
+      'ABC123',
+      'Should extract nonce "ABC123" from style-src directive'
+    );
+  });
+
+  test('extracts nonce from a meta tag with a script-src directive', function (assert) {
+    const meta = document.createElement('meta');
+
+    meta.setAttribute('http-equiv', 'Content-Security-Policy');
+    meta.setAttribute(
+      'content',
+      "default-src 'none'; script-src 'nonce-XYZ789';"
+    );
+
+    document.head.appendChild(meta);
+
+    assert.strictEqual(
+      getCSPNonceFromMeta(),
+      'XYZ789',
+      'Should extract nonce "XYZ789" from script-src directive'
+    );
+  });
+
+  test('returns undefined if nonce is not present in the meta content', function (assert) {
+    const meta = document.createElement('meta');
+
+    meta.setAttribute('http-equiv', 'Content-Security-Policy');
+    meta.setAttribute(
+      'content',
+      "default-src 'none'; style-src 'unsafe-inline';"
+    );
+
+    document.head.appendChild(meta);
+
+    assert.strictEqual(
+      getCSPNonceFromMeta(),
+      undefined,
+      'Should return undefined if nonce is not present'
+    );
+  });
+});

From a08a917d5ae8552110f2907c6fc95cc395214420 Mon Sep 17 00:00:00 2001
From: Zack Moore <zack.moore@hashicorp.com>
Date: Fri, 7 Mar 2025 21:26:45 -0500
Subject: [PATCH 5/5] updated docs

---
 .../docs/components/code-editor/partials/code/component-api.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/website/docs/components/code-editor/partials/code/component-api.md b/website/docs/components/code-editor/partials/code/component-api.md
index 181ba8c27d6..f2a52971f4f 100644
--- a/website/docs/components/code-editor/partials/code/component-api.md
+++ b/website/docs/components/code-editor/partials/code/component-api.md
@@ -26,6 +26,9 @@ This component uses [CodeMirror 6](https://codemirror.net/) under the hood.
   <C.Property @name="copyButtonText" @type="string" @default="'Copy'">
     Override this value to provide a meaningful `aria-label` for the [`Copy::Button`](/components/copy/button) component.
   </C.Property>
+  <C.Property @name="cspNonce" @type="string">
+    Provides a Content Security Policy nonce to use when creating the style sheets for the editor. If none is provided, the editor will attempt to extract a nonce from the Content Security Policy.
+  </C.Property>
   <C.Property @name="hasFullScreenButton" @type="boolean" @default="false">
     Used to control whether a toggle button for toggling full-screen mode will be displayed.
   </C.Property>