Merge pull request #513 from deckgo/postbuild-update-csp

feat(#497): prerender post build update for CSP

Author: peterpeterparker

studio/scripts/config.index.js

@@ -1,29 +1,66 @@
 #!/usr/bin/env node
 
 const fs = require('fs');
+const path = require('path');
+
+const crypto = require('crypto');
 
 const configProd = require('../config.prod');
 const configDev = require('../config.dev');
 
 const dev = process.argv && process.argv.indexOf('--dev') > -1;
 
-// https://stackoverflow.com/a/14181136/5404186
-function updateIndexHml(filename) {
-    fs.readFile(`./www/${filename}`, 'utf8', function (err, data) {
+function updateCSP(filename) {
+    fs.readFile(`${filename}`, 'utf8', function (err, data) {
         if (err) {
             return console.log(err);
         }
 
-        const result = data.replace(/<@API_URL@>/g, dev ? configDev.API_URL : configProd.API_URL);
+        // 1. Replace API Url
+        let result = data.replace(/<@API_URL@>/g, dev ? configDev.API_URL : configProd.API_URL);
+
+        // 2. Update service worker loader hash
+        const swHash = findSWHash(data);
+        if (swHash) {
+            result = result.replace(/<@SW_LOADER@>/g, swHash);
+        }
+
+        // 3. Update CSS link until https://github.com/ionic-team/stencil/issues/2039 solved
+        result = result.replace(/rel=stylesheet media="\(max-width: 0px\)" importance=low onload="this\.media=''"/g, 'rel=stylesheet importance=low');
 
-        fs.writeFile(`./www/${filename}`, result, 'utf8', function (err) {
+        fs.writeFile(`${filename}`, result, 'utf8', function (err) {
             if (err) return console.log(err);
         });
     });
 }
 
-updateIndexHml('index.html');
+function findSWHash(data) {
+    const sw = /(<.?script data-build.*?>)([\s\S]*?)(<\/script>)/gm;
+
+    let m;
+    while (m = sw.exec(data)) {
+        if (m && m.length >= 3 && m[2].indexOf('serviceWorker') > -1) {
+            return `'sha256-${crypto.createHash('sha256').update(m[2]).digest('base64')}'`;
+        }
+    }
+
+    return undefined;
+}
+
+function findHTMLFiles(dir, files) {
+    fs.readdirSync(dir).forEach(file => {
+        const fullPath = path.join(dir, file);
+        if (fs.lstatSync(fullPath).isDirectory()) {
+            findHTMLFiles(fullPath, files);
+        } else if (path.extname(fullPath) === '.html') {
+            files.push(fullPath);
+        }
+    });
+}
+
+let htmlFiles = [];
+findHTMLFiles('./www/', htmlFiles);
 
-if (!dev) {
-    updateIndexHml('index-org.html');
+for (const file of htmlFiles) {
+    updateCSP(`./${file}`);
 }

studio/src/index.html

@@ -9,8 +9,8 @@
     img-src 'self' data: https://deckdeckgo.com https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-prod.appspot.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-beta.appspot.com/ https://www.gstatic.com https://lh5.googleusercontent.com https://pbs.twimg.com https://media.giphy.com https://media.tenor.com/ https://images.unsplash.com/ https://*.githubusercontent.com/ https://*.googleusercontent.com/;
     style-src 'self' 'unsafe-inline' https://cdn.firebase.com https://fonts.googleapis.com;
     font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com;
-    script-src 'self' blob: 'sha256-vay/aAFxtYsaISRoBsVDHCbAzow9u6P2gHHTewRPaJY=' https://cdn.firebase.com https://apis.google.com https://unpkg.com/prismjs@latest/;
-    connect-src 'self' <@API_URL@> https://deckdeckgo.com/ wss://api.deckdeckgo.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-prod.appspot.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-beta.appspot.com/ https://www.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com ws://localhost:3333/ https://raw.githubusercontent.com/PrismJS https://raw.githubusercontent.com/deckgo/ https://api.tenor.com/;
+    script-src 'self' blob: <@SW_LOADER@> 'sha256-vay/aAFxtYsaISRoBsVDHCbAzow9u6P2gHHTewRPaJY=' https://cdn.firebase.com https://apis.google.com https://unpkg.com/prismjs@latest/;
+    connect-src 'self' <@API_URL@> https://deckdeckgo.com/ wss://api.deckdeckgo.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-prod.appspot.com/ https://firebasestorage.googleapis.com/v0/b/deckdeckgo-studio-beta.appspot.com/ https://www.googleapis.com https://securetoken.googleapis.com https://firestore.googleapis.com ws://localhost:3333/ https://raw.githubusercontent.com/PrismJS/ https://raw.githubusercontent.com/deckgo/ https://api.tenor.com/;
     frame-src https://deckdeckgo.com https://*.deckdeckgo.com https://deckdeckgo-studio-beta.firebaseapp.com http://localhost:3333/~dev-server https://www.youtube.com/">
 
   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">