江苏龙网

  1. 主页 > 生活百科 > >

深入浅出为什么你的网页需要CSP?【前端篇】( 二 )

CSP


深入浅出为什么你的网页需要CSP?【前端篇】

文章插图
 
如果页面中非得用内联的写法 ， 还有种方式 。即页面中这些内联的脚本或样式标签 ， 赋值一个加密串 ， 这个加密串由服务器生成 ， 同时这个加密串被添加到页面的响应头里面 。
<script nonce="EDNnf03nceIOfn39fn3e9h3sdfa">  // 这里放置内联在 HTML 中的代码</script> 页面 HTTP 响应头的 Content-Security-Policy配置中包含相同的加密串：
Content-Security-Policy: script-src 'nonce-EDNnf03nceIOfn39fn3e9h3sdfa'
深入浅出为什么你的网页需要CSP?【前端篇】

文章插图
 
配置示例示例 1所有内容均来自站点的同一个源 (不包括其子域名)
Content-Security-Policy: default-src 'self'
示例 2允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)
Content-Security-Policy: default-src 'self' *.trusted.com
示例 3允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得) ， 所有脚本必须从特定主机服务器获取可信的代码.
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
在这里 ， 各种内容默认仅允许从文档所在的源获取, 但存在如下例外:
  • 图片可以从任何地方加载(注意 "*" 通配符) 。
  • 多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名) 。
  • 可运行脚本仅允许来自于userscripts.example.com 。
示例 4一个线上银行网站的管理者想要确保网站的所有内容都要通过SSL方式获取 ， 以避免攻击者窃听用户发出的请求 。
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
该服务器仅允许通过HTTPS方式并仅从onlinebanking.jumbobank.com域名来访问文档 。
示例 5一个在线邮箱的管理者想要允许在邮件里包含HTML ， 同样图片允许从任何地方加载 ， 但不允许JavaScript或者其他潜在的危险内容(从任意位置加载) 。
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
注意这个示例并未指定script-src 。在此CSP示例中 ， 站点通过 default-src 指令的对其进行配置 ， 这也同样意味着脚本文件仅允许从原始服务器获取 。
上报你的数据当检测到非法资源时 ， 除了控制台看到的报错信息 ， 也可以让浏览器将日志发送到服务器以供后续分析使用 。接收报告的地址可在 Content-Security-Policy 响应头中通过 report-uri指令来配置 。当然 ， 服务端需要编写相应的服务来接收该数据 。
配置 report-uri
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;`服务端收到请求：
{  "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"  }}Report OnlyCSP 提供了一种报告模式 ， 该模式下资源不会真的被限制加载 ， 只会对检测到的问题进行上报  ， 以 JSON 数据的形式发送到 report-uri 指定的地方 。
通过指定 Content-Security-Policy-Report-Only 而不是 Content-Security-Policy ， 则开启了报告模式 。
Content-Security-Policy-Report-Only: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;当然 ， 你也可以同时指定两种响应头 ， 各自里的规则还会正常执行 ， 不会互相影响 。比如：
Content-Security-Policy: img-src *;Content-Security-Policy-Report-Only: img-src ‘none’; report-uri http://reportcollector.example.com/collector.cgi这里图片还是会正常加载 ， 但是 img-src ‘none’ 也会检测到并且发送报告 。


推荐阅读


上一篇：玫瑰花茶正常是煮还是泡,玫瑰花茶的作用哪些

下一篇：玫瑰花茶的禁忌：九大禁忌要注意,玫瑰花茶的副作用有哪些