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.
data: allows data: URIs to be used as a style source. https: allows resources loaded over HTTPS. wss: allows web socket connections. 'unsafe-inline' allows the use of inline resources such as event handlers, URLs, and styles.
To add this custom meta tag, you can go to www.yourStore.com/Admin/Setting/GeneralCommon and find Custom <head> tag and add this as shown in the image below. Content Security Policy protects against Cross Site Scripting (XSS) and other forms of attacks such as ClickJacking.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With