安全策略配置

前端安全策略防止 XSS、资源篡改等攻击，保护应用安全。

CSP 内容安全策略

HTML

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
">

CSP 配置说明

指令	说明
default-src	默认资源来源
script-src	JS 资来源
style-src	CSS 资源来源
img-src	图片资源来源
connect-src	API 请求来源

注意：CSP 限制资源加载来源，防止恶意脚本注入。

SRI 子资源完整性

HTML

<script
  src="https://cdn.example.com/js/app.js"
  integrity="sha384-abc123..."
  crossorigin="anonymous"
></script>

生成 SRI Hash

JavaScript

import crypto from 'crypto'
import fs from 'fs'

function generateSRI(filePath) {
  const content = fs.readFileSync(filePath)
  const hash = crypto.createHash('sha384').update(content).digest('base64')
  return `sha384-${hash}`
}

Vite SRI 插件

JavaScript

import sri from 'vite-plugin-sri'

export default defineConfig({
  plugins: [sri()]
})

构建后自动添加 integrity 属性：

HTML

<script integrity="sha384-abc..." crossorigin src="/assets/index.js"></script>

XSS 防护

JavaScript

// 避免 innerHTML
element.textContent = userInput  // 安全

// 避免 eval
// 不要执行用户输入的代码

安全配置清单

配置	目的
CSP	限制资源来源
SRI	验证资源完整性
HTTPS	加密传输
CORS	控制跨域访问
X-Frame-Options	防止 iframe 嵌套

HTTPS 配置

JavaScript

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('key.pem'),
      cert: fs.readFileSync('cert.pem')
    }
  }
})

CORS 服务器配置

JavaScript

// Express CORS 配置
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'https://example.com')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST')
  next()
})

安全最佳实践

所有外部资源使用 HTTPS
配置 CSP 限制资源来源
SRI 验证 CDN 资源完整性
避免执行用户输入的代码

要点总结

CSP 限制资源加载来源
SRI 验证资源完整性防止篡改
HTTPS 加密传输数据
避免 XSS 漏洞的代码模式

📝 发现内容有误？点击此处直接编辑