feat: support out.global.cspNonce for script tags

BREAKING CHANGE: Marko 4.18.47 or higher is now required.
marko-js · Feb 20, 2020 · 8b55a74 · 8b55a74
1 parent b5d5cc3
commit 8b55a74
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
   ],
   "license": "MIT",
   "peerDependencies": {
-    "marko": "^4",
+    "marko": "^4.18.47",
     "webpack": "^4"
   },
   "repository": {

diff --git a/src/__tests__/fixtures/basic-template-plugin/__snapshots__/server--main.js b/src/__tests__/fixtures/basic-template-plugin/__snapshots__/server--main.js
@@ -92,23 +92,23 @@ var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */
 
 function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(`<script>window.$mwp=${JSON.stringify(__webpack_require__.p)}`)
+    this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
 
     if (assets.js) {
-      this.write(
-        `;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,${
+      const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
+      this.script(
+        `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
           JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
         })`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(

diff --git a/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/server--main.js b/src/__tests__/fixtures/multiple-entries-plugin/__snapshots__/server--main.js
@@ -81,23 +81,23 @@ var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */
 
 function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(`<script>window.$mwp=${JSON.stringify(__webpack_require__.p)}`)
+    this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
 
     if (assets.js) {
-      this.write(
-        `;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,${
+      const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
+      this.script(
+        `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
           JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
         })`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(
@@ -258,23 +258,23 @@ var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */
 
 function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(`<script>window.$mwp=${JSON.stringify(__webpack_require__.p)}`)
+    this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
 
     if (assets.js) {
-      this.write(
-        `;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,${
+      const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
+      this.script(
+        `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
           JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
         })`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(

diff --git a/...tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js b/...tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js
@@ -152,23 +152,23 @@ var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */
 
 function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(`<script>window.$mwp=${JSON.stringify(__webpack_require__.p)}`)
+    this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
 
     if (assets.js) {
-      this.write(
-        `;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,${
+      const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
+      this.script(
+        `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
           JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
         })`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(

diff --git a/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/server--main.js b/src/__tests__/fixtures/with-class-component-plugin/__snapshots__/server--main.js
@@ -148,23 +148,23 @@ var marko_template = module.exports = __webpack_require__(/*! marko/dist/html */
 
 function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(`<script>window.$mwp=${JSON.stringify(__webpack_require__.p)}`)
+    this.script(`$mwp=${JSON.stringify(__webpack_require__.p)}`);
 
     if (assets.js) {
-      this.write(
-        `;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,${
+      const setNonce = nonce && `.setAttribute("nonce", ${JSON.stringify(nonce)})`;
+      this.script(
+        `(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;${setNonce ? `g${setNonce};` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,${setNonce ? `a${setNonce},` : ""}b.head.appendChild(a))})})(document,${
           JSON.stringify(assets.js.map(js => __webpack_require__.p+js))
         })`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(

diff --git a/src/__tests__/util/compilation.ts b/src/__tests__/util/compilation.ts
@@ -3,6 +3,9 @@ import webpack from "webpack";
 import MemoryFS from "memory-fs";
 import { promisify } from "util";
 
+// We import the loader so that jest can track which tests are related to it (all of them :p).
+import "../../loader";
+
 export default async function compile(config: webpack.Configuration) {
   const compiler = webpack(extendConfig(config));
   const outputFS = (compiler.outputFileSystem = new MemoryFS());

diff --git a/src/loader/get-asset-code.ts b/src/loader/get-asset-code.ts
@@ -10,23 +10,23 @@ import { getBundleName, entries } from ${JSON.stringify(
 
 static function renderAssets() {
   const assets = this.___assets;
+  const nonce = this.global.cspNonce;
   this.___renderAssets = this.___assets = undefined;
   this.flush = this.___flush;
   this.end = this.___end;
 
   if (assets) {
-    this.write(\`<script>window.$mwp=\${JSON.stringify(__webpack_public_path__)}\`)
+    this.script(\`$mwp=\${JSON.stringify(__webpack_public_path__)}\`);
 
     if (assets.js) {
-      this.write(
-        \`;(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,b.head.appendChild(a))})})(document,\${
+      const setNonce = nonce && \`.setAttribute("nonce", \${JSON.stringify(nonce)})\`;
+      this.script(
+        \`(function(b,h){var e=[],c=0;h.forEach(function(d,f){var a=b.createElement("link");a.relList&&a.relList.supports&&a.relList.supports("preload")?(a.href=d,a.rel="preload",a.as="script",a.addEventListener("load",function(){e[f]=d;if(c===f)for(var a;a=e[c];c++){var g=b.createElement("script");g.src=a;\${setNonce ? \`g\${setNonce};\` : ""}b.head.appendChild(g)}}),b.head.appendChild(a)):(a=b.createElement("script"),a.src=d,a.defer=!0,\${setNonce ? \`a\${setNonce},\` : ""}b.head.appendChild(a))})})(document,\${
           JSON.stringify(assets.js.map(js => __webpack_public_path__+js))
         })\`
       );
     }
 
-    this.write("</script>")
-
     if (assets.css) {
       assets.css.forEach(css => {
         this.write(