Content Security Policy (CSP)

March 29, 2024

前言

TL;DR:
简而言之，内容安全策略（CSP）类似于白名单机制，限制当前网页中允许执行的脚本及样式。
通过 HTTP 标头指定，用于缓解跨站脚本攻击（XSS）（显然对 SQL 注入无能为力）

现代 Web 应用的工作方式往往是从后端数据库获取数据，并渲染数据到 HTML 模板。
攻击者可能通过向表单提交一段构造的 HTML 字符串，最终导致恶意脚本在浏览器中执行。

在 CSP 之前，通常的方法是转义（Escape） HTML 字符

const html = str
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");

或 DOMPurify。此外， HTML 标准甚至已规定 Web Sanitizer API（另见）

const $div = document.querySelector("div");
const user_input = `<em>hello world</em><img src="" onerror=alert(0)>`;
$div.setHTML(user_input, { sanitizer: new Sanitizer() }); // <div><em>hello world</em><img src=""></div>

仅作文本渲染时，则可以使用 Node 接口的 textContent 属性设置文本内容

Content Security Policy

CSP 响应头包括 Content-Security-Policy 和 Content-Security-Policy-Report-Only。

Content-Security-Policy 指明用户代理能够为指定的页面加载哪些资源，以及页面能够 fetch 哪些资源（当然，也遵循同源策略）。
Content-Security-Policy-Report-Only 如其名，仅报告，可对 Content-Security-Policy 进行实验和渐进式应用。

生产环境当然需要考虑浏览器兼容性，和渐进式应用的策略。
此处仅根据 CSP Level3 进行说明，略过 Content-Security-Policy-Report-Only。

形式化语法

Content-Security-Policy = serialized-policy-list

serialized-policy-list = 1#serialized-policy

serialized-policy =
    serialized-directive *( optional-ascii-whitespace ";" [ optional-ascii-whitespace serialized-directive ] )

serialized-directive = directive-name [ required-ascii-whitespace directive-value ]
directive-name       = 1*( ALPHA / DIGIT / "-" )
directive-value      = *( required-ascii-whitespace / ( %x21-%x2B / %x2D-%x3A / %x3C-%x7E ) )
                       ; Directive values may contain whitespace and VCHAR characters,
                       ; excluding ";" and ",". The second half of the definition
                       ; above represents all VCHAR characters (%x21-%x7E)
                       ; without ";" and "," (%x3B and %x2C respectively)

可以看出，CSP 策略是一个指令列表，每个指令由名称和可选的值构成，通过分号分隔。

具体指令可参见 MDN 或规范

举例（注意指令值的格式）：

Content-Security-Policy: script-src https://safe-external-site.com *.trusted.com; default-src 'self'

或通过 <meta http-equiv>（不支持 Report 指令）：

html

<meta
    http-equiv="Content-Security-Policy"
    content="script-src https://safe-external-site.com *.trusted.com; default-src 'self'"
/>

正如上文所述，CSP 类似于白名单，指令未声明的资源则不被允许加载。
因此 default-src 指令非常有用

'unsafe-inline' 值允许内联资源（此处即内联 <script> 脚本），但这也给 XSS 留下可乘之机。

Content-Security-Policy: script-src 'self' 'unsafe-inline' my.trusted.domain

因此应避免使用 'unsafe-*' 值，可使用特殊的 'nonce-*' 值
该值可由工具生成，例如 Webpack

Content-Security-Policy: script-src 'nonce-dGhpcyBpcyBhIG5v=='; style-src 'nonce-dGhpcyBpcyBhIG5v=='

只有对应元素允许被执行

html

<script nonce="dGhpcyBpcyBhIG5v==">
    ...
</script>

<style nonce="dGhpcyBpcyBhIG5v==">
    ...
</style>

←Back to home