add nonce property

Author: ricardo-devis-agullo

src/oc-client.js

@@ -38,6 +38,7 @@ export function createOc(oc) {
 	let renderedComponents = oc.renderedComponents;
 	let dataRenderedAttribute = "data-rendered";
 	let dataRenderingAttribute = "data-rendering";
+	let nonce = ocConf.nonce;
 	let logError = (msg) => console.log(msg);
 	let logInfo = (msg) => ocConf.debug && console.log(msg);
 	let handleFetchResponse = (response) => {
@@ -124,6 +125,9 @@ export function createOc(oc) {
 			for (let attribute of Array.from(script.attributes)) {
 				newScript.setAttribute(attribute.name, attribute.value);
 			}
+			if (nonce) {
+				newScript.setAttribute("nonce", nonce);
+			}
 			script.parentNode?.replaceChild(newScript, script);
 		}
 	};
@@ -140,6 +144,9 @@ export function createOc(oc) {
 	oc.addStylesToHead = (styles) => {
 		let style = $document.createElement("style");
 		style.textContent = styles;
+		if (nonce) {
+			style.setAttribute("nonce", nonce);
+		}
 		$document.head.appendChild(style);
 	};
 

tests/addStylesToHead.spec.js

@@ -18,4 +18,22 @@ test.describe("oc-client : addStylesToHead", () => {
 		});
 		expect(style).toEqual("body: {background: red;}");
 	});
+
+	test("should set nonce on style tag when cspNonce is provided", async ({
+		page,
+	}) => {
+		const result = await page.evaluate(() => {
+			oc.conf.cspNonce = "test-style-nonce";
+			oc.addStylesToHead("body { color: black; }");
+			const styles = document.head.querySelectorAll("style");
+			const last = styles[styles.length - 1];
+			return {
+				nonce: last.getAttribute("nonce"),
+				content: last.textContent,
+			};
+		});
+
+		expect(result.nonce).toBe("test-style-nonce");
+		expect(result.content).toBe("body { color: black; }");
+	});
 });

tests/security.spec.js

@@ -301,4 +301,43 @@ test.describe("oc-client : security and script handling", () => {
 			}
 		}
 	});
+
+	test("should set nonce on re-animated script when cspNonce is provided", async ({
+		page,
+	}) => {
+		const result = await page.evaluate(() => {
+			return new Promise((resolve) => {
+				oc.conf.cspNonce = "test-script-nonce";
+				const component = document.createElement("oc-component");
+				component.setAttribute("href", "//oc-registry.com/nonce-test/");
+				document.body.appendChild(component);
+
+				// Stub renderByHref to return HTML with a script that records its nonce
+				const originalRenderByHref = oc.renderByHref;
+				oc.renderByHref = (opts, cb) => {
+					cb(null, {
+						html: '<div>Content<script>window.nonceFromCurrentScript = document.currentScript && document.currentScript.getAttribute("nonce");</script></div>',
+						version: "1.0.0",
+						name: "nonce-test",
+						key: "nonce-key",
+					});
+				};
+
+				oc.renderNestedComponent(component, () => {
+					const script = component.querySelector("script");
+					const data = {
+						attrNonce: script?.getAttribute("nonce"),
+						currentScriptNonce: window.nonceFromCurrentScript,
+					};
+					// cleanup
+					oc.renderByHref = originalRenderByHref;
+					component.remove();
+					resolve(data);
+				});
+			});
+		});
+
+		expect(result.attrNonce).toBe("test-script-nonce");
+		expect(result.currentScriptNonce).toBe("test-script-nonce");
+	});
 });