content-security-policy meta tag for allowing web socket

Question

Situation: autoreload of phonegap serve blocked by content-security-policy meta tag

Adding content security policy prevents auto-reload of phonegap serve utility. This is built on top of cordova serve but auto-reloads the app on file editing. It works by injecting socket.io in index.html. What should I specify in my CSP meta tag that will allow socket connections to my laptop.

Here is my current CSP meta tag:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 192.168.0.100 * ws:* ; connect-src ws://192.168.0.100 ws:*"> 

However on opening, the device keeps showing "Connecting to device" and not event is received on the device.

Also note that it starts working on removing this meta tag which mean the cordova-plugin-whitelist might not be blocking it.

Answer 1

To add web sockets to the security policy you add the web socket protocol (ws:) to the connect-src directive.

connect-src 'self' ws:;

Optionally, you can add the ws: protocol to the default-src and omit connect-src. Here is a useful example that enables most local development needs while still providing useful security constraints.

<meta http-equiv="Content-Security-Policy"
      content="default-src 'self' data: gap: ws: ssl.gstatic.com 'unsafe-inline';">

The documentation for content security policy is surprisingly good and easy to read.