MENU
Content Security Policy
The Content-Security-Policy header helps to reduce XSS attacks (cross-site scripting attacks) by declaring which dynamic resources are allowed to load. It consists of a list of directives separated by ';' :
| Directive | Description |
| default-src | the default |
| script-src | <script> |
| style-src | <style> |
| img-src | <img> |
| connect-src | AJAX / WebSocket / EventSource |
| font-src | Font |
| object-src | <object> <embed> |
| media-src | <audio> <video> |
| frame-src | <iframe> |
| sandbox | By default, the sandbox applies a same-origin policy and blocks popups, plugins as well as scripts. You can keep the sandbox value empty to keep all restrictions in place, or add values: allow-forms allow-same-origin allow-scripts allow-popups allow-modals allow-orientation-lock allow-pointer-lock allow-presentation allow-popups-to-escape-sandbox allow-top-navigation |
| report-uri | Instructs the browser to POST a report of policy failures to this URI. You can also append -Report-Only to the HTTP header name to instruct the browser to only send reports (does not block anything). This directive is deprecated in CSP Level 3 in favor of the report-to directive. |
| child-src | <iframe> |
| form-action | <form> |
| frame-ancestors | <iframe> <object> <embed> |
| plugin-types | Defines valid MIME types for plugins invoked via <object> and <embed>. |
| report-to | Defines a reporting group name defined by a Report-To HTTP response header. See the for more info. |
| worker-src | Worker, SharedWorker, or ServiceWorker. |
| manifest-src | application manifests |
| navigate-to | Restricts the URLs that the document may navigate to by any means. For example, when a link is clicked, a form is submitted, or window.location is invoked. If form-action is present then this directive is ignored for form submissions. |
All of the directives that end with -src support similar values known as a source list. Multiple source list values can be space-separated except 'none' which should be the only value.
| Source Value | Description |
| * | Wildcard, allows any URL except data: blob: filesystem: schemes. |
| 'none' | Prevents loading resources from any source. |
| 'self' | Allows loading resources from the same origin (same scheme, host, and port). |
| data: | Allows loading resources via the data scheme (eg Base64 encoded images). |
| domain.example.com | Allows loading resources from the specified domain name. |
| *.example.com | Allows loading resources from any subdomain under example.com. |
| https://cdn.com | Allows loading resources only over HTTPS matching the given domain. |
| https: | Allows loading resources only over HTTPS on any domain. |
| 'unsafe-inline' | Allows use of inline source elements such as style attribute, onclick, or script tag bodies (depends on the context of the source it is applied to) and javascript: URIs. |
| 'unsafe-eval' | Allows unsafe dynamic code evaluation such as JavaScript eval(). |
| 'sha256-' | Allows an inline script or CSS to execute if its hash matches the specified hash in the header. Currently supports SHA256, SHA384, or SHA512. |
| 'nonce-' | Allows an inline script or CSS to execute if the script (eg: <script nonce="r@nd0m">) tag contains a nonce attribute matching the nonce specified in the CSP header. The nonce should be a secure random string, and should not be reused. |
| 'strict-dynamic' | Enables an allowed script to load additional scripts via non-"parser-inserted" script elements (for example document.createElement('script'); is allowed). |
| 'unsafe-hashes' | Allows you to enable scripts in event handlers (eg onclick). Does not apply to javascript: or inline <script>. |
When using the Whitelist plugin in Cordova to access resources outside a mobile app, CSP should be specified. Below is the CSP I use for one of my Cordova projects, a taxi app on Android devices. It permits connections to my backend, Google, Facebook, Font Awesome, Cloudflare, etc.
<meta http-equiv="Content-Security-Policy"
content="default-src 'unsafe-inline' https://roda-app.com:* http://localhost:* data: gap: https://ssl.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com https://kit-free.fontawesome.com;
script-src 'self' 'unsafe-inline' https://accounts.google.com https://maps.googleapis.com https://roda-app.com https://www.gstatic.com https://cdn.firebase.com https://*.firebaseio.com http://connect.facebook.net https://graph.facebook.com https://use.fontawesome.com https://www.google.com https://apis.google.com https://kit.fontawesome.com"/>To see which sites have been blocked by mistake, read the error messages on the console screen of a browser (F12).