文章中英模式

布鲁斯前端面试题目 - Content Security Policy

深入解析Content Security Policy (CSP)的原理、配置和最佳实践。了解如何通过CSP防止XSS攻击和保护网站安全。

文章中英模式

懒得看文章？那就来看视频吧

内容安全政策(CSP)是什么？

内容安全政策(CSP)就像网站的保安系统，告诉浏览器哪些资源可以加载，哪些不行。它主要用来防止XSS攻击（有人在你网站注入恶意程序代码）。

CSP运作原理：

  网站                         浏览器
    |                           |
    |-- 设定CSP规则 ---------->  |
    |                           |-- 检查资源是否符合规则
    |<-- 只加载符合规则的资源 --   |
    |                           |
    |<-- 阻挡不符合规则的资源 --   |

简单来说，你可以告诉浏览器：「只执行来自我自己网站的代码，拒绝其他来源」。

<!-- 只允许自己网站的资源 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

💡 CSP的主要目标：

1. 防止XSS攻击
2. 监控并报告安全违规
3. 控制资源加载来源
4. 提升网站整体安全性

CSP如何工作？

CSP通过HTTP头部或HTML meta标签实现，告诉浏览器哪些资源可以加载和执行。浏览器随后会强制执行这些政策，阻止加载不符合政策的资源。

通过HTTP头部实现

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src *

通过HTML meta标签实现

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' https://trusted-cdn.com; img-src *">

CSP指令与来源值

常用CSP指令

指令	说明
`default-src`	所有资源的默认策略
`script-src`	JavaScript来源白名单
`style-src`	CSS样式来源白名单
`img-src`	图片来源白名单
`connect-src`	限制可通过XHR、WebSockets等连接的来源
`font-src`	字体来源白名单
`frame-src`	iframe来源白名单
`media-src`	音频和视频来源白名单
`object-src`	Flash和其他插件来源白名单
`report-uri`	违规报告发送的URL

常用来源值

来源值	说明
`'self'`	只允许来自同一来源的资源
`'none'`	不允许任何来源
`'unsafe-inline'`	允许内联资源（如内联<script>标签）
`'unsafe-eval'`	允许使用eval()和类似功能
`https:`	只允许HTTPS协议的资源
`example.com`	允许特定域名的资源
`*.example.com`	允许特定域名及其子域名的资源
`*`	允许任何来源（不推荐使用）

CSP配置实例

基础安全配置

// 只允許從當前域名加載所有資源
Content-Security-Policy: default-src 'self'

混合内容配置

// 配置多種資源類型
Content-Security-Policy: default-src 'self';
                         script-src 'self' https://cdn.jsdelivr.net;
                         style-src 'self' https://fonts.googleapis.com;
                         img-src 'self' https://images.unsplash.com;
                         font-src 'self' https://fonts.gstatic.com;
                         connect-src 'self' https://api.example.com;
                         frame-src https://www.youtube.com

报告模式

// 僅報告違規，不阻止內容加載
Content-Security-Policy-Report-Only: default-src 'self';
                                    report-uri https://example.com/csp-reports

严格配置（适合高安全性应用）

// 嚴格限制所有資源來源
Content-Security-Policy: default-src 'none';
                         script-src 'self';
                         style-src 'self';
                         img-src 'self';
                         font-src 'self';
                         connect-src 'self';
                         form-action 'self';
                         frame-ancestors 'none';
                         base-uri 'self';
                         block-all-mixed-content;
                         upgrade-insecure-requests

内联脚本的处理

CSP默认会阻止内联脚本，但许多应用依赖于内联脚本。

解决方案：

使用 nonce 属性：为每个内联脚本添加随机生成的nonce值

<!-- 使用nonce值 -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'nonce-2726c7f26c'">
<script nonce="2726c7f26c">
  alert('Hello, world!');
</script>

🔥 常见面试题目

(一) 什么是内容安全政策(CSP)? 它解决了哪些安全问题?

解答：内容安全政策(CSP)就像网站的安全守门员，它告诉浏览器哪些资源可以加载，哪些必须拒绝。简单说，它限制了JavaScript、CSS和图片等资源的来源。

CSP工作原理：

网站设定规则 → 浏览器执行规则 → 阻挡不符合的资源

// 设定CSP的两种方式
// 1. HTTP头部
Content-Security-Policy: default-src 'self'

// 2. HTML meta标签
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'">

CSP主要解决四大安全问题：

安全问题	CSP解决方式	简单例子
XSS攻击	阻止恶意脚本执行	script-src 'self'
点击劫持	控制页面是否可被嵌入框架	frame-ancestors 'none'
数据窃取	限制可连接的API来源	connect-src 'self' api.example.com

即使网站有安全漏洞，CSP也能作为最后防线，限制攻击者能做的事情，大幅降低安全风险。