【译】使用内容安全策略(CSP)加固应用

原文： https://60devs.com/using-content-security-policy.html

     内容安全策略（CSP）是一种浏览器机制，有助于阻止跨站脚本（XSS）攻击。

 

     什么是XSS（跨站脚本攻击）？它是一种攻击者为获取安全数据权限向网页注入客户端脚本或注入恶意软件的攻击方式。一旦注入脚本获得页面权限，它需要发送数据或以某种方式与攻击者交互。常见阻止XSS的措施即阻止恶意的客户端脚本注入。然后，实际情况常常难以确保网站或应用完全免受注入。考虑到注入仍是可能，我们能做些什么？答案是CSP。

 

     CSP是配置每个网页使用HTTP头。当浏览器加载HTML文档时，HTTP请求的响应头交付文档源于请求使用内容安全策略配置 HTML文档的全部内容。

 

     绝大多数浏览器支持Content-Security-Policy这个特殊头，并且IE10++支持X-Content-Secuirity-Policy。IE9及以下版本不支持CSP。

     

     配置

     CSP通过配置一个单独头（Content-Security-Policy或X-Content-Security-Policy）。这个头是一组基于分号分割的有效指令的字符串。指令定义了可安全通信的源列表。以下指令用于各种资源类型例如图片，xhr，样式，脚本：

     child-src 控制嵌套的浏览上下文和工作执行

     connect-src 控制网络活动例如XMLHttpRequest::Send

     font-src 控制字体加载

     form-action 控制表单提交

     frame-ancestors 控制嵌入的iframes，对象，程序等

     img-src 控制图片加载

     media-src 控制视频和音频源

     object-src 控制插件

     script-src 控制执行脚本

     style-src 控制CSS源

     

     上述列表不完全。所以个人建议阅读更独特性的完整规范。例如：可以配置一个端点用于报告违犯CSP规则。

     每个指令我列出可安全使用的一个或多个源。可用值为：

     'none'-源置空，不匹配任何内容

     'self'-与当前来源相同，但不包含子域

     'unsafe-inline'-允许内联JS和CSS例如内联的<script>，<style>

     'unsafe-eval'-允许文本到JS的机制例如eval

     任何有效的host表达式（通配符支持）-例如http://60dev.com

     

     关键字和host表达式可联合使用。例如，script-src 'self' https://google-analytics.com 意味着在此页面上从当前域名或 https://google-analytics.com 加载的脚本允许执行。

 

     本文的其余部分默认内容安全策略生成合适的一种形式在各种软件中使用，例如web服务器或框架。使用csp-manager（用于教育用途）工具生成配置  

npm install csp-manager -g
csp-manager init csp-manager
generate nginx

     NGINX使用CSP

     在NGINX位置添加以下代码：

add_header Content-Security-Policy "base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'"
add_header X-Content-Security-Policy "base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'" 

     Browsersync使用CSP

     browser sync配置配件（gulp）添加以下代码：

browserSync.init({
　　server: {
       baseDir:"./",
       middleware:function (req, res, next) {
       　　res.setHeader("Content-Security-Policy","base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'");
 　　　　　 res.setHeader("X-Content-Security-Policy","base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'");
　　　　　　next();
　　　　}
　　}
});

     Ember-CLI使用CSP

     config/environment.js添加以下代码：

ENV.contentSecurityPolicy = {
     "base-uri": "'self'",
     "connect-src": "'self'",
     "default-src": "'self'",
     "font-src": "'self'",
     "frame-ancestors": "'self'",
     "frame-src": "'self'",
     "img-src": "'self'",
     "manifest-src": "'self'",
     "media-src": "'self'",
     "object-src": "'self'",
     "script-src": "'self'",
     "style-src": "'self'"
     };

     Apache使用CSP

     Apache配置文件添加以下代码：

<IfModule mod_headers.c>
     Header set Content-Security-Policy "base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'"
     Header set X-Content-Security-Policy "base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'"
</IfModule> 

     NodeJS使用CSP

     

     KOAJS

     KOAJS中间件添加以下代码：

 

this.set("Content-Security","base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'");
this.set("X-Content-Security-Policy","base-uri 'self'; connect-src 'self'; default-src 'self'; font-src 'self'; frame-ancestors 'self'; frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src 'self'; style-src 'self'"); 

     KOAJS基于lusca

     KOAJS应用添加以下代码：

app.use(lusca({
    csp: {
        "base-uri": "'self'",
        "connect-src": "'self'",
        "default-src": "'self'",
        "font-src": "'self'",
        "frame-ancestors": "'self'",
        "frame-src": "'self'",
        "img-src": "'self'",
        "manifest-src": "'self'",
        "media-src": "'self'",
        "object-src": "'self'",
        "script-src": "'self'",
        "style-src": "'self'" },
}));

     检查CSP

     使用Firefox检查CSP对当前页面是否生效。按以下操作，打开目标网页并按 Shift + F2 打开开发者工具。输入 security csp，按 Enter 你会看到如下内容：

     其他浏览器你需要检查响应头以确信当前的CSP。