19

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.

cnvzmxcvmcx
  • 1,061
  • 2
  • 15
  • 32

3 Answers3

53

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.

Scott Boring
  • 2,601
  • 1
  • 25
  • 31
  • 11
    this helped only addition is is I need to add wss: for secure web socket – neeta Jan 27 '17 at 19:03
  • 2
    Great! How to limit to ws://localhost? I'm trying but it's not working. – f1lt3r Feb 01 '18 at 17:50
  • 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. – ozkary Mar 08 '22 at 22:30
5

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).

Null
  • 975
  • 13
  • 13
-7

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'">
Brad W
  • 2,540
  • 2
  • 18
  • 28
  • 2
    That worked. I guess I was missing `script-src * 'unsafe-inline' 'unsafe-eval'` – cnvzmxcvmcx Oct 07 '15 at 14:18
  • 17
    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. – Scott Boring Dec 30 '16 at 01:41