欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

Content Security Policy 入门教程 里面有作者: 阮一峰 有大用 有大大用 有大大大用

下面是我自己亲自做的,不太理想(是关于爱丁堡的)

网页是 http://www.aaaaa.com 或 https://www.aaaaa.com

<meta http-equiv="Content-Security-Policy"

          content="upgrade-insecure-requests; //加上它的话,主网站不管是 http 还是 https,里面的所有都变成https,不好,

                不加上它的话,对于http://common.aaaaa.com/......js 的话,,又不行,说是什么违反script-src规则,哎 

          connect-src 'self' common.aaaaa.com  *.jiathis.com *.cnzz.com cnzz.mmstat.com pyt.zoosnet.net ; 

          default-src 'self' common.aaaaa.com *.jiathis.com *.cnzz.com cnzz.mmstat.com  pyt.zoosnet.net  *.map.qq.com; 

          img-src 'self' common.aaaaa.com *.jiathis.com *.cnzz.com cnzz.mmstat.com  pyt.zoosnet.net  *.map.qq.com;

          style-src 'self' common.aaaaa.com  *.jiathis.com *.cnzz.com cnzz.mmstat.com pyt.zoosnet.net  *.map.qq.com  'unsafe-inline' 'unsafe-eval';

          script-src 'self' common.adbxy.com *.jiathis.com *.cnzz.com cnzz.mmstat.com  pyt.zoosnet.net  *.map.qq.com 'unsafe-inline' 'unsafe-eval'">

由于上面的问题,所以我只好 把所有的 http://common.aaaaa.com   改成  //common.aaaaa.com 了,这样这会自适应(自适配) http://www.aaaaa.com  或 https://www.aaaaa.com 了


Content Security Policy 入门教程

               

作者: 阮一峰            

日期: 2016年9月13日            

跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。

           

为了防止它们,要采取很多编程措施,非常麻烦。很多人提出,能不能根本上解决问题,浏览器自动禁止外部注入恶意脚本?

这就是"网页安全政策"(Content Security Policy,缩写 CSP)的来历。本文详细介绍如何使用 CSP 防止 XSS 攻击。

           

一、简介

CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外部资源可以加载和执行,等同于提供白名单。它的实现和执行全部由浏览器完成,开发者只需提供配置。

CSP 大大增强了网页的安全性。攻击者即使发现了漏洞,也没法注入脚本,除非还控制了一台列入了白名单的可信主机。

两种方法可以启用 CSP。一种是通过 HTTP 头信息的Content-Security-Policy的字段。

           


Content-Security-Policy: script-src 'self'; object-src 'none';
style-src cdn.example.org third-party.org; child-src https:
           

另一种是通过网页的<meta>标签。


<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">
           

上面代码中,CSP 做了如下配置。

  • 脚本:只信任当前域名

  • <object>标签:不信任任何URL,即不加载任何资源

  • 样式表:只信任cdn.example.orgthird-party.org

  • 框架(frame):必须使用HTTPS协议加载

  • 其他资源:没有限制

启用后,不符合 CSP 的外部资源就会被阻止加载。

Chrome 的报错信息。

           

Firefox 的报错信息。

           

二、限制选项

CSP 提供了很多限制选项,涉及安全的各个方面。

2.1 资源加载限制

以下选项限制各类资源的加载。

  • script-src:外部脚本

  • style-src:样式表

  • img-src:图像

  • media-src:媒体文件(音频和视频)

  • font-src:字体文件

  • object-src:插件(比如 Flash)

  • child-src:框架

  • frame-ancestors:嵌入的外部资源(比如<frame>、<iframe>、<embed>和<applet>)

  • connect-src:HTTP 连接(通过 XHR、WebSockets、EventSource等)

  • worker-srcworker脚本

  • manifest-src:manifest 文件

2.2 default-src

default-src用来设置上面各个选项的默认值。


Content-Security-Policy: default-src 'self'
           

上面代码限制所有的外部资源,都只能从当前域名加载。

如果同时设置某个单项限制(比如font-src)和default-src,前者会覆盖后者,即字体文件会采用font-src的值,其他资源依然采用default-src的值。

2.3 URL 限制

有时,网页会跟其他 URL 发生联系,这时也可以加以限制。

  • frame-ancestors:限制嵌入框架的网页

  • base-uri:限制<base#href>

  • form-action:限制<form#action>

2.4 其他限制

其他一些安全相关的功能,也放在了 CSP 里面。

  • block-all-mixed-content:HTTPS 网页不得加载 HTTP 资源(浏览器已经默认开启)

  • upgrade-insecure-requests:自动将网页上所有加载外部资源的 HTTP 链接换成 HTTPS 协议

  • plugin-types:限制可以使用的插件格式

  • sandbox:浏览器行为的限制,比如不能有弹出窗口等。

