From 8b55a742aab55d091cf5bacbf659d8daf47b71a9 Mon Sep 17 00:00:00 2001
From: Dylan Piercey <dpiercey@ebay.com>
Date: Thu, 20 Feb 2020 14:44:18 -0800
Subject: [PATCH] feat: support out.global.cspNonce for script tags

BREAKING CHANGE: Marko 4.18.47 or higher is now required.
---
 package.json                                  |  2 +-
 .../__snapshots__/server--main.js             | 10 +++++-----
 .../__snapshots__/server--main.js             | 20 +++++++++----------
 .../__snapshots__/server--main.js             | 10 +++++-----
 .../__snapshots__/server--main.js             | 10 +++++-----
 src/__tests__/util/compilation.ts             |  3 +++
 src/loader/get-asset-code.ts                  | 10 +++++-----
 7 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/package.json b/package.json
index 59c7762..0bd0181 100644
--- 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
index 3e500c3..c29bfbc 100644
--- 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
index 19267ed..4df3fb2 100644
--- 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/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js b/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js
index 7823a76..160b351 100644
--- a/src/__tests__/fixtures/with-class-component-plugin-dynamic-bundle/__snapshots__/server--main.js
+++ b/src/__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
index 6015dbe..3ca870f 100644
--- 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
index 1e75d75..9b14164 100644
--- 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
index 51e69f4..93531ae 100644
--- 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(