内容安全策略（CSP）旨在通过为开发人员提供对允许加载页面的资源以及允许执行的脚本的细粒度控制来降低跨站点脚本攻击的风险。
我正在尝试将内容加载到 IFrame 中，因此我实现了 Content-Security-Policy 标头： 内容安全策略：框架祖先http://*.example.com/abc.html。 我能够加载 con...
烧瓶应用程序中嵌入的 matplotlib 绘图的安全内容安全策略是什么？
我制作了一个 Flask 应用程序，当我尝试确保其安全用于生产时，它不会显示由 matplotlib 生成的绘图。 为了部署这个应用程序，我一直在设置安全标头。 当我设置时，response.hea...
如何在 Apache 中设置内容安全策略以阻止来自所有外部来源的表单帖子？
我有一个表格可以接受来自自我和外部来源的表格帖子。如何在 Apache/2.4.29 (Ubuntu) Web 服务器中输入正确的语法以阻止来自所有外部来源的表单帖子？我哈...
未捕获的 EvalError：拒绝将字符串计算为 JavaScript，因为“unsafe-eval”不是以下内容安全策略指令中允许的脚本源：“script-src 'unsafe-...
为什么 iframe 强制执行父页面的内容安全策略而不是它自己的
我正在使用 iframe 并尝试使用 csp 属性和沙箱属性定义自己的内容安全策略 (CSP)。这是我的 iframe 的 HTML 结构： <question vote="0"> <p>我正在使用 iframe 并尝试使用 <pre><code>Content Security Policy (CSP)</code></pre> 属性和 <pre><code>csp</code></pre> 属性定义自己的 <pre><code>sandbox</code></pre>。这是我的 iframe 的 HTML 结构：</p> <pre><code><iframe sandbox="allow-scripts" csp="default-src *; script-src * 'unsafe-inline' 'unsafe-eval'; style-src * 'unsafe-inline';" srcdoc="...myContent" ></iframe> </code></pre> <p>问题是，即使我在 iframe 本身中显式定义了 <pre><code>csp</code></pre> 属性，iframe 中的脚本和样式仍然会根据父页面的 CSP 被阻止。例如，以下脚本无法加载并出现错误：</p> <pre><code>Refused to load the script 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js' because it violates the following Content Security Policy directive: "script-src 'nonce-m5JxllYLAaAYeolMNX0mQg==' 'strict-dynamic'". </code></pre> <p>此限制（<pre><code>'nonce-m5JxllYLAaAYeolMNX0mQg=='</code></pre>和<pre><code>'strict-dynamic'</code></pre>）来自于<strong>父页面</strong>的CSP，而不是iframe。我的理解是 iframe 上的 <pre><code>csp</code></pre> 属性应该允许它强制执行自己的 CSP 规则并忽略父页面的 CSP。</p> <h3><strong>问题：</strong></h3> <ol> <li>为什么 iframe 仍然强制执行父页面的 CSP 而不是它自己的？</li> <li>有没有办法完全隔离 iframe 的 CSP，以便它根据 <pre><code>csp</code></pre> 属性中定义的策略加载资源？</li> <li>这种行为是预期的，还是现代浏览器中的错误或限制？</li> </ol> <h3><strong>其他背景：</strong></h3> <ul> <li>iframe 包含 <pre><code>sandbox="allow-scripts"</code></pre> 属性来隔离其上下文。</li> <li>我使用 <pre><code>srcdoc</code></pre> 和 <pre><code>csp</code></pre> 属性动态地将内容注入到 iframe 中。</li> </ul> </question> <answer tick="false" vote="0"> <p>朋友，你应该注意两件事......</p> <p>第一：<pre><code>sandbox</code></pre>标签中的<pre><code><iframe></code></pre>属性与CORS无关。这与文档功能有关。这意味着如果没有 <pre><code>allow-scripts</code></pre>，那么 <pre><code><iframe></code></pre> 的内容将无法运行脚本。</p> <blockquote> <p><pre><code>iframe[sandbox="allow-scripts"]</code></pre>：允许页面运行脚本（但不创建弹出窗口）。如果不使用该关键字，则不允许该操作。 来自<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#allow-scripts" rel="nofollow noreferrer">MDN</a></p> </blockquote> <p>第二：<pre><code>csp</code></pre>标签中的<pre><code><iframe></code></pre>属性是<strong>实验性</strong>，只会对<pre><code><iframe></code></pre>内容强制执行CORS策略。</p> <blockquote> <p>针对嵌入资源强制执行的内容安全策略。 来自<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#csp" rel="nofollow noreferrer">MDN</a></p> </blockquote> <p>因此，如果您的 <pre><code>index.html</code></pre> 和 <pre><code><iframe></code></pre> 具有这两个属性，则 <pre><code>index.html</code></pre> 上下文将仅针对该 <pre><code>csp</code></pre> 的源通过 <pre><code><iframe></code></pre> 属性更新其 CORS 策略。该源将有自己的 CORS 策略标头（不受 <pre><code>csp</code></pre> 文件的 <pre><code>index.html</code></pre> 属性影响）。</p> <p>发生这种情况是因为<pre><code>index.html</code></pre>无法更改目标<pre><code>src</code></pre>CORS策略（如果可以，那么任何网站都将容易受到黑客攻击）。</p> <p>如果您的<pre><code><iframe></code></pre>加载同源的内容，那么您使用它们的方式就不需要这两个属性（在我看来）。</p> </answer> </body></html>
如何解决“Cross-Origin-Opener-Policy 策略会阻止 window.close 调用”。在 Vite/React 中用于 Google 登录？
我在前端使用 Vite/React，我想从 Google 获取授权码，以便我可以在 Django 后端完成其余的登录。 我遇到的问题是，当 Google 登录弹出窗口时
我有一个非常奇怪的问题，我无法弄清楚。 我将使用 example.com，但我的域是可公开访问的 URL。 我在 HTML 中设置了元元素： 我有一个非常奇怪的问题，我无法弄清楚。 我将使用 example.com，但我的域是可公开访问的 URL。 我在 HTML 中设置了 meta 元素： <meta http-equiv="content-security-policy" content="default-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://example.com;"> 注意connect-src 'self' https://example.com;"。 但是，如果我尝试使用 fetch 请求 URL，如下所示： const response = await fetch(baseUrl + generatePath, { method: 'POST', headers: { Authorization: 'Bearer 1234', 'Content-Type': 'text/event-stream', }, body: JSON.stringify(requestBody), }) 请求甚至没有发出，我可以在浏览器控制台中看到错误： 拒绝连接到“https://example.com/api/generate”，因为它违反了以下内容安全策略指令：“default-src 'self'”。请注意，“connect-src”未明确设置，因此“default-src”用作后备。 这非常奇怪，因为我已经设置好了。 更奇怪的是，当我在 locahost:5173 上运行它时，发出请求，在端口 3000 上失败。 当我将其部署到 Azure 并从不同的域访问它时，也会发生同样的情况。 我只是不知道如何解决它。我见过有关 HTTP 请求标头的类似问题，但根本没有发出任何请求。 它发生在 Chrome 和 Opera 浏览器上。 这个问题的关键在于，在 localhost:3000 后面以及 Azure 中，存在带有 NGINX 代理请求的 docker 镜像。 所以我查看了我的配置，结果发现我的设置与 HTML 中设置的设置冲突。 部分NGINX配置： location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri /index.html =404; # This must be removed. add_header Content-Security-Policy "default-src 'self'; img-src 'self' data:;"; }
我对我的申请进行了 ZAP 评估，我收到了一个具有高置信度的标志“CSP：通配符指令”。尽管如此，我还是没能找到通配符指令的来源...
ASP.NET Core 应用程序中的 Strict-Transport-Security max-age 未更新到 31536000
我正在尝试在 ASP.NET Core 应用程序中设置 Strict-Transport-Security 标头，以强制使用最长期限为 1 年（31536000 秒）的 HTTPS，以及 includeSubDomains 和预加载。然而，
Wordpress 内容安全策略阻止外部 Mailchimp 事件处理程序
我已经设置了我的 CPS 并使用随机生成的随机数将我的所有脚本列入白名单。当前的 CSP 似乎适用于其他脚本，但它会阻止嵌入的 mailchimp 邮件订阅活动
如果父级和 iframe 有不同的 CSP 限制，则应用哪一个？
如果有一个使用以下 CSP 标头提供服务的父页面： CSP：沙盒允许表单； 在该父页面中，我有一个 具有以下代码 - <iframe sandbox="</desc> <question vote="0"> <p>如果有一个使用以下 CSP 标头提供服务的父页面：</p> <pre><code>CSP: sandbox allow-forms; </code></pre> <p>在该父页面中，我有一个 <pre><code><iframe></code></pre> 有以下代码 -</p> <pre><code><iframe sandbox="allow-downloads" src="https://someremotedomain.com" /> </code></pre> <p>哪些沙箱属性将被优先考虑？在这个特定的示例中，iframe 内容是否能够发起下载？</p> </question> <answer tick="false" vote="0"> <p>父级 CSP 限制优先于 iframe 的沙箱属性。在这种情况下，下载将被阻止，因为父 CSP 不允许 <pre><code>allow downloads</code></pre>。</p> </answer> </body></html>
Fullcalendar.io 无法在 safari 浏览器上使用 CSP 随机数
我在我的 Asp.Net core Web 应用程序中使用 FullCalendar.io。我还使用 NetEscapades.AspNetCore.SecurityHeaders 设置了 CSP。 以下是定义： 策略.AddContentSecurityPolicy(生成器=> { ...
我在 vercel 上部署了后端。但当我打开链接时，它显示了此错误。我不知道在哪里修复它，因为我是初学者。有人可以帮我解决这个问题吗？ 维塞尔错误 我已经...
Spring Boot 和 PrimeReact 的 CSP 问题
我们有一个单页面应用程序，它使用 Spring Boot 作为后端，React 作为前端。我们使用 PrimeReact 作为 React 的组件库。 我们将 React 应用程序打包为静态...
在给定页面上多次调用以下浏览器控制台错误消息 拒绝应用内联样式，因为它违反了以下规定 内容安全策略指令：“style-src '
我按照这篇文章将CSP添加到我的react应用程序中，它可以工作，但是当使用MUI和样式组件时，它们注入的样式不起作用，并且我找不到任何解决方案......
如何在 NelmioCORSBundle 中设置 CSP 框架祖先
我正在尝试将 Paddle.com checkout 集成到 Symfony 6 项目中。 将结帐窗口链接集成到 Paddle.js 的页面如下所示： <p>我正在尝试将 Paddle.com checkout 集成到 Symfony 6 项目中。</p> <p>将结帐窗口链接集成到 Paddle.js 的页面如下：</p> <pre><code><script src="https://cdn.paddle.com/paddle/v2/paddle.js"></script> </code></pre> <p>现在，当尝试打开结账层时，我在控制台上看到以下错误： <a href="https://i.sstatic.net/06235tCY.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvMDYyMzV0Q1kucG5n" alt="enter image description here"/></a></p> <p>所以我想我必须设置“frame-ancestors”内容安全策略，该策略将允许本地主机（在本例中）打开包含来自 Paddle.com 的内容的 iframe。</p> <p>现在有了 NelmioCORSBundle，我仍坚持使用相应的配置：</p> <pre><code>paths: '^/checkout/': allow_origin: ['^https://(.+.)?localhost:8000'] allow_headers: ['frame-ancestors'] </code></pre> <p>不幸的是，这不起作用。如果有人能给我指出正确的方向，我将不胜感激，因为到目前为止我在网上找不到示例。</p> <p>提前致谢</p> </question> <answer tick="false" vote="0"> <p>NelmioCorsBundle 不处理错误所指的 CSP（内容安全策略）。</p> <p>幸运的是，有一个 NelmioSecurityBundle 可以帮助 CSP： <a href="https://symfony.com/bundles/NelmioSecurityBundle/current/index.html" rel="nofollow noreferrer">https://symfony.com/bundles/NelmioSecurityBundle/current/index.html</a></p> <p>它可能看起来有点吓人，因为它有大量的可配置选项，但在你的情况下，你可以这样做：</p> <pre><code>csp: enforce: true report-only: false directives: default-src: [ 'self' ] script-src: - "'self'" - "https://cdn.paddle.com" frame-src: - "https://*.paddle.com" frame-ancestors: - "'self'" - "http://localhost:8000" </code></pre> <p>如果将仅报告设置为 true，则可以在不强制执行 csp 的情况下进行测试。</p> <p>frame-src 允许您在 iframe 中包含 Paddle 内容。</p> <p><strong>请注意，这可能需要您进行一些调整。</strong></p> </answer> </body></html>
为 @google/model-viewer 设置 Content-Security-Policy 标头
我想使用 @google/model-viewer 显示 3D 模型，但我的 CSP 标头阻止了查看器创建的内联样式。有没有办法让查看者使用随机数或其他方式？ <...
如何使用 Apache httpd.conf 和 mod_cspnonce 替换 Angular index.html 中的 CSP nonce 值？
尝试使用mod_cspnonce模块在apache httpd服务器上托管的角度应用程序中设置CSP随机数。 能够构建以下策略并可以看到响应标头包含正确的随机数 -
我想实现异步加载CSS文件以获得更快的性能。不过我也想要安全性，所以我希望我的网站有 CSP。 我想实现异步加载 CSS 文件以获得更快的性能。不过我也想要安全性，所以我希望我的网站有 CSP。 <link rel="stylesheet" media="print" class="AOcssLoad" .... onload="this.onload=null;this.media='all';" /> 无需详细说明，它希望我避免像 onload 和许多其他属于元素一部分的 JS。 我希望它看起来像这样 <link rel="stylesheet" media="print" class="AOcssLoad" href="" /> 请建议一种无需上面使用的内联 JS 即可实现异步 CSS 文件的方法。 我们可以使用内联 <script> 标签或单独的 JS 文件。 我尝试了以下代码作为内联 JS。下面是 JS 的 HTML， <script nonce="" type="text/javascript" data-exclude="true"> var Script = document.getElementsByClassName("AOcssLoad"); for (var i = 0 ; i < Script.length; i++) { this.className += " Loading"; Script[i].addEventListener("load", function({ this.onload=null;this.media="all"; this.className += " OnLoad"; }); } </script> 虽然它有效，但非常不可靠。 我无法理解这个问题，但我想说它只在 50% 的情况下有效，有时只需重新加载页面就可以解决/打破问题，而对 css/html/cache 没有明显的更改。 请帮助我改进这一点，或者为此建立更好的方法。 编辑： 按照评论中的建议，我尝试了不同的方法，包括 GitHub 上其他资源的链接。 这些方法并不可靠，我想说它们的成功率不到 50%。 不过，我尝试对所有 css 文件使用 jQuery(document).ready() 和 add media="all"，但这会增加 TBT（总阻塞时间），从而影响我的网站性能 编辑2： 正如你们中的许多人在答案中反复指出的那样，使用 DOMcontentLoaded 和许多其他方法可以帮助完成我想要实现的事情。 然而，这些方法都会导致TBT（总阻塞时间）的显着增加。 如果有一种不损害 TBT 的方法，我们将不胜感激。 我建议使用 fetch().then() 并将其作为 style 元素注入： var stylesheetURLS = ["style.css", "style2.css"] stylesheetURLS.forEach(url => { fetch(url).then(response => response.text()).then(stylesheet => { var styleElement = document.createElement("style"); styleElement.textContent = stylesheet; document.head.append(styleElement); }); }); 我不确定fetch是否很慢，但如果是的话我也不会感到惊讶。 替代fetch：XMLHttpRequest var stylesheetURLS = ["style.css", "style2.css"]; stylesheetURLS.forEach(url => { var request = new XMLHttpRequest(); request.open("GET", url); request.send(); request.onload = function() { var styleElement = document.createElement("style"); styleElement.textContent = request.responseText || request.response; document.head.append(styleElement); } }); 我再次不确定这是否比fetch更快 我测试过下载一个 css 文件，下载时间超过 6 秒，我可以确认下载不会对 TBT 产生影响。正如谷歌所说，TBT 是浏览器无法用于用户输入的时间，例如当用户单击按钮或滚动时，浏览器将不会做出反应。较长的 TBT 通常是由于主线程繁忙而导致的，因为它有太多工作要做。我认为处理 CSS（将所有规则应用于 html）是您的 TBT 增加的原因，因为下载文件已经在后台完成（异步），并且不会成为较长 TBT 时间的原因。 下面是下载大文件时TBT不增加的示例： 待定： 如您所见，下载时间超过 6 秒，但还没有达到 TBT： 您可以使用基于 jQuery 的vanilla JS 函数.ready(): document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".AOcssLoad").forEach(el => { el.media = "all" console.log(`Loaded: ${el.href}`) }) }); <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-utilities.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-reboot.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" /> <h1>Hello world!</h1> 但是，无论您选择哪种解决方案，请注意您都必须处理无样式内容的 Flash (FOUC)。考虑管理样式表文件的其他方法。 为什么不注射它 <script> document.write("<link rel=\"stylesheet\" media=\"print\" class=\"AOcssLoad" href=\"\" /> "); </script> 并将 <script> 标签放置在您想要放置 <link> 标签的位置的正上方。 或者只是 <link rel="stylesheet" media="print" class="AOcssLoad" href="" /> 除了 css 将异步加载并且您可以使用 csp 之外，什么都没有发生 你的脚本就是错误的，而且它根本无法工作，甚至 50% 的情况下都无法工作。 var Script = document.getElementsByClassName("AOcssLoad"); for (var i = 0 ; i < Script.length; i++) { this.className += " Loading"; // here `this` is `window` Script[i].addEventListener("load", function({ // <-- this is an Object this.onload=null;this.media="all"; // <-- this is a syntax error this.className += " OnLoad"; }); } 这是您可能想要编写的内容的重写，其中还包括检查链接是否在脚本运行之前加载，以防万一（例如缓存）。 const links = document.getElementsByClassName("AOcssLoad"); for (const link of links) { link.className += " Loading"; if(link.sheet) { // "already loaded" oncssloaded.call(link); } else { link.addEventListener("load", oncssloaded, { once: true }); } } function oncssloaded() { this.media = "all"; this.className += " OnLoad"; } <link rel="stylesheet" media="print" class="AOcssLoad" href="data:text/css,body{color:green}" /> Some green text 我知道这个帖子已经很老了，但我会把它扔掉，因为这是我目前在 WordPress 中使用的东西...... 首先，使用标准 WordPress 工具添加样式表 (wp_enqueue_style())。 然后： add_filter('style_loader_tag', 'optimize_async_style',10,4); function optimize_async_style(string $tag, string $handle, string $src, string $media): string { $nonce = wp_create_nonce(); $nonce = " nonce='{$nonce}'" : ""; $tag = "<link rel='preload' id='{$handle}-css' href='{$src}' as='style' media='{$media}'{$nonce}>\n". "<script{$nonce}>document.getElementById('{$handle}-css').addEventListener(". "'load',(e)=>{e.currentTarget.rel='stylesheet';},{once:true});". "</script><noscript>" . trim($tag) . "</noscript>\n"; return $tag; } style_loader_tag过滤器让我们可以用link更改rel='preload'标签，后跟script标签，加载后将其更改为rel='stylesheet'。这提供了样式表的异步加载。另请注意，我们为 CSP 的 link 和 script 标签分配了一个随机数。 输出应类似于： <link rel='preload' id='AOcssLoad-1' href='...' as='style' media='all' nonce='4783a68661'> <script nonce='4783a68661'>document.getElementById('AOcssLoad-1').addEventListener('load',(e)=>{e.currentTarget.rel='stylesheet';},{once:true});</script> <noscript><link rel='stylesheet' id='AOcssLoad-1' href='...' media='all' /></noscript> 然而，这是使用 id 而不是 class。