哎呀， 今天在浏览微信页面的时候，发现他的script标签上都有个once属性，好奇之下查阅了一番，发现这个属性是和一个http header Content-Security-Policy有关，这个header不看不知道，一看吓一跳啊，一把利器啊

正宗。 大家知道吗，Web平安这东西，说起来全是泪。我们天天喊着防XSS，防注入，但是黑客们总是比我们聪明一点点。不过呢， 今天我要给大家安利一个超级厉害的东西，叫做Content Security Policy，简称CSP。这玩意儿简直就是Web世界的防盗门，装上它，你的平安感瞬间爆棚！

先说说我们要搞清楚一个概念，叫同源限制。什么是同源限制？就是来自... 导语本文简述了几种主要的web平安漏洞,并就如何防范XSS攻击详细介绍了内容平安策略的概念及应用。作者|邓晓,腾讯web前端开发助理工程师 传统的防御手段虽然有效， 但CSP提供了更深层的保护——它通过白名单机制，告诉浏览器只加载和施行来自特定来源的资源。这就像是你去参加派对，你给保安一份名单，只有名单上的人才能进来其他的统统挡在门外。是不是很霸道？但是很管用！ CSP到底是什么鬼？ CSP全称Content Security Policy ,可以直接翻译为内容平安策略,说白了,就是为了页面内容平安而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源。通过CSP协定,让WEB处于一个平安的运行环境中。 有什么用? 我们知道前端有个很著名的 同源策略 ,简单说,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响平安.但是这个策略是个双刃剑,挡住恶意代码的一边也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获... 文章浏览阅读5.8k次。内容平安策略是一种由W3C定义的规范,旨在增强Web应用平安性,防止跨站脚本等攻击。本文详细介绍了CSP的原理、版本、模式及配置方法,演示了如何使用CSP保护网站资源。 内容平安策略(Content Securi... 默认情况下,违规报告并不会发送。为启用发送违规报告,你需要指定report-uri策略指令,并提供至少一个URI地址去递交报告。这个地址可以是相对于当前网站的相对地址,也可以是一个绝对地址: Content-Security-Policy: default-src'none'; style-srccdn.example.com; report-uri /_/csp-reports 复制代... 简单 CSP的核心机制是通过设置 HTTP 响应头 Content-Security-Policy，定义哪些外部资源可以被加载和施行。当浏览器解析页面时会先检查该策略配置，再决定是否允许加载指定的资源。这就像是一个严格的安检员，每一个资源都要过安检。 怎么配置这个玩意儿？ 配置CSP其实不难，主要有两种方式。一种是通过HTTP响应头，另一种是通过Meta标签。但是要注意，当http header和meta标签都设置了的时候,浏览器会优先使用http header设置的csp策略。所以HTTP头才是老大，Meta标签只能算是个备胎。 通过Content-Security-Policy: 策略集 或Content-Security-Policy-Report-Only: 策略集 来配置。 Content-Security-Policy-Report-Only表示不会限制加载的内容,只是对加载内容不符合策略要求的进行上报,通过HTTP 请求发送到指定URI。故Content-Security-Policy-Report-Only必须与report-uri选项配合使用。 除限制可以加载内容的域,服务器还可指明哪种协议允许使用;比如 ,服务器可指定所有内容必须通过HTTPS加载。一个完整的数据平安传输策略不仅强制使用HTTPS进行数据传输,也为所有的cookie标记平安标识 cookies with secure flag,并且提供自动的重定向使得HTTP页面导向HTTPS版本。网站也可以使用 Strict-Transport-Security HTTP头部确保连接它的浏览器只使用加密通道。 5.CSP使用 CSP分类: Content-Security-Policy 配置好并启用后,不符合 CSP 的外部资源就会被阻止加载。 那些让人头大的指令 CSP的指令一大堆，看着就头晕。但是没办法，为了平安，硬着头皮也要学。下面我随便列举几个，大家感受一下。 default-src默认策略， 这是老大，其他没设置的都听它的。 script-src控制JavaScript， 这个最重要，毕竟XSS主要靠脚本。 img-src控制图片，防止加载恶意图片。 style-src控制CSS，防止样式被篡改。 connect-src控制Ajax请求，防止数据被偷走。 还有一些特殊的值， 比如： 'self'只允许同源资源，这是最常用的。 'none'禁止所有资源，最严格。 'unsafe-inline'允许内联脚本/样式。 'unsafe-eval'允许eval等动态代码施行。 https:允许所有HTTPS资源。 为了让大家更直观地理解这些指令的区别， 我特意做了一个表格，大家凑合着看吧。 指令名称 功能描述 推荐平安值 风险等级 default-src 作为所有其他指令的兜底设置 'self' 低 script-src 定义页面可以施行的JavaScript脚本来源 'self' nonce-xxx 高 img-src 控制图片资源的加载来源 'self' data: https: 中 style-src 控制CSS样式表的来源 'self' 中 object-src 控制Flash等插件对象的加载 'none' 极高 connect-src 限制XMLHttpRequest、WebSocket等连接 'self' 高 实战演练：看看代码怎么写 光说不练假把式。下面我们通过两个个可以直接运行的示例来理解CSP的工作原理。大家注意看，这两个例子区别大了去了。 先说说我们来看一个没有CSP保护的页面。这个页面简直就是裸奔，谁都可以进来搞破坏。 XSS攻击演示 这个页面没有CSP保护， 尝试输入恶意脚本： 显示输入内容 警告：这个页面没有CSP保护，恶意脚本可以施行！ 外部资源加载 加载外部脚本 加载外部图片 具体效果如下图： 看到了吧， 在这个页面里你想干嘛就干嘛，eval随便用，外部脚本随便加载。这简直就是黑客的天堂！但是如果我们加上CSP呢？情况就会完全不一样。 显示输入内容 平安：这个页面有CSP保护，恶意脚本会被阻止！ 加载外部脚本 加载外部图片 尝试使用eval 看到了吗？加上CSP之后eval不能用了外部脚本加载失败了世界清静了。这就是CSP的威力！ 除了 Internet Explorer 之外目前所有主流现代浏览器均已原生支持 CSP。所以开发者可以放心地在项目中启用并使用这一平安功能。 但是配置CSP也不是一蹴而就的。你可能会遇到各种各样的问题，比如页面白屏了样式乱了脚本不施行了。这时候不要慌，我们要学会使用Content-Security-Policy-Report-Only模式。这个模式不会阻止任何东西，只是把违规行为记录下来发到你指定的URI。这样你就可以先观察一段时间，看看哪些策略需要调整，然后再正式上线。 针对AppScan检测到的 Content-Security-Policy 头缺失或不平安问题,本文介绍了如何在拦截器或过滤器中添加CSP头以增强网页平安。具体展示了不同AppScan版本下CSP头的设置方法。 Content-Security-Policy 头缺失或不平安 用AppScan对url进行检测出现 Content-Security-Policy 头缺失或不平安问题 解决方法: 在拦截器或者过滤器中添加 response.setHeader; 12621平安规则版本中可以只写 default-src ‘self’, 但是在17339规则版本中 default-src ‘self’; script-src ‘self’; frame... 一下 CSP是一项强大的平安技术，实际应用过程中应该记住以下原则： 1. 最小权限原则：只授予必要的权限。不要为了省事就写个`default-src *`，那样跟没设有什么区别。 2. 平衡平安与功能：在平安性和开发便利性之间找到平衡点。有时候为了功能，可能需要稍微放宽一点限制，但要尽量控制范围。 3. 渐进实施：从报告模式开始，逐步转向强制施行。不要一上来就全站开启，那样可能会把你自己坑死。 4. 持续监控：定期检查违规报告，优化策略。黑客的攻击手段在变，你的策略也要跟着变。 想象一下 如果你的网站允许用户输入评论，而恶意用户输入了这样的脚本： 如果没有CSP，这段脚本就会施行，用户的cookie可能就被偷走了。但是有了CSP，这段脚本就会被浏览器无情地拦截，并在控制台里报错。是不是很爽？ 文章浏览阅读3.2k次。本文介绍了CSP的概念及其作用,详细解释了如何通过CSP策略保护网站免受恶意代码攻击,一边提供了多种指令及值的使用说明,并展示了服务器端配置示例。 前端平安配置之Content-Security-Policy 最新推荐文章于 2025-11-28 03:30:00 发布 转载于... 答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现 需要说明的一点是,目前主流的浏览器都已支持csp.所以我们可以放心大胆的用了. 指令说明 指令就是csp中用来定义策略... 再说说 我想说的是平安无小事。CSP虽然不能解决所有问题，但它绝对是你Web平安防线上的重要一环。希望大家都能重视起来赶紧给自己的网站加上CSP吧！ 大家如果使用过程中有问题的话欢迎评论区沟通交流，别纠结...！