Add basic support for csp nonce

harbournick · harbournick · commit d218b25bfe15 · 2025-06-04T22:07:10.000-07:00
diff --git a/packages/superdoc/index.html b/packages/superdoc/index.html
@@ -3,6 +3,14 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="csp-nonce" content="testnonce123" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="
+        style-src 'self' 'nonce-testnonce123';
+        style-src-attr 'unsafe-inline';
+      "
+    />
     <title>SuperDoc</title>
   </head>
   <body>
diff --git a/packages/superdoc/src/core/SuperDoc.js b/packages/superdoc/src/core/SuperDoc.js
@@ -219,6 +219,9 @@ export class SuperDoc extends EventEmitter {
     // Initialize collaboration if configured
     await this.#initCollaboration(this.config.modules);
 
+    // Apply csp nonce if provided
+    if (this.config.cspNonce) this.#patchNaiveUIStyles();
+
     // this.#initTelemetry();
     this.#initVueApp();
     this.#initListeners();
@@ -259,6 +262,19 @@ export class SuperDoc extends EventEmitter {
     };
   }
 
+  #patchNaiveUIStyles() {
+    const cspNonce = this.config.cspNonce;
+
+    const originalCreateElement = document.createElement
+    document.createElement = function(tagName) {
+      const element = originalCreateElement.call(this, tagName)
+      if (tagName.toLowerCase() === 'style') {
+        element.setAttribute('nonce', cspNonce)
+      }
+      return element
+    }
+  }
+
   #initDocuments() {
     const doc = this.config.document;
     const hasDocumentConfig = !!doc && typeof doc === 'object' && Object.keys(this.config.document)?.length;
diff --git a/packages/superdoc/src/dev/components/SuperdocDev.vue b/packages/superdoc/src/dev/components/SuperdocDev.vue
@@ -77,6 +77,7 @@ const init = async () => {
     //     isNewFile: true,
     //   },
     // ],
+    cspNonce: 'testnonce123',
     modules: {
       comments: {
         // comments: sampleComments,
