前端必须知道的 HTTP 安全头配置

在本文中，我将介绍经常使用的安全头信息设置，并对每一个响应头设置给出一个示例。

Content-Security-Policy

内容安全策略（CSP）经常使用来经过指定容许加载哪些资源来防止跨站点脚本攻击。在接下来所介绍的全部安全头信息中，CSP 多是建立和维护花费时间最多的并且也是最容易出问题的。在配置你的网站 CSP 过程当中，要当心完全地测试它，由于阻止某些资源有可能会破坏你的网站的功能。

功能

CSP 的主要目标是减小和报告 XSS 攻击， XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。使得恶意脚本有可能在用户的浏览器中执行，由于浏览器信任其内容来源，即便有时候这些脚本并不是来自该站点的服务器当中。

CSP 经过指定容许浏览器加载和执行那些资源，使服务器管理者有能力减小或消除 XSS 攻击的可能性。 一个 CSP 兼容的浏览器将会仅执行从白名单域获取获得的脚本文件，忽略全部其余的脚本（包括内联脚本）。

示例

一个最佳的 CSP 多是下面这样(注释按照配置值的顺序)，在站点包含的每一部分资源请求相关都加入域名限制。

# 全部的内容(好比: JavaScript,image,css,fonts,ajax request, frams, html5 Media等)均来自和站点的同一个源（不包括其子域名）
# 容许加载当前源的图片和特定源图片
# 不容许 objects（好比 Flash 和 Java）
# 仅容许当前源的脚本下载和执行
# 仅容许当前源的 CSS 文件下载和执行
# 仅容许当前源的 frames
# 限制 <base> 标签中的 URL 与当前站点同源
# 仅容许表单提交到当前站点

Content-Security-Policy: default-src 'self'; img-src 'self' https://img.com; object-src 'none'; script-src 'self'; style-src 'self'; frame-ancestors 'self'; base-uri 'self'; form-action 'self';
复制代码

关于 CSP 更加详细的介绍能够看 content-security-policy.com/

Strict-Transport-Security

Strict-Transport-Security(HSTS) 告诉浏览器该站点只能经过 HTTPS 访问，若是使用了子域，也建议对任何该站点的子域强制执行此操做。

功能

一个站点若是接受了一个 HTTP 请求，而后跳转到 HTTPS，用户可能在开始跳转前，经过没有加密的方式和服务器对话。这样就存在中间人攻击的潜在威胁，跳转过程可能被恶意网站利用来直接接触用户信息，而不是原来的加密信息。

网站经过HTTP Strict Transport Security通知浏览器，这个网站禁止使用HTTP方式加载，浏览器应该自动把全部尝试使用HTTP的请求自动替换为HTTPS请求。

示例

# 浏览器接受到这个请求后的 3600 秒内的时间，凡是访问这个域名下的请求都是用https请求
# 指定 includeSubDomains 此规则适用该站点下的全部子域名

Strict-Transport-Security: max-age=3600; includeSubDomains
复制代码

X-Content-Type-Options

X-Content-Type-Options 响应头至关于一个提示标志，被服务器用户提示浏览器必定要遵循 Content-Type 头中 MIME 类型的设定，而不能对其进行修改。

功能

它减小了浏览器可能“猜想”某些内容不正确的意外应用程序行为，例如当开发人员将一个页面标记为“HTML”，但浏览器认为它看起来像JavaScript并试图将其呈现为JavaScript时。这个头将确保浏览器始终按照服务器设置的MIME类型来解析。

示例

X-Content-Type-Options: nosniff
复制代码

Cache-Control

Cache-Control 通用消息头字段，被用于在 http 请求和响应中，经过指定指令来实现缓存机制。缓存指令是单向的，这意味着在请求中设置的指令，不必定被包含在响应中。

功能

这一个比其余的稍微复杂一些，由于你可能须要针对不一样的内容类型使用不一样的缓存策略。

任何包含有敏感信息的网页，例如用户我的信息页面或客户结账页面，都应该设置为 no-cache。缘由是防止共享计算机上的某人按下后退按钮或浏览历史并查看我的信息。

示例

Cache-Control: no-cache
复制代码

X-Frame-Options

X-Frame-Options 响应头是用来给浏览器指示容许一个页面能否在 , , 或者 中展示的标记。站点能够经过确保网站没有被嵌入到别人的站点里面，从而避免点击劫持攻击。

功能

若是恶意的站点将你的网页嵌入到 iframe 标签中, 在你不知道的状况下打开并点击恶意网站的某个按钮，恶意网站可以执行一个攻击经过运行一些 JavaScript 将捕获点击事件到 iframe 中,而后表明你与网站交互。

将 X-Frame-Options 设置为 deny 能够禁止该页面在任何域中的 ifram 标签中展现。

X-Frame-Options 设置能够由 CSP 的 frame-ancestors 配置所代替。

示例

X-Frame-Options: DENY # 表示该页面不容许在 frame 中展现，即使是在相同域名的页面中嵌套也不容许。

X-Frame-Options: SAMEORIGIN # 表示该页面能够在相同域名页面的 frame 中展现。

X-Frame-Options: ALLOW-FROM uri # 表示该页面能够在指定来源的 frame 中展现。
复制代码

Access-Control-Allow-Origin

Access-Control-Allow-Origin 响应头指定了该响应的资源是否被容许与给定的 origin 共享。

功能

能够被用来可解决浏览器的跨域请求。

好比一个站点 A 页面中发起一个 AJAX 请求到 站点 B， A B 不一样源。正常状况下由于浏览器的同源策略将不会把 B 的响应结果返回给 A, 除非 B 在响应头中设置容许 A 站点发起请求。

示例

Access-Control-Allow-Origin: * # 容许全部域请求

Access-Control-Allow-Origin: http://someone.com # 容许特定域请求
复制代码

Set-Cookie

Set-Cookie 响应头被用来由服务器端向客户端发送 cookie。

示例

# domain: 指定 cookie 能够送达的域名，默认为当前域名（不包含子域名）
# Secure: 只有在 https 协议时才会被发送到服务端。然而，保密或敏感信息永远不要在 HTTP cookie 中存储或传输，由于整个机制从本质上来讲都是不安全的
# HttpOnly: cookie 不能使用 JavaScript代码获取到

Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value>; Secure; HttpOnly
复制代码

X-XSS-Protection

X-XSS-Protection 响应头是Internet Explorer，Chrome和Safari的一个功能，当检测到跨站脚本攻击 (XSS)时，浏览器将中止加载页面。

示例

X-XSS-Protection: 1; mode=block  # 启用XSS过滤。若是检测到 XSS 攻击，浏览器将不会清除页面，而是阻止页面加载。
复制代码

总结

设置 HTTP 头信息是相对快速和简单的对于网站的数据保护、XSS 攻击和点击劫持等攻击。有针对性的设置这些头信息，你的网站的安全性将会有不错的提升。

相关面试题

查看原文

关注github每日一道面试题详解