feat: 🎸 Add CSP nonce to code editors (#3230)

Co-authored-by: Zhihe Li <zhihe.li@hashicorp.com>

ui/admin/app/components/form/field/json-secret/index.hbs

@@ -27,6 +27,7 @@
       @isLintingEnabled={{true}}
       @language='json'
       @onInput={{@onInput}}
+      @cspNonce={{(csp-nonce)}}
       data-test-code-editor
     />
   {{/if}}

ui/admin/app/components/form/role/edit-grants/index.hbs

@@ -23,6 +23,7 @@
         @value={{this.grantStringsText}}
         @onInput={{this.onInput}}
         @customExtensions={{this.customExtensions}}
+        @cspNonce={{(csp-nonce)}}
         data-test-code-editor
         as |CE|
       >

ui/admin/app/components/worker-filter-generator/index.hbs

@@ -11,6 +11,7 @@
       @language='shell'
       @value={{or (get @model @name) ''}}
       @onInput={{fn this.setWorkerFilter @model @name}}
+      @cspNonce={{(csp-nonce)}}
       data-test-code-editor
     />
   </F.Control>

ui/admin/app/helpers/csp-nonce.js

@@ -0,0 +1,20 @@
+/**
+ * Copyright IBM Corp. 2021, 2026
+ * SPDX-License-Identifier: BUSL-1.1
+ */
+
+import Helper from '@ember/component/helper';
+
+/**
+ * Returns the CSP style-src nonce from the document's head metadata.
+ */
+export default class CspNonceHelper extends Helper {
+  compute() {
+    return (
+      document
+        ?.querySelector('meta[name="csp-nonce"]')
+        ?.getAttribute('content')
+        ?.trim() ?? ''
+    );
+  }
+}

ui/admin/app/index.html

@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <meta name="csp-nonce" content="__BOUNDARY_CSP_NONCE__">
     <meta charset="utf-8">
     <title>Admin</title>
     <meta name="description" content="Simple and secure remote access with HashiCorp Boundary.">