feat: use inline JSON to enabling CSP without unsafe-inline

gregberge · Mar 10, 2019 · 05e5500 · 05e5500
1 parent f35fb3c
commit 05e5500
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/packages/component/src/loadableReady.js b/packages/component/src/loadableReady.js
@@ -12,7 +12,13 @@ export default function loadableReady(done = () => {}) {
     return Promise.resolve()
   }
 
-  const requiredChunks = BROWSER ? window[LOADABLE_REQUIRED_CHUNKS_KEY] : null
+  let requiredChunks = null
+  if (BROWSER) {
+    const dataElement = document.getElementById(LOADABLE_REQUIRED_CHUNKS_KEY)
+    if (dataElement) {
+      requiredChunks = JSON.parse(dataElement.textContent)
+    }
+  }
 
   if (!requiredChunks) {
     warn(

diff --git a/packages/server/src/ChunkExtractor.js b/packages/server/src/ChunkExtractor.js
@@ -170,7 +170,12 @@ class ChunkExtractor {
   createChunkAsset({ filename, chunk, type, linkType }) {
     return {
       filename,
-      scriptType: extensionToScriptType(path.extname(filename).split('?')[0].toLowerCase()),
+      scriptType: extensionToScriptType(
+        path
+          .extname(filename)
+          .split('?')[0]
+          .toLowerCase(),
+      ),
       chunk,
       url: this.resolvePublicUrl(filename),
       path: path.join(this.outputPath, filename),
@@ -238,13 +243,11 @@ class ChunkExtractor {
   }
 
   getRequiredChunksScriptContent() {
-    return `window.${LOADABLE_REQUIRED_CHUNKS_KEY} = ${JSON.stringify(
-      this.getChunkDependencies(this.chunks),
-    )};`
+    return JSON.stringify(this.getChunkDependencies(this.chunks))
   }
 
   getRequiredChunksScriptTag(extraProps) {
-    return `<script${extraPropsToString(
+    return `<script id="${LOADABLE_REQUIRED_CHUNKS_KEY}" type="application/json"${extraPropsToString(
       extraProps,
     )}>${this.getRequiredChunksScriptContent()}</script>`
   }
@@ -253,6 +256,8 @@ class ChunkExtractor {
     return (
       <script
         key="required"
+        id={LOADABLE_REQUIRED_CHUNKS_KEY}
+        type="application/json"
         dangerouslySetInnerHTML={{
           __html: this.getRequiredChunksScriptContent(),
         }}

diff --git a/packages/server/src/ChunkExtractor.test.js b/packages/server/src/ChunkExtractor.test.js
@@ -43,15 +43,15 @@ describe('ChunkExtrator', () => {
   describe('#getScriptTags', () => {
     it('should return main script tag without chunk', () => {
       expect(extractor.getScriptTags()).toMatchInlineSnapshot(`
-"<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [];</script>
+"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\">[]</script>
 <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
 `)
     })
 
     it('should return other chunks if referenced', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getScriptTags()).toMatchInlineSnapshot(`
-"<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];</script>
+"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\">[\\"letters-A\\"]</script>
 <script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\"></script>
 <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
 `)
@@ -60,7 +60,7 @@ describe('ChunkExtrator', () => {
     it('should allow for query params in chunk names', () => {
       extractor.addChunk('letters-E')
       expect(extractor.getScriptTags()).toMatchInlineSnapshot(`
-"<script>window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];</script>
+"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\">[\\"letters-E\\"]</script>
 <script async data-chunk=\\"letters-E\\" src=\\"/dist/node/letters-E.js?param\\"></script>
 <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\"></script>"
 `)
@@ -70,7 +70,7 @@ describe('ChunkExtrator', () => {
       extractor.addChunk('letters-A')
       expect(extractor.getScriptTags({ nonce: 'testnonce' }))
         .toMatchInlineSnapshot(`
-"<script nonce=\\"testnonce\\">window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];</script>
+"<script id=\\"__LOADABLE_REQUIRED_CHUNKS__\\" type=\\"application/json\\" nonce=\\"testnonce\\">[\\"letters-A\\"]</script>
 <script async data-chunk=\\"letters-A\\" src=\\"/dist/node/letters-A.js\\" nonce=\\"testnonce\\"></script>
 <script async data-chunk=\\"main\\" src=\\"/dist/node/main.js\\" nonce=\\"testnonce\\"></script>"
 `)
@@ -84,9 +84,11 @@ Array [
   <script
     dangerouslySetInnerHTML={
       Object {
-        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [];",
+        "__html": "[]",
       }
     }
+    id="__LOADABLE_REQUIRED_CHUNKS__"
+    type="application/json"
   />,
   <script
     async={true}
@@ -104,9 +106,11 @@ Array [
   <script
     dangerouslySetInnerHTML={
       Object {
-        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];",
+        "__html": "[\\"letters-A\\"]",
       }
     }
+    id="__LOADABLE_REQUIRED_CHUNKS__"
+    type="application/json"
   />,
   <script
     async={true}
@@ -129,9 +133,11 @@ Array [
   <script
     dangerouslySetInnerHTML={
       Object {
-        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-E\\"];",
+        "__html": "[\\"letters-E\\"]",
       }
     }
+    id="__LOADABLE_REQUIRED_CHUNKS__"
+    type="application/json"
   />,
   <script
     async={true}
@@ -155,10 +161,12 @@ Array [
   <script
     dangerouslySetInnerHTML={
       Object {
-        "__html": "window.__LOADABLE_REQUIRED_CHUNKS__ = [\\"letters-A\\"];",
+        "__html": "[\\"letters-A\\"]",
       }
     }
+    id="__LOADABLE_REQUIRED_CHUNKS__"
     nonce="testnonce"
+    type="application/json"
   />,
   <script
     async={true}