Skip to content

Instantly share code, notes, and snippets.

@zxhfighter
Created September 18, 2020 08:51
Show Gist options
  • Save zxhfighter/fdde880c0d540e950e38ff24c8fa3608 to your computer and use it in GitHub Desktop.
Save zxhfighter/fdde880c0d540e950e38ff24c8fa3608 to your computer and use it in GitHub Desktop.

CSP

什么是 CSP

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

语法

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

其中 policy-directive 指令可以是 connect-srcscript-srcdefault-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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment