From bc463d1808ecd4af684f204182bf03f09a4b0982 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 29 Apr 2019 17:59:20 +0200
Subject: [PATCH 1/2] Make CSP work

---
 packages/electron-app/src/main/index.ts    |  9 ++--
 packages/electron-app/src/main/util/csp.ts | 40 +++++++----------
 packages/light-apps/public/index.html      | 52 +++++++++++++++-------
 3 files changed, 56 insertions(+), 45 deletions(-)

diff --git a/packages/electron-app/src/main/index.ts b/packages/electron-app/src/main/index.ts
index 23a30f4c7..d1a46e66a 100644
--- a/packages/electron-app/src/main/index.ts
+++ b/packages/electron-app/src/main/index.ts
@@ -8,7 +8,7 @@ import Pino from 'pino';
 import path from 'path';
 import url from 'url';
 
-import { CSP, IS_PROD, staticPath } from './util';
+import { CSP, staticPath } from './util';
 
 const { app, BrowserWindow, session } = electron;
 const pino = Pino();
@@ -59,10 +59,11 @@ function createWindow () {
 
   // Content Security Policy (CSP)
   session.defaultSession!.webRequest.onHeadersReceived((details, callback) => {
+    // Note: `onHeadersReceived` will not be called in prod, because we use the
+    // file:// protocol: https://electronjs.org/docs/tutorial/security#csp-meta-tag
+    // Instead, the CSP are the ones in the meta tag inside index.html
     pino.debug(
-      `Configuring Content-Security-Policy for environment ${
-      IS_PROD ? 'production' : 'development'
-      }`
+      'Configuring Content-Security-Policy for environment development'
     );
 
     callback({
diff --git a/packages/electron-app/src/main/util/csp.ts b/packages/electron-app/src/main/util/csp.ts
index 384e8263a..76d05fa62 100644
--- a/packages/electron-app/src/main/util/csp.ts
+++ b/packages/electron-app/src/main/util/csp.ts
@@ -4,7 +4,6 @@
 
 import { IS_PROD } from './constants';
 
-/* eslint-disable */
 // References:
 // * https://github.com/parity-js/shell
 // * https://github.com/paritytech/fether
@@ -12,48 +11,39 @@ const CSP_CONFIG = {
   // Disallow mixed content
   blockAllMixedContent: 'block-all-mixed-content;',
   // Disallow framing and web workers.
-  // tslint:disable-next-line:quotemark
   childSrc: "child-src 'none';",
   // FIXME - Only allow connecting to WSS and HTTPS servers.
-  connectSrc: 'connect-src http: ws:;',
+  connectSrc: IS_PROD
+    ? 'connect-src ws:;'
+    // Also allow http in dev mode, for CRA
+    : 'connect-src http: ws:;',
   // Fallback for missing directives.
   // Reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src
   //
   // Disallow everything as fallback by default for all CSP fetch directives.
   defaultSrc: "default-src 'none';",
-  // Disallow fonts.
-  fontSrc: "font-src 'self';", // Additionally used in Parity-JS Shell `'self' data: https:`
+  // Disallow fonts, we allow https because we are loading from Google Fonts (FIXME don't load from google)
+  fontSrc: "font-src 'self' data: https:;",
   // Disallow submitting any forms
   formAction: "form-action 'none';",
   // Disallow framing.
   frameSrc: "frame-src 'none';",
-  imgSrc: !IS_PROD
-    ? // Only allow HTTPS for images. Token provider logos must be https://
-      // Allow `data:` `blob:`.
-      "img-src 'self' 'unsafe-inline' file: data: blob: https:;"
-    : // Only allow HTTPS for images. Token provider logos must be https://
-      // Allow `data:` `blob:`.
-      "img-src 'unsafe-inline' file: data: blob: https:;", // Additionally used in Parity-JS Shell `'self'`
+  // Restrict images to only images from known sources
+  imgSrc: "img-src 'self' data:;",
   // Disallow manifests.
   manifestSrc: "manifest-src 'none';",
   // Disallow media.
   mediaSrc: "media-src 'none';",
   // Disallow fonts and `<webview>` objects
   objectSrc: "object-src 'none';",
-  // Disallow prefetching.
-  prefetchSrc: "prefetch-src 'none';",
   scriptSrc: !IS_PROD
     ? // Only allow `http:` and `unsafe-eval` in dev mode (required by create-react-app)
-      "script-src 'self' file: http: blob: 'unsafe-inline' 'unsafe-eval';"
-    : "script-src file: 'unsafe-inline';",
-  styleSrc: !IS_PROD
-    ? "style-src 'self' 'unsafe-inline' file: blob:;" // Additionally used in Parity-JS Shell `data: https:`
-    : "style-src unsafe-inline' file: blob:;", // Additionally used in Parity-JS Shell `data: https:`
-  // Allow `blob:` for camera access (worker)
-  workerSrc: 'worker-src blob:;' // Additionally used in Parity-JS Shell `'self' https:`
+    "script-src 'self' 'unsafe-inline' http: 'unsafe-eval';"
+    : "script-src 'self' 'unsafe-inline';",
+  // Disallow stylesheets, we allow https because we are loading from Google Fonts (FIXME don't load from google)
+  styleSrc: "style-src 'self' 'unsafe-inline' https:;",
+  // Disallow workers, allow `blob:` for camera access if needed
+  workerSrc: "worker-src 'none';"
 };
-/* eslint-enable */
 
-const CSP = Object.values(CSP_CONFIG).join(' ');
-
-export { CSP };
+export const CSP = Object.values(CSP_CONFIG).join(' ');
diff --git a/packages/light-apps/public/index.html b/packages/light-apps/public/index.html
index 3f57904a3..d9f45b8b5 100644
--- a/packages/light-apps/public/index.html
+++ b/packages/light-apps/public/index.html
@@ -1,16 +1,34 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
-    <!--
+
+<head>
+  <meta charset="utf-8">
+  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+  <!-- These CSP are for prod. For dev, CSP are set inside @electron-app -->
+  <meta http-equiv="Content-Security-Policy" content="
+    block-all-mixed-content;
+    child-src 'none';
+    connect-src http: ws:;
+    default-src 'none';
+    font-src 'self' data: https:;
+    form-action 'none';
+    frame-src 'none';
+    img-src 'self' data:;
+    manifest-src 'none';
+    media-src 'none';
+    object-src 'none';
+    script-src 'self' 'unsafe-inline';
+    style-src 'self' 'unsafe-inline' https:;
+    worker-src 'none';
+  ">
+  <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -19,13 +37,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Substrate Light UI</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
+  <title>Substrate Light UI</title>
+</head>
+
+<body>
+  <noscript>
+    You need to enable JavaScript to run this app.
+  </noscript>
+  <div id="root"></div>
+
+</body>
 
-  </body>
 </html>

From dbb248d742e937be9ddbe523a5bc39dc8439ec72 Mon Sep 17 00:00:00 2001
From: Amaury Martiny <amaury.martiny@protonmail.com>
Date: Mon, 29 Apr 2019 18:05:03 +0200
Subject: [PATCH 2/2] Remove unsafe-eval

---
 packages/electron-app/src/main/util/csp.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/electron-app/src/main/util/csp.ts b/packages/electron-app/src/main/util/csp.ts
index 76d05fa62..9f5a809f0 100644
--- a/packages/electron-app/src/main/util/csp.ts
+++ b/packages/electron-app/src/main/util/csp.ts
@@ -36,10 +36,8 @@ const CSP_CONFIG = {
   mediaSrc: "media-src 'none';",
   // Disallow fonts and `<webview>` objects
   objectSrc: "object-src 'none';",
-  scriptSrc: !IS_PROD
-    ? // Only allow `http:` and `unsafe-eval` in dev mode (required by create-react-app)
-    "script-src 'self' 'unsafe-inline' http: 'unsafe-eval';"
-    : "script-src 'self' 'unsafe-inline';",
+  // Disallow unknown scripts
+  scriptSrc: "script-src 'self' 'unsafe-inline';",
   // Disallow stylesheets, we allow https because we are loading from Google Fonts (FIXME don't load from google)
   styleSrc: "style-src 'self' 'unsafe-inline' https:;",
   // Disallow workers, allow `blob:` for camera access if needed