Content Security Policy 简称 CSP，可用于应对跨站脚本攻击（XSS 攻击）及数据包嗅探攻击

在不指定 Content Security Policy 的情况下，浏览器会使用默认的同源策略

Content Security Policy 语法

通常是通过 Content-Security-Policy 响应头指定

1

Content-Security-Policy: <policy>

或者通过 <meta> 标签指定

1

<meta http-equiv="Content-Security-Policy" content="<policy>" />

使用 Content-Security-Policy-Report-Only 响应头可以指定仅报告但不阻碍执行的规则，该响应头需要与 report-to 指定同时使用，并且该响应头会继承 Content-Security-Policy 响应头的规则（除 sandbox 之外）

Content Security Policy 指令

Content Security Policy 值

Content Security Policy 示例

1
2
3
4
5

Content-Security-Policy: default-src 'self'
Content-Security-Policy: default-src 'self' example.com *.example.com
Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com
Content-Security-Policy: default-src https://onlinebanking.example.com
Content-Security-Policy: default-src 'self' *.example.com; img-src *

链接

• https://w3c.github.io/webappsec-csp/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

Permissions Policy 允许开发者定义在网页中控制功能的可用性，从而增加应用的安全性和隐私性

Permissions Policy 与 Content Security Policy 类似，但其专注于控制功能特性而非内容

需要注意的是 Permissions Policy 曾经被称为 Feature Policy，但其现在已重命名

指定 Permissions Policy

可以利用 Permissions-Policy 请求头来指定 Permissions Policy，或使用与之等价的 <meta> 标签

可以利用 <iframe> 标签的 allow 属性给内嵌网页指定 Permissions Policy

指定单个 Permissions Policy 时通常包含与之对应的一条指令与允许列表

检测 Permissions Policy

可以通过 Document 接口的 featurePolicy 属性或 HTMLIFrameElement 接口的 featurePolicy 属性暴露的 FeaturePolicy 实例检测 Permissions Policy 的状态

注意：标准已将 FeaturePolicy 接口重命名为 PermissionsPolicy 接口, featurePolicy 属性重命名为 permissionsPolicy 属性

FeaturePolicy 接口的 allowedFeatures() 方法获取当前用户代理在当前浏览上下文允许使用的所有特性

FeaturePolicy 接口的 allowsFeature() 方法检测指定特性在指定的域下是否可用

FeaturePolicy 接口的 features() 方法获取当前用户代理支持的所有特性

FeaturePolicy 接口的 allowedFeatures() 方法列举当前用户代理设置的特性策略中指定特性允许使用的域

Permissions Policy 与 Permissions API 的联系

Permissions Policy 允许开发者设置权限的策略，而 Permissions API 允许用户授予权限

Permissions Policy 指令

Permissions Policy 允许列表

• * 允许在顶层浏览上下文及其嵌入浏览上下文中使用
• () 禁止在顶层浏览上下文及其嵌入浏览上下文中使用，在 <iframe> 标签的 allow 属性的值为 none
• self 允许在顶层浏览上下文及其同源的嵌入浏览上下文中使用，禁止在嵌入的跨域的嵌入浏览上下文中使用
• src 仅限在 <iframe> 标签的 allow 属性中使用，允许在当前嵌入浏览上下文中使用
• <origin> 允许在指定源的浏览上下文中使用

1
2
3
4
5
6
7
8
9

*
()
(self)
(src)
("https://a.example.com")
("https://a.example.com" "https://b.example.com")
(self "https://a.example.com" "https://b.example.com")
(src "https://a.example.com" "https://b.example.com")
("https://*.example.com")

Permissions-Policy 响应头语法

基本语法

1

Permissions-Policy: <directive>=<allowlist>

示例

1
2
3

Permissions-Policy: geolocation=()
Permissions-Policy: geolocation=(self "https://a.example.com" "https://b.example.com")
Permissions-Policy: picture-in-picture=(), geolocation=(self https://example.com), camera=*;

另外值得注意的是，该响应头无法被编程式修改

<iframe> 标签 allow 属性语法

一般建议在 Permissions-Policy 响应头中指定相对宽泛的 Permissions Policy，并在对应内嵌浏览上下文中通过 <iframe> 标签 allow 属性指定更加严格的 Permissions Policy

基本语法

1

<iframe src="<origin>" allow="<directive> <allowlist>"></iframe>

示例

1
2
3

<iframe src="https://example.com" allow="geolocation 'none'"></iframe>
<iframe src="https://example.com" allow="geolocation 'self' https://a.example.com https://b.example.com"></iframe>
<iframe src="https://example.com" allow="geolocation 'self' https://a.example.com https://b.example.com; fullscreen 'none'"></iframe>

链接

• https://w3c.github.io/webappsec-permissions-policy/
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Permissions_Policy