Merge pull request #12258 from vector-im/t3chguy/csp

Embed CSP meta tag and stop using script-src unsafe-inline
element-hq · Feb 6, 2020 · eb62972 · eb62972
2 parents b107da0 + 3a5a904
commit eb62972
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/src/vector/app.js b/src/vector/app.js
@@ -173,14 +173,17 @@ function onTokenLoginCompleted() {
 }
 
 export async function loadApp() {
-    if (window.vector_indexeddb_worker_script === undefined) {
+    // XXX: the way we pass the path to the worker script from webpack via html in body's dataset is a hack
+    // but alternatives seem to require changing the interface to passing Workers to js-sdk
+    const vectorIndexeddbWorkerScript = document.body.dataset.vectorIndexeddbWorkerScript;
+    if (!vectorIndexeddbWorkerScript) {
         // If this is missing, something has probably gone wrong with
         // the bundling. The js-sdk will just fall back to accessing
         // indexeddb directly with no worker script, but we want to
         // make sure the indexeddb script is present, so fail hard.
         throw new Error("Missing indexeddb worker script!");
     }
-    MatrixClientPeg.setIndexedDbWorkerScript(window.vector_indexeddb_worker_script);
+    MatrixClientPeg.setIndexedDbWorkerScript(vectorIndexeddbWorkerScript);
     CallHandler.setConferenceHandler(VectorConferenceHandler);
 
     window.addEventListener('hashchange', onHashChange);

diff --git a/src/vector/index.html b/src/vector/index.html
@@ -22,6 +22,21 @@
     <meta name="msapplication-config" content="<%= require('../../res/vector-icons/browserconfig.xml') %>">
     <meta name="theme-color" content="#ffffff">
     <meta property="og:image" content="<%= htmlWebpackPlugin.options.vars.og_image_url %>" />
+    <meta http-equiv="Content-Security-Policy" content="
+        default-src 'none';
+        style-src 'self' 'unsafe-inline';
+        script-src 'self' 'unsafe-eval' https://www.recaptcha.net https://www.gstatic.com;
+        img-src * blob: data:;
+        connect-src *;
+        font-src 'self' data:;
+        media-src * blob: data:;
+        child-src * blob: data:;
+        worker-src 'self';
+        frame-src * blob: data:;
+        form-action 'self';
+        object-src 'self';
+        manifest-src 'self';
+    ">
     <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
         var file = htmlWebpackPlugin.files.css[i];
         var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
@@ -34,18 +49,10 @@
         <% }
     } %>
   </head>
-  <body style="height: 100%;">
+  <body style="height: 100%;" data-vector-indexeddb-worker-script="<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>">
     <section id="matrixchat" style="height: 100%; overflow: auto;"></section>
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript> <!-- TODO: Translate this? -->
-    <script>
-        window.vector_indexeddb_worker_script = '<%= htmlWebpackPlugin.files.chunks['indexeddb-worker'].entry %>';
-    </script>
     <script src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
-    <script>
-      if ('serviceWorker' in navigator) {
-        navigator.serviceWorker.register('sw.js');
-      }
-    </script>
     <img src="<%= require('matrix-react-sdk/res/img/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/e2e/warning.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
     <img src="<%= require('matrix-react-sdk/res/img/feather-customised/warning-triangle.svg') %>" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>

diff --git a/src/vector/index.js b/src/vector/index.js
@@ -29,6 +29,11 @@ require('highlight.js/styles/github.css');
 import './rageshakesetup';
 import './modernizr';
 
+// load service worker if available on this platform
+if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('sw.js');
+}
+
 // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference
 // the SDK until we have to in imports.
 console.log("Loading skin...");