Content-Security-Policy标签介绍

2019年6月22日12:16:12 评论 58
摘要

Content-Security-Policy标签介详细介绍。

今天看南旭东博客的时候发现一个很好玩的代码,是强制http资源转化为https。觉得很不错,上网查找了一下相关资料,有需要的小伙伴了解一下。这个我们可以简称为“CSP”。

代码展示

  1. <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

主要作用

  1. 使用白名单的方式告诉客户端(浏览器)允许加载和不允许加载的资源。
  2. 向服务器举报这种强贴牛皮鲜广告的行为,以便做出更加针对性的措施予以绝杀。

如何使用

我们知道了好处还是很犀利的啊,这么好的东西怎么玩?其实也很简单,前面说到了他其实就是一个http header嘛,所以我们只需要在返回html页面的同时加上个response header 就行了,后面的script-src代表是一个指令,指示浏览器你只能加载我屁股后面那些规则下的js代码,其他的都一律拒绝。

  1. Content-Security-Policy: script-src 'self' https://apis.google.com

还可以通过元标记的方式使用:

  1. <meta http-equiv="Content-Security-Policy" content="default-src https://cdn.example.net; child-src 'none'; object-src 'none'">

指令

前面说到script-src是一个指令,那就说明还有其他的指令罗,没有错,下面的都是指令,覆盖了web页面的所有资源。

  1. base-uri: 用于限制可在页面的 <base> 元素中显示的网址。
  2. child-src: 用于列出适用于工作线程和嵌入的帧内容的网址。例如:child-src https://youtube.com 将启用来自 YouTube(而非其他来源)的嵌入视频。 使用此指令替代已弃用的 frame-src 指令。
  3. connect-src: 用于限制可(通过 XHR、WebSockets 和 EventSource)连接的来源。
  4. font-src: 用于指定可提供网页字体的来源。Google 的网页字体可通过 font-src https://themes.googleusercontent.com 启用。
  5. form-action: 用于列出可从 <form> 标记提交的有效端点。
  6. frame-ancestors: 用于指定可嵌入当前页面的来源。此指令适用于 <frame><iframe><embed> 和 <applet> 标记。此指令不能在 <meta> 标记中使用,并仅适用于非 HTML 资源。
  7. frame-src: 已弃用。请改用 child-src。
  8. img-src: 用于定义可从中加载图像的来源。
  9. media-src: 用于限制允许传输视频和音频的来源。
  10. object-src: 可对 Flash 和其他插件进行控制。
  11. plugin-types: 用于限制页面可以调用的插件种类。
  12. report-uri: 用于指定在违反内容安全政策时浏览器向其发送报告的网址。此指令不能用于 <meta> 标记,这就是举报电话。
  13. style-src: 是 script-src 版的样式表。
  14. upgrade-insecure-requests: 指示 User Agent 将 HTTP 更改为 HTTPS,重写网址架构。 该指令适用于具有大量旧网址(需要重写)的网站。

这么多指令都要写?写起来不是很麻烦,不是的。你只需要写自己要求限制的指令就行,没写的都会默认没有限制。

你还可以通过指定一个 default-src 指令替换大部分指令的默认行为,也就说如果你写了default-src 指令,那其他没写的指令都会服从default-src 的规则。

规则

规则主要是罗列一些你信任的域名,除此之外还有四个关键词:

  1. none 表示不执行任何匹配。
  2. self'表示与当前来源(而不是其子域)匹配。
  3. unsafe-inline表示允许使用内联 JavaScript 和 CSS。
  4. unsafe-eval 表示允许使用类似 eval 的 text-to-JavaScript 机制。

nonce属性

讲了这么多那和我一开始发现的那个script标签上的nonce属性有啥关系呢?首先说明不存在不正当*关系。主要是现代浏览器认为内联css和内联js都是应该被视为危险的行为,但是你总不能因为菜刀能杀人就不让百姓用菜刀了吧,所以开个口子吧。如果你在使用CSP策略的同时有确实需要使用内联css和js怎么办?用nonce+随机数的方式。

  1. <script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
  2.   //Some inline code I cant remove yet, but need to asap.
  3. </script>

然后我们在CSP的白名单中加上

  1. Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'

这样你这段内联js就可以生效了。

补充说明

CSP 1 在 Chrome、Safari 和 Firefox 中非常实用,但在 IE 10 中仅得到非常有限的支持。 您可以 在 canisue.com 上查看具体信息。CSP Level 2 在 Chrome 40 及更高版本中可用。 Twitter 和 Facebook 等大量网站已部署此标头(Twitter 的案例研究值得一读),并为您开始在自己的网站上进行部署制定了相应标准。

可能遇到的坑

在应用CSP后,有用户反映访问站点出现问题,检查发现用户获取到的meta头乱了,而且在里面发现了一个不是我们写的域名:local.adguard.com,一查发现adguard是款 vpn软件,他对我们meta头部进行修改,修改就算了,还修改错了。后面我们改成response header的方式,不使用meta了,发现他也会修改http的response header,但是没修改错,垃圾VPN害死人啊。

本文来源于简书“牧羊童鞋”,如有侵权请联系删除。

weinxin
微信公众号
博客微信公众号,欢迎关注。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: