前言
WEB 应用越来越复杂，前端所承担的也不再仅仅是切图、写界面的任务。作为一个前端工程师，掌握必要的 WEB 安全相关的知识，也是必要的。
这里收集整理了 HTTP 中和安全相关的头信息内容，了解这些头信息，在提升网站的安全性上，是有不少帮助的。
安全相关的头信息
Content-Security-Policy
内容安全策略 CSP (Content-Security-Policy) 的主要目的是减少和报告 XSS 攻击。
实现的方式是通过白名单机制，也就是提供可信赖的外部资源来源的白名单，浏览器根据白名单来获取资源。
来看下 MDN 上提供的一个例子：
1 | Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com; report-uri http://reportcollector.example.com/collector.cgi |
default-src 'self';: 表示各种内容允许从文档所在的源获取(不包括其子域名)img-src *;: 图片可以从任何地方加载media-src media1.com media2.com;: 多媒体文件仅允许从 media1.com 和 media2.com 加载(不包括其子域名)script-src userscripts.example.com: 可运行脚本仅允许来自于userscripts.example.comreport-uri: 设置这个选项，表示启用发送违规报告，也就是会把违规的信息 (JSON 格式) 发送到配置的 URI 地址
参考:
Strict-Transport-Security
如果你的网站启动了 HTTPS，可以使用这个配置，告诉浏览器你的网站只能通过 HTTPS 来访问。
作用：例如我们在访问 HTTP 网站时，网站再自动跳转到 HTTPS，这个过程中，存在中间人攻击潜在威胁，因为在跳转到 HTTPS 之前，用户信息是未加密的。配置 STS 可以让浏览器自动替换 HTTP 为 HTTPS 请求。
示例：
1 | Strict-Transport-Security: max-age=1000; includeSubDomains |
max-age: 设置在浏览器收到这个请求后的 1000 秒的时间内凡是访问这个域名下的请求都使用HTTPS请求。
includeSubDomains 该网站的所有子域名也启用该规则。
X-Content-Type-Options
我们知道，浏览器会根据响应头的 Content-Type 来辨别请求资源的类型，例如："text/css" 表示 style 类型。但是如果不指定 MIME 类型或者指定错误，浏览器会进行 MIME 类型嗅探，猜测资源的类型，然后进行解析。而这个行为可能会被恶意攻击。
配置方式如下:
1 | X-Content-Type-Options: nosniff |
作用：通过这个配置，可以让浏览器按服务端返回的指定类型进行内容解析。
X-Frame-Options
这个响应头是用来告诉浏览器，这个页面是否可以被 <frame>, <iframe>, <embed>, <object> 嵌入。
作用：网站可以避免被嵌入到别人的网站中，从而避免点击劫持 (clickjacking)。
配置示例：
1 | X-Frame-Options: deny |
注意：这个功能，也可以通过 CSP 中配置
frame-ancestors: none来实现，以后可能会慢慢淘汰非标准的X-Frame-Options
X-XSS-Protection
顾名思义，这个是用来设置防御 XSS 攻击的。目前这个一般浏览器都是默认开启的。
配置示例：
1 | X-XSS-Protection: 1; mode=block |
作用：这个配置启用 XSS 过滤，如果检测到有 XSS 攻击，阻止页面加载。
Set-Cookie
Set-Cookie 中的 Secure 和 HttpOnly 配置是用来保证 cookie 的安全的。
Secure: 配置这个安全属性，让 cookie 只在 HTTPS 中加密传输。
HttpOnly: 这个配置可以禁止通过 JavaScript 来访问 cookie，防止 XSS 攻击。
参考：Set-Cookie
Access-Control-Allow-Origin
这个响应头前端会比较熟悉，因为跨域请求里 (CORS)，就和这个有关系。
通过配置这个响应头，可以指定哪些域有权限访问该资源。
配置方法：
1 | Access-Control-Allow-Origin: <origin>|* |
Cache-Control && Expires
这个其实是属于缓存配置，但是，我们需要注意的是，针对一些具有敏感数据，例如用户信息、交易页面，这些不应该配置缓存，以免因为页面缓存而导致敏感信息的泄露。
具体配置可以看之前的文章：浏览器的缓存机制
总结
这些 HTTP 安全配置，有助于提升网站的安全性，而从这些配置里，我们也能学到一些安全防御方面的思路：
- 传输信息加密
- XSS 过滤
- 白名单机制
- 同源策略
参考资料
- 本文链接： https://blog.hhking.cn/2019/08/25/http-security-headers/
- 版权声明： 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
