星贝工具

CSP策略生成器

生成Content-Security-Policy策略，防止XSS攻击和数据注入，保护Web应用安全

CSP策略配置

默认策略
JavaScript脚本
CSS样式
图片资源
网络请求(AJAX/WebSocket)
Web字体
iframe/嵌入页面
音频/视频
插件/嵌入内容

快速预设

生成的CSP策略

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; frame-src 'none'; frame-ancestors 'none'; object-src 'none'; embed-src 'none'; media-src 'self'">
Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; frame-src 'none'; frame-ancestors 'none'; object-src 'none'; embed-src 'none'; media-src 'self'
export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          'http-equiv': 'Content-Security-Policy',
          content: 'default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; font-src 'self' data:; frame-src 'none'; frame-ancestors 'none'; object-src 'none'; embed-src 'none'; media-src 'self''
        }
      ]
    }
  }
})
default-src:'self'
script-src:'self'
style-src:'self'
img-src:'self' data:
connect-src:'self'
font-src:'self' data:
frame-src:'none'
media-src:'self'

使用说明

什么是CSP？

Content Security Policy (CSP) 是HTTP响应头，用于控制浏览器可以加载哪些资源，是防止XSS和数据注入攻击的重要安全措施。

指令说明

  • default-src - 默认策略，所有其他指令的fallback
  • script-src - JavaScript脚本源
  • style-src - CSS样式源
  • img-src - 图片源
  • connect-src - AJAX、WebSocket连接
  • font-src - Web字体源
  • frame-src - iframe源
  • media-src - 音视频源

源值说明

  • 'self' - 同源(相同域名、协议、端口)
  • 'none' - 禁止加载
  • 'unsafe-inline' - 允许内联脚本/样式
  • 'unsafe-eval' - 允许eval()
  • 'data:' - 允许data URI

实施建议

  • 从'self'开始，逐步添加需要的源
  • 使用Report-URI收集违规报告
  • 在测试环境先启用report-only模式
  • 定期审查和更新CSP策略

常见问题

为什么启用CSP后页面无法正常工作？

CSP策略可能过于严格，检查浏览器控制台的CSP违规报告，添加缺失的源。

如何允许第三方脚本？

在对应的src指令中添加第三方域名，如: script-src 'self' https://cdn.example.com

inline脚本不工作了怎么办？

避免使用内联脚本和样式，将代码移到外部文件，或使用nonce或hash。

© 2026 星贝工具