正文：Hey 家人们，今天我们来聊聊如何通过内容安全策略（CSP）白名单来精细化控制我们的 Web 应用安全。这不仅是技术干货，更是提升网站安全性的必备技能！
🛡️【CSP 与白名单】内容安全策略（CSP）是一种强大的安全机制，它旨在防止跨站脚本攻击（XSS）、数据注入等安全问题。而 CSP 白名单则允许我们指定特定来源的内容加载和执行，不受 CSP 严格限制，从而在保障安全的同时，也能灵活地使用外部资源。
🔧【代码实现】在代码中，NEXT_PUBLIC_CSP_WHITELIST环境变量可能包含一个或多个可信来源的列表。当这个环境变量存在并且应用处于生产环境时，将isWhiteListEnabled设置为true，表示启用了 CSP 白名单机制。
🚀【案例详解】接下来，我将通过几个案例，详细说明如何在实际中应用 CSP 白名单，以及成功和失败的处理逻辑。
1. 允许特定的 CDN 加载脚本
场景描述
你的应用依赖于https://cdn.example.com来加载 jQuery 库。你需要确保只有来自该 CDN 的脚本可以被加载。
成功处理逻辑
当 CSP 白名单包含https://cdn.example.com时，浏览器会允许从该 CDN 加载脚本，页面正常工作。
// 环境变量配置NEXT_PUBLIC_CSP_WHITELIST="https://cdn.example.com";
// CSP配置const csp = { "script-src": ["'self'", "https://cdn.example.com"],};
// 在HTML中加载jQuery<script src="https://cdn.example.com/jquery.min.js"></script>
复制代码
失败处理逻辑
如果 CSP 白名单不包含https://cdn.example.com或者尝试加载来自其他来源的脚本（如https://malicious.com/malicious.js），浏览器会阻止加载并抛出错误。
<!-- 这个脚本会被阻止 --><script src="https://malicious.com/malicious.js"></script>
<!-- 浏览器控制台输出类似以下错误 -->Refused to load the script 'https://malicious.com/malicious.js' because it violates the following Content Security Policy directive: "script-src 'self' https://cdn.example.com".
复制代码
2. 允许特定的 API 域名进行 AJAX 请求
场景描述
你的应用需要从https://api.example.com获取用户数据。你需要确保所有的 AJAX 请求只能发送到这个域名。
成功处理逻辑
当 CSP 白名单包含https://api.example.com时，浏览器会允许向该 API 发送请求，请求成功返回数据。
// 环境变量配置NEXT_PUBLIC_CSP_WHITELIST="https://api.example.com";
// CSP配置const csp = { "connect-src": ["'self'", "https://api.example.com"],};
// 发送AJAX请求fetch('https://api.example.com/user') .then(response => response.json()) .then(data => console.log(data));
复制代码
失败处理逻辑
如果 CSP 白名单不包含https://api.example.com或者尝试向其他域名发送请求（如https://malicious-api.com），浏览器会阻止请求并抛出错误。
// 这个请求会被阻止fetch('https://malicious-api.com/user') .catch(error => console.error('Request failed:', error));
// 浏览器控制台输出类似以下错误Refused to connect to 'https://malicious-api.com/user' because it violates the following Content Security Policy directive: "connect-src 'self' https://api.example.com".
复制代码
3. 允许特定的域名加载图片
场景描述
你的应用需要从https://images.example.com和https://avatars.example.com加载图片资源。你需要确保图片只能从这两个域名加载。
成功处理逻辑
当 CSP 白名单包含https://images.example.com和https://avatars.example.com时，浏览器会允许从这些域名加载图片，图片正常显示。
// 环境变量配置NEXT_PUBLIC_CSP_WHITELIST="https://images.example.com,https://avatars.example.com";
// CSP配置const csp = { "img-src": ["'self'", "https://images.example.com", "https://avatars.example.com"],};
// 在HTML中加载图片<img src="https://images.example.com/image.jpg" alt="Example Image"><img src="https://avatars.example.com/avatar.png" alt="User Avatar">
复制代码
失败处理逻辑
如果 CSP 白名单不包含https://images.example.com或者尝试加载来自其他来源的图片（如https://malicious.com/image.jpg），浏览器会阻止加载并抛出错误。
<!-- 这个图片会被阻止 --><img src="https://malicious.com/image.jpg" alt="Malicious Image">
<!-- 浏览器控制台输出类似以下错误 -->Refused to load the image 'https://malicious.com/image.jpg' because it violates the following Content Security Policy directive: "img-src 'self' https://images.example.com https://avatars.example.com".
复制代码
4. 允许特定的域名嵌入 iframe
场景描述
你的应用需要嵌入来自https://www.youtube.com的视频。你需要确保只有来自该域名的 iframe 可以被嵌入。
成功处理逻辑
当 CSP 白名单包含https://www.youtube.com时，浏览器会允许嵌入来自该域名的 iframe，视频正常播放。
// 环境变量配置NEXT_PUBLIC_CSP_WHITELIST="https://www.youtube.com";
// CSP配置const csp = { "frame-src": ["'self'", "https://www.youtube.com"],};
// 在HTML中嵌入YouTube视频<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"></iframe>
复制代码
失败处理逻辑
如果 CSP 白名单不包含https://www.youtube.com或者尝试嵌入来自其他来源的 iframe（如https://malicious.com/iframe.html），浏览器会阻止嵌入并抛出错误。
<!-- 这个iframe会被阻止 --><iframe src="https://malicious.com/iframe.html"></iframe>
<!-- 浏览器控制台输出类似以下错误 -->Refused to frame 'https://malicious.com/iframe.html' because it violates the following Content Security Policy directive: "frame-src 'self' https://www.youtube.com".
复制代码
🔑【总结】通过上述详细案例，我们可以看到 CSP 白名单不仅定义了哪些来源的内容是可信的，还展示了在实际使用中的成功和失败处理逻辑。启用 CSP 白名单后，浏览器会严格遵守这些规则，防止加载不受信任的内容，从而提升应用的安全性。
标签：#CSP #Web 安全 #XSS 防护 #技术分享 #安全实践
评论