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.

Leticialetisha

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.

Epifaniaepifano

this helped only addition is is I need to add wss: for secure web socket – Pallet

Great! How to limit to ws://localhost? I'm trying but it's not working. – Amandine

Works by just adding the default-src 'self' ws: When adding the connect-src policy, you also need to include the domains for other APIs and widgets. Otherwise, you will get content blocked errors. – Rovner

Answer 2

If your websocket is on the same host/port then both connect-src 'self' or default-src 'self' SHOULD be sufficient - presuming that browsers have implemented the changes since the CSP spec changes in https://github.com/w3c/webappsec-csp/issues/7 (PR).

Chuff

Right now safari does not support a websocket to self wih 'self' – Boardwalk

Answer 3

No point having CSP if your going to use 'unsafe inline' it re-opens the site up for attacks

Trichromat

Answer 4

I had a a similar issue. This effects Cordova 5.x.x. See this blog post by Nic Raboy https://blog.nraboy.com/2015/05/whitelist-external-resources-for-use-in-ionic-framework/

I had to tweak the meta tag a bit to get my websocket to connect as well. Here is what that looks like;

 <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

Immesh

That worked. I guess I was missing script-src * 'unsafe-inline' 'unsafe-eval' – Leticialetisha

This answer is misleading and on the dangerous side. The * enables connections from all sources which defeats the security policy. See the other answer for more details. – Epifaniaepifano