CSP and service worker improvements (#5856)

* Add connectSrc for Safari compatibiity
* Add new font URL for Google Fonts compatibility
* Reload on re-registering the worker
* Change Mongo version in github to fix builds

.github/workflows/main.yml

@@ -21,11 +21,11 @@ jobs:
       run: npm install
     - name: Install MongoDB
       run: |
-        wget -qO - https://www.mongodb.org/static/pgp/server-3.6.asc | sudo apt-key add -
-        echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.6.list
+        wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -
+        echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list
         sudo apt-get update
         sudo apt-get install -y mongodb-org
-        sudo apt-get install -y --allow-downgrades mongodb-org=3.6.14 mongodb-org-server=3.6.14 mongodb-org-shell=3.6.14 mongodb-org-mongos=3.6.14 mongodb-org-tools=3.6.14
+        sudo apt-get install -y --allow-downgrades mongodb-org=4.4.0 mongodb-org-server=4.4.0 mongodb-org-shell=4.4.0 mongodb-org-mongos=4.4.0 mongodb-org-tools=4.4.0
     - name: Start MongoDB
       run: sudo systemctl start mongod
     - name: Run Tests

app.js

@@ -48,27 +48,28 @@ function create (env, ctx) {
         app.use(helmet.contentSecurityPolicy({ //TODO make NS work without 'unsafe-inline'
           directives: {
             defaultSrc: ["'self'"]
-            , styleSrc: ["'self'", 'https://fonts.googleapis.com/', "'unsafe-inline'"]
+            , styleSrc: ["'self'", 'https://fonts.googleapis.com/', 'https://fonts.gstatic.com/', "'unsafe-inline'"]
             , scriptSrc: ["'self'", "'unsafe-inline'"]
-            , fontSrc: ["'self'", 'https://fonts.gstatic.com/', 'data:']
+            , fontSrc: ["'self'", 'https://fonts.googleapis.com/', 'https://fonts.gstatic.com/', 'data:']
             , imgSrc: ["'self'", 'data:']
-            , objectSrc: ["'none'"], // Restricts <object>, <embed>, and <applet> elements
-            reportUri: '/report-violation'
-            , frameAncestors: ["'none'"], // Clickjacking protection, using frame-ancestors
-            baseUri: ["'none'"], // Restricts use of the <base> tag
-            formAction: ["'self'"], // Restricts where <form> contents may be submitted
+            , objectSrc: ["'none'"] // Restricts <object>, <embed>, and <applet> elements
+            , reportUri: '/report-violation'
+            , frameAncestors: ["'none'"]  // Clickjacking protection, using frame-ancestors
+            , baseUri: ["'none'"] // Restricts use of the <base> tag
+            , formAction: ["'self'"] // Restricts where <form> contents may be submitted
+            , connectSrc: ["'self'", "ws:", "wss:", 'https://fonts.googleapis.com/', 'https://fonts.gstatic.com/']
           }
           , reportOnly: secureCspReportOnly
         }));
         app.use(helmet.referrerPolicy({ policy: 'no-referrer' }));
         app.use(bodyParser.json({ type: ['json', 'application/csp-report'] }));
         app.post('/report-violation', (req, res) => {
           if (req.body) {
-            console.log('CSP Violation: ', req.body)
+            console.log('CSP Violation: ', req.body);
           } else {
-            console.log('CSP Violation: No data received!')
+            console.log('CSP Violation: No data received!');
           }
-          res.status(204).end()
+          res.status(204).end();
         })
       }
     }

views/index.html

@@ -729,9 +729,13 @@
           console.log('Service worker registered');
           reg.addEventListener('updatefound', () => {
             console.log('Service worker update detected');
+            reg.update();
             const newWorker = reg.installing;
             newWorker.addEventListener('statechange', (state) => {
               console.log('New worker state change', state);
+              //reg.unregister().then(function() { 
+                window.location.reload(true);
+              // });
             });
           });
         }).catch(function(error) {