2.5 report-uri

有时,我们不仅希望防止 XSS,还希望记录此类行为。report-uri就用来告诉浏览器,应该把注入行为报告给哪个网址。


Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
           

上面代码指定,将注入行为报告给/my_amazing_csp_report_parser这个 URL。

浏览器会使用POST方法,发送一个JSON对象,下面是一个例子。


{
  "csp-report": {
    "document-uri": "http://example.org/page.html",
    "referrer": "http://evil.example.com/",
    "blocked-uri": "http://evil.example.com/evil.js",
    "violated-directive": "script-src 'self' https://apis.google.com",
    "original-policy": "script-src 'self' https://apis.google.com; report-uri http://example.org/my_amazing_csp_report_parser"
  }
}
           

           

三、Content-Security-Policy-Report-Only

除了Content-Security-Policy,还有一个Content-Security-Policy-Report-Only字段,表示不执行限制选项,只是记录违反限制的行为。

它必须与report-uri选项配合使用。


Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
           

四、选项值

每个限制选项可以设置以下几种值,这些值就构成了白名单。

  • 主机名:example.orghttps://example.com:443

  • 路径名:example.org/resources/js/

  • 通配符:*.example.org*://*.example.com:*(表示任意协议、任意子域名、任意端口)

  • 协议名:https:data:

  • 关键字'self':当前域名,需要加引号

  • 关键字'none':禁止加载任何外部资源,需要加引号

多个值也可以并列,用空格分隔。


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

如果同一个限制选项使用多次,只有第一次会生效。


# 错误的写法
script-src https://host1.com; script-src https://host2.com

# 正确的写法
script-src https://host1.com https://host2.com
           

如果不设置某个限制选项,就是默认允许任何值。

五、script-src 的特殊值

除了常规值,script-src还可以设置一些特殊值。注意,下面这些值都必须放在单引号里面。

  • 'unsafe-inline':允许执行页面内嵌的&lt;script>标签和事件监听函数

  • 'unsafe-eval':允许将字符串当作代码执行,比如使用evalsetTimeoutsetIntervalFunction等函数。

  • 'nonce值':每次HTTP回应给出一个授权token,页面内嵌脚本必须有这个token,才会执行

  • 'hash':列出允许执行的脚本代码的Hash值,页面内嵌脚本的哈希值只有吻合的情况下,才能执行。

nonce值的例子如下,服务器发送网页的时候,告诉浏览器一个随机生成的token。


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

页面内嵌脚本,必须有这个token才能执行。


<script nonce=EDNnf03nceIOfn39fn3e9h3sdfa>
  // some code
</script>
           

hash值的例子如下,服务器给出一个允许执行的代码的hash值。


Content-Security-Policy: script-src 'sha256-qznLcsROx4GACP2dm0UCKCzCG-HiZ1guq6ZZDob_Tng='
           

下面的代码就会允许执行,因为hash值相符。


<script>alert('Hello, world.');</script>
           

注意,计算hash值的时候,<script>标签不算在内。

除了script-src选项,nonce值和hash值还可以用在style-src选项,控制页面内嵌的样式表。

六、注意点

(1)script-srcobject-src是必设的,除非设置了default-src

因为攻击者只要能注入脚本,其他限制都可以规避。而object-src必设是因为 Flash 里面可以执行外部脚本。

(2)script-src不能使用unsafe-inline关键字(除非伴随一个nonce值),也不能允许设置data:URL。

下面是两个恶意攻击的例子。


<img src="x" onerror="evil()">
<script src="data:text/javascript,evil()"></script>
           

(3)必须特别注意 JSONP 的回调函数。


<script
src="/path/jsonp?callback=alert(document.domain)//">
</script>
           

上面的代码中,虽然加载的脚本来自当前域名,但是通过改写回调函数,攻击者依然可以执行恶意代码。

七、参考链接

(完)

广告(购买广告位)    

网络书签分享平台            

="倾城之链"        

未来世界的幸存者            

未来世界的幸存者        

留言(24条)

                       

感谢教学。

                       

关于web安全,这个repo也可以看一下,https://github.com/FallibleInc/security-guide-for-developers

                       

有收获,http信息头的作用还是很大的~~~

                       

峰哥,
网络上传播的你们阿里安全部门的员工因为使用脚本盗刷月饼被开除的事件,是真的吗?

                       

学习了,这个低版本的浏览器不一定支持的吧

                       

请问真正用到 Web 开发中,需要怎么做?还是说,大部分 Web 框架已经内置了这些功能,不需要开发者担心?如果可以的话,麻烦讲一讲各大 Web 框架都是怎么处理这些问题的?

                       

从百度点进来的,支持一下,希望站长您多出一些好文章。

                       

