内容安全策略(Content Security Policy, CSP)是一种额外的安全层,用于帮助检测和减轻某些类型的攻击,包括跨站脚本(XSS)、数据注入攻击等。通过CSP,你可以指定哪些资源可以被加载和执行,从而限制潜在的恶意代码的影响。

配置CSP的基本步骤

1. 定义CSP策略

首先,你需要定义一个适合你网站需求的CSP策略。这通常通过HTTP头部Content-Security-Policy来完成。以下是一些常见的指令及其含义:

  • default-src: 指定默认加载策略,适用于未明确指定策略的所有资源类型。
  • script-src: 指定允许加载脚本文件的来源。
  • style-src: 指定允许加载样式表的来源。
  • img-src: 指定允许加载图片的来源。
  • connect-src: 限制可以从页面或应用发出的连接类型(如AJAX请求、WebSockets)。
  • font-src: 指定允许加载字体的来源。
  • object-src: 指定允许加载插件(如Flash)的来源。
  • media-src: 指定允许加载音频或视频资源的来源。
  • frame-src: 指定允许嵌入的框架的来源。

例如,如果你想仅允许从你的域名加载脚本和样式,并且只允许图片来自你的域名和特定的外部域名,可以设置如下策略:

Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' https://external-domain.com;
2. 添加CSP到HTTP头部

将CSP策略添加到HTTP响应头中。具体方法取决于你的服务器配置:

  • Apache: 在.htaccess文件或者虚拟主机配置中添加:

    <IfModule mod_headers.c>
      Header set Content-Security-Policy "default-src 'self'; script-src 'self';"
    </IfModule>
    
  • Nginx: 在服务器块中添加:

    add_header Content-Security-Policy "default-src 'self'; script-src 'self';";
    
  • Node.js (Express): 使用中间件来设置响应头:

    app.use((req, res, next) => {
      res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self';");
      next();
    });
    
  • HTML Meta标签: 虽然不推荐(因为它不能防止内联脚本),但也可以在HTML文档中使用<meta>标签来设置CSP:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self';">
    
3. 测试与调整策略

一旦设置了CSP策略,重要的是进行彻底测试以确保没有意外阻止了必要的资源加载。你可以暂时使用report-only模式来测试策略而不实际阻止任何资源:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-violation-report-endpoint/

这样,浏览器会报告违反CSP的情况,但不会阻止任何资源加载。根据报告调整策略直至满意为止。

4. 监控与维护

启用CSP后,持续监控CSP违规报告并根据需要更新策略是非常重要的。长期来看,保持CSP策略的有效性和适应性可以帮助保护你的网站免受新的威胁。

Logo

火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。

更多推荐