Changing to semantic CSP injection

package.json

@@ -33,6 +33,7 @@
     "chalk": "^1.1.1",
     "cordova-registry-mapper": "^1.1.12",
     "cordova-serve": "^1.0.0",
+    "csp-parse": "^0.0.2",
     "glob": "^7.0.5",
     "minimist": "^1.2.0",
     "ncp": "^2.0.0",

src/server/server.js

@@ -4,6 +4,7 @@ var fs = require('fs'),
     path = require('path'),
     replaceStream = require('replacestream'),
     cordovaServe = require('cordova-serve'),
+    cspParse = require('csp-parse'),
     send = require('send-transform'),
     url = require('url'),
     Q = require('q'),
@@ -13,6 +14,13 @@ var fs = require('fs'),
     SocketServer = require('./socket'),
     pluginSimulationFiles = require('./plugin-files');
 
+/**
+ * Maximum length of <meta> tag we search for when modifying CSP properties
+ * Needed for when a tag crosses multiple chunk boundaries.
+ * @const
+ */
+var MAX_CSP_TAG_LENGTH = 1024;
+
 /**
  * The simulation server that encapsulates the HTTP server instance and
  * Web Socket server. It enables to start and stop the server to listening
@@ -218,13 +226,35 @@ SimulationServer.prototype._streamAppHostHtml = function (request, response) {
                 return '<script src="' + scriptSource + '"></script>';
             }).join('');
 
-            // Note we replace "default-src 'self'" with "default-src 'self' ws:" (in Content Security Policy) so that
-            // websocket connections are allowed (this relies on a custom version of send that supports a 'transform' option).
+            // Note we add "connect-src 'self' ws:" and "img-src 'blob:' (in Content Security Policy) so that
+            // websocket connections are allowed and the camera plugin works (this relies on a custom version
+            // of send that supports a 'transform' option).
+            var metaTagRegex = /<\s*meta[^>]*>/g;
+            var cspRegex = /http-equiv\s*=\s*(['"])Content-Security-Policy\1/;
+            var cspContent = /(content\s*=\s*")([^"]*)"/;
             send(request, filePath, {
                 transform: function (stream) {
                     return stream
                         .pipe(replaceStream(/(<\s*head[^>]*>)/, '$1' + scriptTags))
-                        .pipe(replaceStream('default-src \'self\'', 'default-src \'self\' ws: blob:'));
+                        .pipe(replaceStream(metaTagRegex, function (metaTag) {
+                            if (!cspRegex.test(metaTag)) {
+                                // Not a CSP tag; return unchanged
+                                return metaTag;
+                            }
+                            return metaTag.replace(cspContent, function (match, preamble, csp) {
+                                var policy = new cspParse(csp);
+                                var defaultCsp = policy.get('default-src');
+                                if (!policy.get('connect-src')) {
+                                    policy.add('connect-src', defaultCsp);
+                                }
+                                policy.add('connect-src', '\'self\' ws:');
+                                if (!policy.get('img-src')) {
+                                    policy.add('img-src', defaultCsp);
+                                }
+                                policy.add('img-src', 'blob:');
+                                return preamble + policy.toString() + '"';
+                            });
+                        }, {maxMatchLen: MAX_CSP_TAG_LENGTH}));
                 }
             }).pipe(response);
         }.bind(this))