我们也用到了移动端 屏蔽运营商广告注入,还是很赞的。

                       

我们也用到了移动端 屏蔽运营商广告注入,还是很赞的。

                       

有一点疑惑,望释疑。如果设置了HSTS,还有必要CSP么?

                       

内容安全策略 !== 网页安全政策

                       

IE10 和 IE11 根本就不支持,這個就是半套而已

                       

感谢阮老师又出干货了

                       

文章通俗易懂,感谢阮老师。

                       

「2.1 资源加载限制」部分的 frame-ancestors 应该是 frame-src 吧。

                       

我有个疑问如果web server配置了csp,html文件中也用meta配置了csp,但是配置的value是不同的,这会是什么结果

                       

引用白色风车的发言:
                       

我有个疑问如果web server配置了csp,html文件中也用meta配置了csp,但是配置的value是不同的,这会是什么结果

做了个小实验,在Chrome和Safari中,最终生效的CSP安全策略是权限范围最小的那个,与CSP来自HTTP response header还是meta http-equiv无关。

                       

引用xgqfrms的发言:
                       

内容安全策略 !== 网页安全政策

内容安全策略是网页安全策略的子集

                       

"(2)script-src不能使用unsafe-inline关键字(除非伴随一个nonce值),也不能允许设置data:URL。"

这一点好像是错的。根据“https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src”的资料,是说如果设置了 'nonce' 就会忽略 'unsafe-inline',并不是 'unsafe-inline' 需要伴随着 'nonce'。

                       

大佬,我被一个CSP的问题困住了,求帮助;
客户提出要修复CSP的问题,我就设定了:script-src 'self' 'unsafe-eval' 'unsafe-inline';
客户说不能用'unsafe-inline',要用nonce;
我就修改为script-src 'self' 'unsafe-eval' 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa';
这样OK,但是出现一个新的问题,JSP上面的监听事件全部都报错,例如:onload,onchange,onblur.....;
除了以下2种办法外,有没有其他办法来解决?
1. 添加回'unsafe-inline'
2. document.getElementById("userId").addEventListener('focus', chgOnFocusBgColor(this)); -- > 这个修改量太大了

                       

引用闪闪的星的发言:
                       

"(2)script-src不能使用unsafe-inline关键字(除非伴随一个nonce值),也不能允许设置data:URL。"

这一点好像是错的。根据“https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Security-Policy/script-src”的资料,是说如果设置了 'nonce' 就会忽略 'unsafe-inline',并不是 'unsafe-inline' 需要伴随着 'nonce'。

没错,chrome 测试,添加了nonce, 会忽略'unsafe-inline'

                       

http是透明的,技术上营运商不是可以将这个http头部字段删除吗?

                       

如果是NGINX服务设置了csp头,http的meta标签也设置了csp,两个内容不一样,以哪个为准呀

                       

在https上的iframe里,如果加载http,浏览器会报关于“混合内容”的错误。如果设置csp default-src '*',那可以绕过这个限制吗?

我要发表看法


来自  http://www.ruanyifeng.com/blog/2016/09/csp.html


Content-Security-Policy的实战应用

       
1                字数 1,874阅读 36,115            


今天在浏览微信页面的时候,发现他的script标签上都有个once属性,好奇之下查阅了一番,发现这个属性是和一个http header Content-Security-Policy有关,这个header不看不知道,一看吓一跳啊,一把利器啊

1. 同源限制

首先我们要知道web浏览器为了安全都有会同源限制,什么是同源限制?就是来自 https://mybank.com 的代码应仅能访问 https://mybank.com 的数据,而绝不被允许访问 https://evil.example.com。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据,比如cookie/locaStoragy/IndexDB就遵守同源限制。XMLHettpRequest也是存在同源限制,相信只要开发过web的同学在ajax获取数据时都遇到过这个问题。

同源限制可以一定程度上限制我们的用户信息不会被盗取,但是却没法防止我们的页面被插入不法分子的资源(js,img,css等),毕竟页面上带src的元素资源是不受同源限制的。这些页面上的牛皮鲜让人很讨厌,影响是极其恶劣的:会让我们的js监控误报、会影响用户体验、甚至隐私泄露,所以我们需要对src资源也作出一定的限制,这就得Content-Security-Policy来了

2. Content-Security-Policy(内容安全政策,下文简称为CSP)

  • 主要作用

了解一样东西,我们首先的知道他有啥用,没用不是浪费时间么,毕竟大家都在假装生活很忙的样子,作用呢主要有两点:

  1. 使用白名单的方式告诉客户端(浏览器)允许加载和不允许加载的资源。

  2. 向服务器举报这种强贴牛皮鲜广告的行为,以便做出更加针对性的措施予以绝杀。

  • 怎么用

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

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

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

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

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

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

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

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