前言
随着互联网应用的日益遍及，网络安全问题变得越来越紧张。HTTP 安全头是一种简朴而有效的机制，用于增强 Web 应用的安全性。正如 Bruce Schneier 所说：“安全不是产品，而是一个过程。”通过正确设置 HTTP 安全头，可以防止多种常见的攻击，如跨站脚本攻击（XSS）、点击劫持（Clickjacking）、中心人攻击（Man-in-the-Middle Attack）等。本文将详细介绍几种常用的 HTTP 安全头及其设置方法，帮助开发者构建更加安全的 Web 应用。
一、常用的 HTTP 安全头
1.1 Strict-Transport-Security (HSTS)
原理：HSTS 欺压浏览器利用 HTTPS 毗连，而不是 HTTP。一旦设置了 HSTS 头，浏览器会记着这个指令，并在将来的一段时间内主动将所有对该域名的 HTTP 请求重定向为 HTTPS 请求。
设置：
- Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
- max-age：指定浏览器应记着 HSTS 指令的时间，单位为秒。比方，31536000 表示一年。
- includeSubDomains：指示 HSTS 指令实用于所有子域名。
- preload：将站点添加到浏览器的预加载列表中，确保浏览器始终利用 HTTPS 毗连到该站点。
留意事项
- 确保你的应用已经完全支持 HTTPS，否则启用 HSTS 可能会导致用户无法访问你的站点。
- 测试情况不要启用 preload，以免影响测试。
1.2 Content-Security-Policy (CSP)
原理：CSP 是一种安全机制，用于限定网页可以加载的资源。通过设置 CSP 头，可以有效地防止恶意脚本的执行，淘汰 XSS 攻击的风险。
设置：
- Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://trusted.cdn.com; style-src 'self' 'unsafe-inline' https://trusted.cdn.com
- default-src：默认源，假如没有指定其他指令，则所有资源都遵照这个源。
- script-src：答应加载的脚本源。
- style-src：答应加载的样式源。
- ‘self’：表示当前域名。
- ‘unsafe-inline’：答应内联脚本和样式。
- ‘unsafe-eval’：答应 eval() 和类似的函数。
- https://trusted.cdn.com：答应加载来自指定 CDN 的资源。
留意事项
- 只管避免利用 unsafe-inline 和 unsafe-eval，除非确实必要。
- 利用报告机制（report-uri 或 report-to）来收集 CSP 违规报告，以便及时发现息争决问题。
1.3 X-Frame-Options (XFO)
原理：XFO 用于防止点击劫持攻击，通过限定页面是否可以在 <frame>、<iframe>、<embed> 或 <object> 中表现来实现。
设置：
- DENY：不答应页面在任何框架中表现。
- SAMEORIGIN：只答应页面在同一域名下的框架中表现。
- ALLOW-FROM uri：答应页面在指定 URI 的框架中表现。
留意事项
- 假如你的应用不需要嵌入到其他页面中，建议利用 DENY。
- 假如需要嵌入到同一域名下的页面中，利用 SAMEORIGIN。
1.4 X-Content-Type-Options
原理：X-Content-Type-Options 用于防止浏览器猜测 MIME 范例，从而淘汰因 MIME 范例误判导致的安全问题。
设置：
- X-Content-Type-Options: nosniff
- nosniff：克制浏览器猜测 MIME 范例，欺压浏览器按照响应头中的 Content-Type 处理惩罚资源。
留意事项
- 始终设置 nosniff，除非有特别情况需要浏览器猜测 MIME 范例。
1.5 X-XSS-Protection
原理：X-XSS-Protection 是一种浏览器内置的防护机制，可以主动检测并阻止某些范例的 XSS 攻击。虽然现代浏览器已经徐徐镌汰了这个头，但在一些旧版浏览器中仍然有效。
设置：
- X-XSS-Protection: 1; mode=block
- 1：启用 XSS 过滤器。
- mode=block：假如检测到 XSS 攻击，阻止页面加载。
留意事项
- 只管现代浏览器不再推荐利用这个头，但在某些情况下仍然可以作为一个额外的安全层。
1.6 Referrer-Policy
原理：Referrer-Policy 用于控制 HTTP 请求的 Referer 头，防止敏感信息通过 Referer 头泄露。
设置：
- Referrer-Policy: strict-origin-when-cross-origin
- no-referrer：不发送 Referer 头。
- no-referrer-when-downgrade：从 HTTPS 页面导航到 HTTP 页面时不发送 Referer 头。
- same-origin：只在同源请求中发送 Referer 头。
- origin：发送源信息，但不发送路径信息。
- strict-origin：在跨站请求中不发送 Referer 头，在同站请求中发送源信息。
- strict-origin-when-cross-origin：在跨站请求中不发送 Referer 头，在同站请求中发送完备 Referer 头。
- unsafe-url：始终发送完备的 Referer 头。
留意事项
- 根据应用的需求选择合适的策略，平衡安全性和功能性。
1.7 Feature-Policy
原理：Feature-Policy（现在称为 Permissions Policy）用于控制浏览器的功能，防止不必要的功能被滥用。
设置：
- Permissions-Policy: geolocation=('self' 'https://trusted.cdn.com'), microphone=(), camera=()
- geolocation：控制地理位置功能。
- microphone：控制麦克风功能。
- camera：控制摄像头功能。
- self：表示当前域名。
- https://trusted.cdn.com：答应指定域名利用该功能。
- ()：克制利用该功能。
留意事项
- 根据应用的需求禁用不必要的功能，淘汰潜在的安全风险。
二、实践案例
为了更好地理解怎样在现实项目中应用这些安全头，我们来看一个简朴的示例。假设我们有一个利用 Express 框架的 Node.js 应用，需要设置多个 HTTP 安全头。
2.1 项目结构
- /my-app
- │── /public
- │ └── index.html
- ├── /server
- │ └── app.js
- └── package.json
- <!-- public/index.html -->
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Secure App</title>
- </head>
- <body>
- <h1>Welcome to the Secure App</h1>
- </body>
- </html>
- // server/app.js
- const express = require('express');
- const helmet = require('helmet');
- const app = express();
- // 使用 helmet 库设置多个安全头
- app.use(helmet({
- contentSecurityPolicy: {
- useDefaults: true,
- directives: {
- 'default-src': ["'self'"],
- 'script-src': ["'self'", "'unsafe-inline'", "'unsafe-eval'", "https://trusted.cdn.com"],
- 'style-src': ["'self'", "'unsafe-inline'", "https://trusted.cdn.com"]
- }
- },
- frameguard: { action: 'deny' },
- ieNoOpen: true,
- referrerPolicy: { policy: 'strict-origin-when-cross-origin' },
- permissionsPolicy: { features: { geolocation: ["'self'", "https://trusted.cdn.com"], microphone: [], camera: [] } }
- }));
- // 自定义 HSTS 头
- app.use((req, res, next) => {
- res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains; preload');
- next();
- });
- // 自定义 XSS 防护头
- app.use((req, res, next) => {
- res.setHeader('X-XSS-Protection', '1; mode=block');
- next();
- });
- // 自定义 MIME 类型嗅探防护头
- app.use((req, res, next) => {
- res.setHeader('X-Content-Type-Options', 'nosniff');
- next();
- });
- // 静态文件服务
- app.use(express.static('public'));
- // 启动服务器
- app.listen(3000, () => {
- console.log('Server is running on port 3000');
- });
设置完成后，可以通过浏览器的开发者工具（如 Chrome DevTools）查看 HTTP 响应头，确保所有安全头都已正确设置。
- 打开浏览器开发者工具：
- 在 Chrome 中，按 F12 或右键点击页面选择“检查”。
- 切换到“Network”标签。
- 访问应用页面
- 在所在栏中输入 http://localhost:3000 并回车。
- 查看响应头
- 在 Network 标签下，选择一个请求，查看“Headers”选项卡中的“Response Headers”部门，确保所有安全头都已正确设置。
结语
HTTP 安全头是掩护 Web 应用免受多种常见攻击的有效手段。通过正确设置 HSTS、CSP、X-Frame-Options、X-Content-Type-Options、X-XSS-Protection、Referrer-Policy 和 Feature-Policy 等安全头，可以显著提高应用的安全性。作为开发者，我们应该始终保持鉴戒，不停学习和应用最新的安全技术和最佳实践，确保我们构建的应用既强盛又安全。
通过本文的详细介绍，盼望能够帮助您更好地理解和应用 HTTP 安全头，从而构建更加安全可靠的 Web 应用。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
