csp.md

CSP

什么是 CSP

CSP 是 Content-Security-Policy 的缩写，属于 HTTP 响应头。允许网站管理员控制允许用户代理为给定页面加载的资源。除少数例外，策略主要涉及指定服务器源和脚本端点。这有助于防止跨站点脚本攻击（XSS）。

语法

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

其中 policy-directive 指令可以是 connect-src，script-src，default-src 等等。

这里介绍上面三个基本指令。

script-src

指令为JavaScript的源指定有效来源。这不仅包括直接加载到 <script> 元素中的 URL，还包括可以触发脚本执行的内联脚本事件处理程序 (onclick）和 XSLT 样式表等内容。

例如响应头中设置：

Content-Security-Policy: script-src https://example.com/

以下脚本被阻止并且不会被加载或执行：

<script src="https//not-example.com/js/library.js"></script>

请注意，嵌入式事件处理程序也被阻止，你应当使用 addEventListener 调用代替：

// 不会触发
<button id="btn" onclick="doSomething()">

// 会触发
document.getElementById("btn").addEventListener('click', doSomething);

connect-src

指令限制可以使用脚本接口加载的 URL。

例如响应头中设置：

Content-Security-Policy: connect-src https://example.com/

那么以下连接被阻止并且不会加载：

<a ping="https://not-example.com">

<script>
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://not-example.com/');
  xhr.send();

  var ws = new WebSocket("https://not-example.com/");

  var es = new EventSource("https://not-example.com/");

  navigator.sendBeacon("https://not-example.com/", { ... });
</script>

default-src

用作其他 CSP 提取指令的后备。对于以下每个不存在的指令，用户代理都将查找指令并将其用于此值。

参考资料

https://cloud.tencent.com/developer/section/1189876