HTTP (Hypertext Transfer Protocol) 是互联网上最常用的应用层协议之一。它定义了客户端和服务器端之间进行数据通信的规范。作为前端工程师，了解 HTTP 协议的安全相关头部信息至关重要。本文将对常见的安全相关头部信息进行详细介绍，并提供相关示例代码。
1. X-XSS-Protection
X-XSS-Protection 头部信息是一种跨站脚本攻击（XSS）防御措施。当浏览器检测到有恶意的 XSS 代码时，它会根据该头部信息中的设置采取相应的行动。以下是该头部信息的设置值及其含义：
0：禁用 XSS 过滤器。1：开启 XSS 过滤器并阻止渲染受到攻击的页面。1; mode=block：开启 XSS 过滤器并阻止渲染受到攻击的页面。如果浏览器无法确定是否存在 XSS 攻击，则强制停止页面渲染。
<!-- 启用 XSS 过滤器并阻止渲染受到攻击的页面 --> <meta http-equiv="X-XSS-Protection" content="1">
2. X-Content-Type-Options
X-Content-Type-Options 头部信息可以防止浏览器绕过 MIME 类型嗅探的安全漏洞。该头部信息有两个可选值：
nosniff：告诉浏览器不要绕过 MIME 类型嗅探。none：禁用 MIME 类型嗅探。
<!-- 禁用 MIME 类型嗅探 --> <meta http-equiv="X-Content-Type-Options" content="none">
3. X-Frame-Options
X-Frame-Options 头部信息可以防止跨站点请求伪造攻击 (CSRF) 和点击劫持攻击。 该头部信息有三个可选值：
DENY：拒绝所有网站嵌入。SAMEORIGIN：允许相同域名下的网站嵌入。ALLOW-FROM uri：允许特定来源的网站嵌入。
<!-- 允许相同域名下的网站嵌入 --> <meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
4. Content-Security-Policy
Content-Security-Policy (CSP) 是一种用于减少跨站点脚本攻击 (XSS) 和其他代码注入攻击的安全机制。CSP 通过白名单机制来控制哪些资源可以加载到页面中，包括 JavaScript、样式表、图片等等。以下是该头部信息的设置值及其含义：
default-src 'self'：只允许加载来自同一站点的资源。default-src 'self' *.example.com：只允许加载来自同一站点和 example.com 的资源。
<!-- 只允许加载来自同一站点的资源 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'">
总结
HTTP 协议的安全相关头部信息对于前端工程师来说是必备的知识。本文介绍了常见的四种安全相关头部信息，并提供了相应的示例代码。在开发过程中，可以根据需求灵活设置这些头部信息，以提高网站的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70149
