content-security-policy 相关问题

内容安全策略（CSP）旨在通过为开发人员提供对允许加载页面的资源以及允许执行的脚本的细粒度控制来降低跨站点脚本攻击的风险。

我按照这篇文章将CSP添加到我的react应用程序中，它可以工作，但是当使用MUI和样式组件时，它们注入的样式不起作用，并且我找不到任何解决方案......

reactjs material-ui styled-components content-security-policy emotion

回答 3 投票 0

我正在尝试将 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>

symfony cors content-security-policy nelmiocorsbundle

回答 0 投票 0

为 @google/model-viewer 设置 Content-Security-Policy 标头

我想使用 @google/model-viewer 显示 3D 模型，但我的 CSP 标头阻止了查看器创建的内联样式。有没有办法让查看者使用随机数或其他方式？ <...

web content-security-policy model-viewer

回答 1 投票 0

如何使用 Apache httpd.conf 和 mod_cspnonce 替换 Angular index.html 中的 CSP nonce 值？

尝试使用mod_cspnonce模块在apache httpd服务器上托管的角度应用程序中设置CSP随机数。能够构建以下策略并可以看到响应标头包含正确的随机数 -

angular apache content-security-policy httpd.conf nonce

回答 1 投票 0

如何在不使用内联脚本的情况下异步加载CSS（符合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。

javascript html css asynchronous content-security-policy

回答 6 投票 0

内容安全策略：页面的设置阻止加载http://localhost:3000/favicon.ico（“default-src”）处的资源

当我尝试打开另一个应用程序的路线时，我一直遇到此错误：内容安全策略：页面的设置阻止加载 http://localhost:3000/favicon.ico 上的资源（“默认...

express content-security-policy cross-origin-resource-policy

回答 2 投票 0

如何在 Ruby on Rails 中使用不安全哈希内容安全策略

我有一个 Ruby on Rails 应用程序（rails v 6.1.7.9），它允许用户生成内容，因此我想使用内容安全策略。我有一个自定义 javascript 调用，我想在事件上触发

ruby-on-rails content-security-policy

回答 1 投票 0

使用“strict-dynamic”和“nonces”阻止外部脚本注入的资源

我正在尝试为客户实施 CSP，但遇到了一些困难：我有一个用于谷歌翻译的脚本被拉入 <p>我正在尝试为客户实施 CSP，但遇到了一些困难：</p> <ol> <li>我有一个用于谷歌翻译的脚本被拉入</li> </ol> <pre><code><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" nonce="0190369b-35c3-4474-b31e-46e09bf5552c"></script> </code></pre> <ol start="2"> <li>我有一个 CSP，其中包括</li> </ol> <ul> <li>随机数值</li> <li>严格动态</li> <li>一些哈希值（这些是经过 sha256 处理的内联样式）</li> </ul> <pre><code>default-src * data: ; script-src 'self' 'strict-dynamic' 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' ; style-src 'self' 'unsafe-hashes' https://fonts.googleapis.com 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' 'sha256-<someHash>' ; </code></pre> <ol start="3"> <li>控制台错误：</li> </ol> <pre><code>Refused to load the stylesheet 'https://www.gstatic.com/_/translate_http/_/ss/k=translate_http.tr.26tY-h6gH9w.L.W.O/am=DAY/d=0/rs=AN8SPfrCcgxoBri2FVMQptvuOBiOsolgBw/m=el_main_css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' 'sha256-...' ". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback. </code></pre> <ol start="4"> <li>注入内联样式的控制台错误</li> </ol> <pre><code>Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-hashes' 'nonce-bc138385-6e60-4e78-8e12-c516b9835ccf' 'sha256-...'". Either the 'unsafe-inline' keyword, a hash ('sha256-JIj2SxE0HcsALEzIeYfM7TQkcz/B/Cfoc4ARmAXL5Ck='), or a nonce ('nonce-...') is required to enable inline execution. </code></pre> <p>我尝试获取原始脚本的完整性哈希，但谷歌没有提供。我尝试生成哈希，但请求未启用 cors（在谷歌方面），因此它无法使用完整性属性。</p> <p>我已尝试将域 (gstatic.com) 添加到我的白名单中，但由于我使用的是严格动态，所以无法这样做。</p> <p>我的理解是，鉴于我的 src="translate.google.com" 脚本在我的 CSP 中有一个随机数，它应该能够加载资源并注入它们。</p> <p>还有 <pre><code><link></code></pre> 标签存在问题，例如</p> <pre><code><link rel="stylesheet" href="https://use.typekit.net/grj3fwu.css"> </code></pre> <ol> <li>我的 <pre><code>style-src</code></pre> 指令中存在这个元素的随机数。</li> <li>它通过 <pre><code>@import</code></pre> 引入多种不同的样式，例如“https://p.typekit.net/p.css”</li> <li>它有一个不同的 URL，所以即使我将原始的 <pre><code>use.typekit.net</code></pre> 放入我的允许列表中，这个辅助 @import 也会失败。我可以将 <pre><code>p.typekit.net</code></pre> 添加到我的白名单中，但此域名发生变化，我无法控制它。</li> </ol> <p>是否有类似于 <pre><code>strict-dynamic</code></pre> 的 <pre><code><link></code></pre> 元素/<pre><code>style-src</code></pre> 指令？</p> </question> <answer tick="false" vote="0"> <p>尽管 CSP 中的 script 和 style 有很多相似之处，但 strict-dynamic 仅适用于脚本。脚本的潜在威胁比样式的威胁大得多，<a href="https://scotthelme.co.uk/can-you-get-pwned-with-css/" rel="nofollow noreferrer">https://scotthelme.co.uk/can-you-get-pwned-with-css/</a>。</p> <p>由于您已经使用严格动态和随机数彻底锁定了脚本，因此您可以对样式更加宽松，特别是如果您锁定 CSP 的其余部分以防止渗透。在这种情况下，将 *.typekit.net 添加到 style-src 在大多数威胁模型中可能是可以接受的。</p> <p>如果注入的内联样式数量较少，请添加控制台错误中建议的哈希值。</p> <p>如果您无法获取外部文件的哈希值，请尝试下载它并获取校验和。如果它不是版本化脚本并且可能会更改，请改为执行基于主机的白名单。</p> </answer> </body></html>

content-security-policy

回答 0 投票 0

删除或替换 .NET 9 中框架自动生成的内容安全策略 (CSP) 框架祖先“self”指令

我正在使用 .NET 9 Blazor 创建 iFrame 小部件。但是，在 iFrame 中显示它失败并出现以下错误：拒绝框架，因为祖先违反了以下内容安全...

.net content-security-policy .net-8.0 .net-9.0

回答 1 投票 0

为框架祖先生成重复的内容安全策略（Blazor、IIS 和 Chrome）

我已将 Web 应用程序 (sub.domain.com) 发布到 Internet 信息服务 (IIS) 虚拟服务器，现在希望将其显示在 www.otherdomain.com 上的 iFrame 中。已发布的 web.config 文件...

google-chrome iis iframe blazor content-security-policy

回答 2 投票 0

有关内容安全策略的查询

我有一个信任脚本要嵌入到我的项目中。即使添加代码后，由于我们在项目中使用的配置，Cookie 横幅也无法访问并且不会弹出。什么...