HTML5安全介绍之内容安全策略（CSP）简介

 万维网的安全策略植根于同源策略。例如www.xuhantao.com -->
<script src='amazing.js'></script>
<button id='amazing'>Am I amazing?</button>
// amazing.js
function doAmazingThings() {
  alert('YOU AM AMAZING!');
}
document.addEventListener('DOMContentReady', function () {
  document.getElementById('amazing')
          .addEventListener('click', doAmazingThings);
});
        无论是否使用CSP，以上的代码其实有更大的优点。内联javascript完全混合了结构和行为，你不应该这么做。另外外联资源更容易进行浏览器缓存，开发者更容易理解，并且便于编译和压缩。如果采用外联代码，你会写出更好的代码。
        内联样式需要以同样的方式进行处理，无论是style属性还是style标签都需要提取到外部样式表中。这样可以防止各式各样神奇的数据泄漏方式。
        如果你必须要有内联脚本和样式，可以为script-src or style-src属性设定'unsafe-inline值。但是不要这样做，禁止内联脚本是CSP提供的最大安全保证，同时禁止内联样式可以让你的应用变得更加安全和健壮。这是一个权衡，但是非常值得。
Eval
        即便攻击者不能直接注入脚本，他可能会诱使你的应用把插入的文本转换为可执行脚本并且自我执行。eval() , newFunction() , setTimeout([string], ...) 和setInterval([string], ...) 都可能成为这种危险的载体。CSP针对这种风险的策略是，完全阻止这些载体。
        这对你构建应用的方式有一些影响：
        通过内置的JSON.parse解析JSON，而不依靠eval。IE8以后的浏览器都支持本地JSON操作，这是完全安全的。
        通过内联函数代替字符串来重写你setTimeout和setInterval的调用方式。例如：  
setTimeout("document.querySelector('a').style.display = 'none';", 10);
        可以重写为：
setTimeout(function () { document.querySelector('a').style.display = 'none'; }, 10);
        避免运行时的内联模版：许多模版库都使用new Function()以加速模版的生成。这对动态程序来说非常棒，但是对恶意文本来说存在风险。
报告
        CSP可以在服务器端阻止不可信的资源对用户来说非常有用，但是对于获取各种发送到服务器的通知来说对我们却非常有用，这样我们就能识别和修复任何恶意脚本注入。为此你可以通过report-uri指令指示浏览器发送JSON格式的拦截报告到某个地址。
Content-Security-Policy: default-src 'self'; ...; report-uri /my_amazing_csp_report_parser;
        报告看起来会像下面这样：
{
  "csp-report": {
    "document-uri": "http://example/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/my_amazing_csp_report_parser"
  }
}
        其中包含的信息会帮助你识别拦截的情况，包括拦截发生的页面（document-uri），页面的referrer，违反页面策略的资源（blocked-uri），所违反的指令（violated-directive）以及页面所有的内容安全策略（original-policy）。
现实用法
        CSP现在在Chrome 16+和Firefox 4+的浏览器上可用，并且它在IE10上预计会获得有限的支持。Safari目前还不支持，但是WebKit每晚构建版已经可用，所以预计Safari将会在下面的迭代中提供支持。
        下面让我们看一些常用的用例：
        实际案例1：社会化媒体widget
Google +1 button包括来自https://apis.google.com的脚本，以及嵌入自https://plusone.google.com的iframe。你的策略需要包含这些源来使用Google +1的按钮。最简单的策略是script-src https://apis.google.com; frame-src https://plusone.google.com。你还需要确保Google提供的JS片段存放在外部的JS文件里。
Facebook的Like按钮有许多种实现方案。我建议你坚持使用iframe版本，因为它可以和你站点的其它部分保持很好的隔离。这需要使用frame-src https://facebook.com指令。请注意，默认情况下，Facebook提供的iframe代码使用的是相对路径//facebook.com，请把这段代码修改为https://facebook.com，HTTP你没有必要可以不使用。
Twitter的Tweet按钮依赖于script和frame，都来自于https://platform.twitter.com（Twitter默认提供的是相对URL，请在复制的时候编辑代码来指定为HTTPS方式）。
        其它的平台有相似的情况，可以类似的解决。我建议把default-src设置为none，然后查看控制台来检查你需要使用哪些资源来确保widget正常工作。
        使用多个widget非常简单：只需要合并所有的策略指令，记住把同一指令的设置都放在一起。如果你想使用上面这三个widget，策略看起来会像下面这样：
script-src https://apis.google.com https://platform.twitter.com; frame-src https://plusone.google.com https://facebook.com https://platform.twitter.com
        实际案例2：防御
        假设你访问一个银行网站，并且希望确保只加载你所需的资源。在这种情况下，开始设置一个默认的权限来阻止所有的内容（default-src ‘none’），并且从这从头构建策略。
        比如，银行网站需要从来自https://cdn.mybank的CDN加载图像、样式和脚本，并且通过XHR连接到https://api.mybank.com/来拉取各种数据，还需要使用frame，但是frame都来自非第三方的本地页面。网站上没有Flash、字体和其他内容。这种情况下我们可以发送最严格的CSP头是：
Content-Security-Policy: default-src 'none'; script-src https://cdn.mybank; style-src https://cdn.mybank; img-src https://cdn.mybank; connect-src https://api.mybank.com; frame-src 'self'
        实际案例3：只用SSL
        一个婚戒论坛管理员希望所有的资源都通过安全的方式进行加载，但是不想真的编写太多代码；重写大量第三方论坛内联脚本和样式的代码超出了他的能力。所以以下的策略将会是非常有用的：
Content-Security-Policy: default-src https:; script-src https: 'unsafe-inline'; style-src https: 'unsafe-inline'
        尽管default-src指定了https，脚本和样式不会自动继承。每个指令将会完全覆盖默认资源类型。
未来
        W3C的Web应用安全工作组正在制定内容安全策略规范的细节，1.0版本将要进入最后修订阶段，它和本文描述的内容已经非常接近。而public-webappsec@邮件组正在讨论1.1版本，浏览器厂商也在努力巩固和改进CSP的实现。
        CSP 1.1在画板上有一些有趣的地方，值得单独列出来：
        通过meta标签添加策略：CSP的首选设置方式是HTTP头，它非常有用，但是通过标记或者脚本设置会更加直接，不过目前还未最终确定。WebKit已经实现了通过meta元素进行权限设置的特性，所以你现在可以在Chrome下尝试如下的设置：在文档头添加<metahttp-equiv="X-WebKit-CSP" content="[POLICY GOES HERE]">。
        你甚至可以在运行时通过脚本来添加策略。
        DOM API：如果CSP的下一个迭代添加了这个特性，你可以通过javascript来查询页面当前的安全策略，并根据不同的情况进行调整。例如在eval()是否可用的情况下，你的代码实现可能会有些许不同。这对JS框架的作者来说非常有用；并且API规范目前还非常不确定，你可以在规范草案的脚本接口章节找到最新的迭代版本。
        新的指令：许多新指令正在讨论中，包括script-nonce：只有明确指定的脚本元素才能使用内联脚本；plugin-types：这将限制插件的类型；form-action：允许form只能提交到特定的来源。
        如果你对这些未来特性的讨论感兴趣，可以阅读邮件列表的归档或者加入邮件列表。
        本文译自：http://www.HTML5/">html5rocks.com/en/tutorials/security/content-security-policy/
摘自：蒋宇捷的博客

• 没有相关文章