Fixed CSP images issues (sick!)

Author: exdis

core/build.js

@@ -1,5 +1,8 @@
 const fs = require('fs');
 const path = require('path');
+const csstree = require('css-tree');
+const mime = require('mime');
+const crypto = require('crypto');
 const bundleJs = require('esbuild').build;
 const manifest = require('../src/manifest.js');
 
@@ -14,18 +17,6 @@ const browsers = [
     'safari'
 ];
 
-function copyFiles(src, dest) {
-    fs.mkdirSync(dest, { recursive: true });
-
-    if (fs.statSync(src).isDirectory()) {
-        fs.readdirSync(src).forEach(p =>
-            copyFiles(path.join(src, p), path.join(dest, path.basename(src)))
-        );
-    } else {
-        fs.copyFileSync(src, path.join(dest, path.basename(src)));
-    }
-}
-
 async function build(browser) {
     const outdir = path.join(__dirname, `/../build-${browser}`);
 
@@ -45,7 +36,37 @@ async function build(browser) {
         // minify: true,
         format: 'esm',
         outdir
-    }).catch(() => process.exit(1));
+    })
+        .then(() => {
+            const css = fs.readFileSync(path.join(outdir, 'index.css'), 'utf8');
+            const ast = csstree.parse(css);
+
+            csstree.walk(ast, {
+                enter(node) {
+                    if (node.type === 'Url') {
+                        const value = getValueFromStringOrRaw(node.value);
+                        const [, mimeType, content] = value.match(/^data:(.*);base64,(.*)$/);
+                        const filename = crypto
+                            .createHash('sha1')
+                            .update(content)
+                            .digest('hex') + '.' + mime.getExtension(mimeType);
+
+                        fs.writeFileSync(path.join(outdir, 'icons', filename), Buffer.from(content, 'base64'));
+
+                        node.value = {
+                            type: 'Raw',
+                            value: `icons/${filename}`
+                        };
+                    }
+                }
+            });
+
+            fs.writeFileSync(path.join(outdir, 'index.css'), csstree.generate(ast));
+        })
+        .catch((error) => {
+            console.error(error); // eslint-disable-line no-console
+            process.exit(1);
+        });
 }
 
 const buildAll = async function() {
@@ -64,3 +85,27 @@ const buildAll = async function() {
         });
     }
 })();
+
+function copyFiles(src, dest) {
+    fs.mkdirSync(dest, { recursive: true });
+
+    if (fs.statSync(src).isDirectory()) {
+        fs.readdirSync(src).forEach(p =>
+            copyFiles(path.join(src, p), path.join(dest, path.basename(src)))
+        );
+    } else {
+        fs.copyFileSync(src, path.join(dest, path.basename(src)));
+    }
+}
+
+function getValueFromStringOrRaw(node) {
+    switch (node.type) {
+        case 'String':
+            return node.value.substring(1, node.value.length - 1);
+
+        case 'Raw':
+            return node.value;
+    }
+
+    return null;
+}

package-lock.json

@@ -15,8 +15,10 @@
     "@discoveryjs/discovery": "1.0.0-beta.50",
     "@discoveryjs/json-ext": "^0.5.0",
     "babel-eslint": "^10.1.0",
+    "css-tree": "^1.1.2",
     "esbuild": "^0.8.27",
     "eslint": "^4.9.0",
-    "jszip": "^3.5.0"
+    "jszip": "^3.5.0",
+    "mime": "^2.4.7"
   }
 }

package.json

@@ -1,4 +1,4 @@
-@import '@discoveryjs/discovery/dist/discovery.raw.css';
+@import '@discoveryjs/discovery/dist/discovery.css';
 
 table, caption, th, td, tr {
     color: inherit;

safari/JsonDiscovery.xcodeproj/project.xcworkspace/xcuserdata/denis.kolesnikov.xcuserdatad/UserInterfaceState.xcuserstate

@@ -1,21 +1,21 @@
 /**
  * Discovery initialization
  * @param {Object} options
+ * @param {Object} data
  * @returns {Discovery}
  */
-export function initDiscovery(options) {
-    const { Widget, router, complexViews, utils } = require('@discoveryjs/discovery/dist/discovery.js');
+export function initDiscovery(options, data) {
+    const { Widget, router, utils } = require('@discoveryjs/discovery/dist/discovery.js');
     const settingsPage = require('../settings').default;
 
     const { settings } = options;
     const { darkmode = 'auto' } = settings;
     const discovery = new Widget(options.node, null, {
         darkmode,
-        styles: options.styles
+        styles: [{ type: 'link', data: chrome.runtime.getURL('index.css') }]
     });
 
     discovery.apply(router);
-    discovery.apply(complexViews);
 
     discovery.flashMessagesContainer = utils.createElement('div', 'flash-messages-container');
     discovery.dom.container.append(discovery.flashMessagesContainer);
@@ -110,7 +110,7 @@ export function initDiscovery(options) {
     });
 
     discovery.setData(
-        options.data,
+        data,
         {
             name: options.title,
             raw: options.raw,

src/content/index.css

@@ -1,3 +1,5 @@
+import { loader } from '@discoveryjs/discovery/dist/discovery-loader.js';
+
 export const init = initDiscoveryBundled => {
     let loaded = document.readyState === 'complete';
     let pre = null;
@@ -56,23 +58,24 @@ export const init = initDiscoveryBundled => {
                     initDiscoveryBundled({
                         node: document.body,
                         raw: textContent,
-                        data: json,
                         settings,
                         styles: [chrome.runtime.getURL('index.css')]
-                    });
+                    }, json);
                 });
             }
 
             try {
                 const { initDiscovery } = await import(chrome.runtime.getURL('init-discovery.js'));
 
                 getSettings(settings => {
-                    initDiscovery({
-                        node: document.body,
-                        raw: textContent,
+                    loader({
+                        module: initDiscovery,
                         data: json,
-                        settings,
-                        styles: [chrome.runtime.getURL('index.css')]
+                        options: {
+                            node: document.body,
+                            raw: textContent,
+                            settings
+                        }
                     });
                 });
             } catch (_) {}

src/content/init-discovery.js

@@ -21,7 +21,8 @@
     }],
     "web_accessible_resources": [
         "index.css",
-        "init-discovery.js"
+        "init-discovery.js",
+        "icons/*"
     ],
     "offline_enabled": true
 }