Fixed CSP support. Apply the nonce attribute before appending the element to the head. Added a test (#613)

ndbroadbent · web-flow · commit 44334ec0824d · 2025-10-03T10:03:26.000+03:00
diff --git a/package.json b/package.json
@@ -131,7 +131,7 @@
   "typings": "./goober.d.ts",
   "filesize": {
     "./dist/goober.modern.js": {
-      "gzip": "1301B"
+      "gzip": "1300B"
     },
     "./dist/goober.cjs": {
       "gzip": "1300B"
diff --git a/src/core/__tests__/get-sheet.test.js b/src/core/__tests__/get-sheet.test.js
@@ -23,6 +23,28 @@ describe('getSheet', () => {
         expect(sheet === second).toBeTruthy();
     });
 
+    it('applies nonce from window.__nonce__', () => {
+        const sheet = getSheet();
+        const style = sheet.parentElement;
+        const prevAttr = style.getAttribute('nonce');
+        const hadAttr = style.hasAttribute('nonce');
+        const prevNonce = window.__nonce__;
+
+        style.removeAttribute('nonce');
+        delete window.__nonce__;
+
+        window.__nonce__ = 'secure-nonce';
+        getSheet();
+
+        expect(style.getAttribute('nonce')).toEqual('secure-nonce');
+
+        if (prevAttr != null) style.setAttribute('nonce', prevAttr);
+        else if (!hadAttr) style.removeAttribute('nonce');
+
+        if (prevNonce === undefined) delete window.__nonce__;
+        else window.__nonce__ = prevNonce;
+    });
+
     it('server side', () => {
         const bkp = global.document;
         delete global.document;
diff --git a/src/core/get-sheet.js b/src/core/get-sheet.js
@@ -14,11 +14,12 @@ export let getSheet = (target) => {
         // We're doing a querySelector because the <head> element doesn't implemented the getElementById api
         let el =
             (target ? target.querySelector('#' + GOOBER_ID) : window[GOOBER_ID]) ||
-            Object.assign((target || document.head).appendChild(document.createElement('style')), {
+            Object.assign(document.createElement('style'), {
                 innerHTML: ' ',
                 id: GOOBER_ID
             });
-        if (window.__nonce__) el.setAttribute('nonce', window.__nonce__);
+        el.nonce = window.__nonce__;
+        if (!el.parentNode) (target || document.head).appendChild(el);
         return el.firstChild;
     }
 
