feat: 🎸 setup initial CSP for desktop

ui/desktop/electron-app/src/content-security-policy.js

@@ -0,0 +1,35 @@
+const isDev = require('electron-is-dev');
+
+const csp = {
+  'default-src': ["'none'"],
+  'script-src': ["'self'"],
+  'frame-src': ["'self'"],
+  'font-src': ["'self'"],
+  'connect-src': ["'self'"],
+  'img-src': ["'self'", 'data:'],
+  'style-src': ["'self'"],
+  'media-src': ["'self'"],
+  'manifest-src': ["'self'"],
+};
+
+// Dev policy is necessary for Ember live reload.
+// Unsafe policy is necessary in development and test environments, but should
+// not be used in production.
+const enableDevCSP = () => {
+  csp['style-src'].push("'unsafe-inline'");
+  csp['script-src'].push("'unsafe-eval'");
+  csp['script-src'].push("'unsafe-inline'");
+  csp['script-src'].push("http://localhost:7020");
+  csp['connect-src'].push("ws://localhost:7020");
+};
+
+const generateCSPHeader = () => Object
+  .keys(csp)
+  .map(key => `${key} ${csp[key].join(' ')};`)
+  .join(' ');
+
+if (isDev) enableDevCSP();
+
+module.exports = {
+  generateCSPHeader: generateCSPHeader
+};

ui/desktop/electron-app/src/index.js

@@ -7,6 +7,8 @@ const {
 const { session, app, protocol, BrowserWindow, ipcMain } = require('electron');
 require('./handlers.js');
 
+const { generateCSPHeader } = require('./content-security-policy.js');
+
 const isDev = require('electron-is-dev');
 
 // Register the custom file protocol
@@ -58,6 +60,16 @@ app.on('ready', async () => {
     return callback(true);
   });
 
+  // Setup content security policy
+  ses.webRequest.onHeadersReceived((details, callback) => {
+    callback({
+      responseHeaders: {
+        ...details.responseHeaders,
+        'Content-Security-Policy': [generateCSPHeader()]
+      }
+    });
+  });
+
   if (isDev) {
     try {
       require('devtron').install();