CSP (Content Security Policy) 内容安全策略

起因

在开发一个Chrome扩展时遇到一个问题: 在默认情况下 eval 被限制。

CSP (Content Security Policy) 内容安全策略

去查了查资料发现是因为在Chrome扩展中使用了 CSP (Content Security Policy)。

通常是在 HTTP Response Header 或者HTML的meta标签中定义的，告诉浏览器如何控制用户访问资源，如果访问的资源不在合法范围内，浏览器会拒绝该资源的请求。其主要目的是为了安全，例如: 防止跨站脚本攻击(XSS)。

格式

书写格式

Content-Security-Policy: <policy-directive>; <policy-directive>;

在1.1版本中有以下几种:

指令

 - connect-src: 声明了通过XHR和WebSocket等方式的合法引用范围
 - font-src: 声明了在线字体的合法引用范围
 - frame-src: 声明了嵌入式框架的合法引用范围
 - img-src: 声明了图片的合法引用范围
 - media-src: 声明了声音和视频媒体的合法引用范围
 - object-src: 声明了Flash等对象的合法引用范围
 - style-src: 声明了CSS的合法引用范围
 - script-src: 声明了JavaScript的合法引用范围
 - default-src: 声明了未指定的其他引用方式的合法引用范围

属性

属性必须带引号表示特殊意义

 - 'self': 允许引用同域资源
 - 'unsafe-inline': 允许执行inline-script
 - 'unsafe-eval': 允许执行字符串转换的代码(如在eval函数和setTimeout中的字符串代码)
 - 'none': 不允许引用任何资源

Chrome

默认配置

default-src 'self';
connect-src *;
style-src 'self' data: chrome-extension-resource: 'unsafe-inline';
img-src 'self' data: chrome-extension-resource:;
frame-src 'self' data: chrome-extension-resource:;
font-src 'self' data: chrome-extension-resource:;
media-src *;

在Chrome扩展中展示没在合法范围中的页面

如果需要引用没在合法范围中的资源，可以使用 webview标签 代替 iframe标签，必须指定 width、height 和 URL。

<webview src="http://page.com/" width="500" height="500"></webview>

沙箱

如果直的需要使用 inline-script 和 eval 等方式执行JavaScript代码，可以在 Manifest.json 中配置 sandbox 属性，把需要"不安全"的页面放入沙箱中执行。

"sandbox": {
    "pages": ["sandboxed.html"]
}