1. Failed to load external network images using Cordova page, throwing an exception
Refused to load the image 'http://xxx.png' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
wrong reason:
The default-src of the index.html page header is self, and external network resources are not used by default.
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * ">
solution:
Best img-src * in the header to allow loading external images
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * ;img-src *">
2. About Content-Security-Policy Introduction
Official website documents:
https://www.w3.org/TR/2012/CR-CSP-20121115/
Introduction to Content Security Policy (transfer)
This article introduces W3C's Content Security Policy , or CSP for short. As the name suggests, this specification is related to content security and is mainly used to define which resources a page can load to reduce the occurrence of XSS.
Chrome extensions have introduced CSP, which is defined by the content_security_policy field in manifest.json. Some modern browsers also support defining CSPs through response headers. Below we mainly introduce how to use CSP through response headers. For the use of CSP in Chrome extensions, please refer to the official Chrome documentation .
Browser Compatibility
Early Chrome supported CSP through the X-WebKit-CSP response header, while firefox and IE supported X-Content-Security-Policy. Chrome25 and Firefox23 began to support the standard Content-Security-Policy, see the table below.
| response header | Chrome | Firefox | Safari | IE |
|---|---|---|---|---|
| Content-Security-Policy | 25+ | 23+ | - | - |
| X-Content-Security-Policy | - | 4.0+ | - | 10.0 (limited) |
| X-Webkit-CSP | 14+ | - | 6+ | - |
For complete browser CSP support, please go to CanIUse .
how to use
To use CSP, you only need the server to output a response header like this:
default-src is a CSP command, and multiple commands are separated by English semicolons; 'self' is the command value, and multiple command values are separated by English spaces. Currently, there are these CSP directives:
| instruction | Command value example | illustrate |
|---|---|---|
| default-src | 'self' cnd.a.com | Define the default loading strategy for all types of resources (js, image, css, web font, ajax request, iframe, multimedia, etc.) |
| script-src | 'self' js.a.com | Defines a loading strategy for JavaScript. |
| style-src | 'self' css.a.com | Defines the loading strategy for styles. |
| img-src | 'self' img.a.com | Define the loading strategy for images. |
| connect-src | 'self' | Loading strategy for Ajax, WebSocket, etc. requests. When not allowed, the browser will simulate a response with a status of 400. |
| font-src | font.a.com | Loading strategy for Web Fonts. |
| object-src | 'self' | Loading strategy for plugins such as flash introduced by tags such as <object>, <embed> or <applet>. |
| media-src | media.a.com | Loading strategy for HTML multimedia introduced by tags such as <audio> or <video>. |
| frame-src | 'self' | Loading strategy for frames. |
| sandbox | allow-forms | Enable sandbox (similar to iframe's sandbox attribute) for the requested resource. |
| report-uri | /report-uri | 告诉浏览器如果请求的资源不被策略允许时，往哪个地址提交日志信息。 特别的：如果想让浏览器只汇报日志，不阻止任何内容，可以改用Content-Security-Policy-Report-Only头。 |
指令值可以由下面这些内容组成：
| 指令值 | 指令示例 | 说明 |
|---|---|---|
| * | img-src | 允许任何内容。 |
| 'none' | img-src 'none' | 不允许任何内容。 |
| 'self' | img-src 'self' | 允许来自相同来源的内容（相同的协议、域名和端口）。 |
| data | img-src data | 允许data:协议（如base64编码的图片）。 |
| www.a.com | img-src img.a.com | 允许加载指定域名的资源。 |
| *.a.com | img-src *.a.com | 允许加载a.com任何子域的资源。 |
| https://img.com | img-src https://img.com | 允许加载img.com的https资源（协议需匹配）。 |
| https: | img-src https: | 允许加载https资源。 |
| 'unsafe-inline' | script-src 'unsafe-inline' | 允许加载inline资源（例如常见的style属性，onclick，inline js和inline css等等）。 |
| 'unsafe-eval' | script-src 'unsafe-eval' | 允许加载动态js代码，例如eval()。 |
从上面的介绍可以看到，CSP协议可以控制的内容非常多。而且如果不特别指定'unsafe-inline'时，页面上所有inline的样式和脚本都不会执行；不特别指定'unsafe-eval'，页面上不允许使用new Function，setTimeout，eval等方式执行动态代码。在限制了页面资源来源之后，被XSS的风险确实小不少。
当然，仅仅依靠CSP来防范XSS是远远不够的，不支持全部浏览器是它的硬伤。不过，鉴于低廉的开发成本，加上也没什么坏处。如果担心影响面太大，也可以像下面这样，仅收集不匹配规则的日志，先观察下：
这样，如果页面上有inline的JS，依然会执行，只是浏览器会向指定地址发送一个post请求，包含这样的信息：
CSP先介绍到这里。现代浏览器支持不少与安全有关的响应头，以后接着再介绍。已经写完了，请点这里继续浏览。
原文链接：https://imququ.com/post/content-security-policy-reference.html，参与评论。