前端跨域策略与安全头部实践（CORS、CSP、COOP_COEP 与验证）

概述跨域策略与安全头部是前端安全与资源隔离的核心。通过CORS控制跨域访问, CSP限制资源来源与执行, COOP/COEP建立强隔离环境以提升安全性与性能。关键实践与参数CORS: 精确允许源与方法, 搭配 `Allow-Credentials` 与预检缓存CSP: `default-src 'self'`, 对脚本使用哈希或NonceCOOP: `same-origin`, COEP: `require-corp`, CORP: `same-origin`预检缓存: `Access-Control-Max-Age` 合理设置审计与监控: 记录被拒事件与策略违反示例/配置/实现add_header Access-Control-Allow-Origin $http_origin always;

add_header Access-Control-Allow-Methods "GET,POST,PUT,DELETE,OPTIONS" always;

add_header Access-Control-Allow-Headers "Content-Type,Authorization,X-Requested-With" always;

add_header Access-Control-Allow-Credentials "true" always;

add_header Access-Control-Max-Age 600 always;

add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'" always;

add_header Cross-Origin-Opener-Policy "same-origin" always;

add_header Cross-Origin-Embedder-Policy "require-corp" always;

add_header Cross-Origin-Resource-Policy "same-origin" always;

import http from "http"

const s = http.createServer((req, res) => {

res.setHeader("Access-Control-Allow-Origin", req.headers.origin || "")

res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS")

res.setHeader("Access-Control-Allow-Headers", "Content-Type,Authorization,X-Requested-With")

res.setHeader("Access-Control-Allow-Credentials", "true")

res.setHeader("Access-Control-Max-Age", "600")

res.setHeader("Content-Security-Policy", "default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'")

res.setHeader("Cross-Origin-Opener-Policy", "same-origin")

res.setHeader("Cross-Origin-Embedder-Policy", "require-corp")

res.setHeader("Cross-Origin-Resource-Policy", "same-origin")

res.writeHead(200)

res.end("ok")

})

s.listen(8080)

验证预检请求: 跨域发起 `OPTIONS` 预检, 观察允许方法与头部CSP效果: 注入外部脚本被拒绝, 使用哈希或Nonce的脚本执行成功隔离环境: 在COOP/COEP下使用WebAssembly或SharedArrayBuffer功能, 验证隔离要求满足事件记录: 收集策略违反事件并进行告警注意事项精确控制允许源, 避免通配导致风险CSP需结合构建产物生成哈希或NonceCOOP/COEP可能影响第三方资源加载, 需评估兼容性与CDN策略协作, 保持头部一致