内容安全策略 (CSP) 配置
概述
内容安全策略 (CSP) 是一种安全标准，有助于防止跨站脚本 (XSS)、点击劫持和其他代码注入攻击。在使用 TinaCMS 时，您需要配置 CSP 头以允许连接到 TinaCMS 服务。
必需的 CSP 指令
TinaCMS 需要以下 CSP 指令才能正常运行：
图片来源
TinaCMS 需要访问其资产交付网络以加载图片：
连接来源
TinaCMS 需要连接到多个服务以进行身份验证、内容交付、媒体上传和产品分析：
- identity.tinajs.io - 身份验证和身份服务 (v1)
- identity-v2.tinajs.io - 身份验证和身份服务 (v2)。在 v1→v2 过渡期间，
identity.tinajs.io和identity-v2.tinajs.io都是必需的；管理 UI 根据端点调用两者。 - content.tinajs.io - 内容 API 和数据层
- assets.tinajs.io - 资产管理和交付
- s3.us-east-1.amazonaws.com - 直接媒体上传。TinaCMS 媒体管理器在此主机上将文件
PUT到预签名的 S3 URL。如果没有它，上传将在浏览器控制台中因 CSPconnect-src违规而失败。
实施示例
Next.js 配置
应用路由 (Next.js 13+)
在 next.config.js 中添加 CSP 头：
页面路由
对于页面路由，您也可以使用上述方法在 next.config.js 中配置 CSP。
或者，在中间件中设置 CSP 头：
Netlify 配置
在 netlify.toml 中添加 CSP 头：
Vercel 配置
在 vercel.json 中添加头：
Apache 配置
添加到您的 .htaccess 文件中：
Nginx 配置
添加到您的 nginx 配置中：
自托管注意事项
如果您使用的是 自托管 TinaCMS 设置，您可能需要调整这些 CSP 指令：
- 将 TinaCloud 域替换为您自己的后端 URL
- 确保
connect-src包含您的内容 API 端点 - 将任何自定义媒体存储域添加到
img-src
自托管示例：
故障排除
浏览器控制台中的 CSP 违规
如果您在浏览器控制台中看到 CSP 违规错误：
- 检查错误消息以识别被阻止的资源
- 将适当的域添加到相关的 CSP 指令中
- 彻底测试以确保 TinaCMS 功能正常
常见违规：
- 阻止的图片加载：将域添加到
img-src - 阻止的 API 调用：将域添加到
connect-src - 阻止的内联样式：对于某些 TinaCMS 功能，您可能需要
style-src 'unsafe-inline'
TinaCMS 编辑器未加载
如果 TinaCMS 编辑器无法加载：
- 验证所有必需的域是否包含在
connect-src中 - 检查浏览器控制台中的 CSP 违规
- 确保
frame-src允许 TinaCMS 管理界面（如果使用 iframe 模式）
使用 GitHub 进行身份验证时遇到问题？可能是您的 CSP 配置问题！
测试 CSP 配置
使用浏览器开发者工具验证您的 CSP 配置：
- 打开开发者工具 → 控制台
- 查找 CSP 违规警告
- 点击违规以查看哪些资源被阻止
- 相应地更新您的 CSP
您还可以使用在线工具如 CSP Evaluator 来验证您的策略。
其他资源
最佳实践
- 从严格开始，然后放宽：从严格的 CSP 开始，仅在需要时添加例外
- 使用仅报告模式：在强制执行之前使用
Content-Security-Policy-Report-Only测试 CSP 更改 - 定期审核：随着应用程序的发展，审查和更新您的 CSP
- 记录例外：记录为什么特定域被列入白名单
- 环境特定策略：考虑为开发和生产设置不同的 CSP 规则