CSP 拒绝加载 css 文件但不加载 javascript 文件答案

【问题标题】：CSP refused to load css file but not javascript fileCSP 拒绝加载 css 文件但不加载 javascript 文件
【发布时间】：2020-08-01 20:33:12
【问题描述】：

我有一个 html 文件，其中包含指向 css 文件包的链接，在该 html 文件的底部我有一个 div 是所有 javascript 代码的容器和像这样的 javascript 包

header excerpt from an auto generated html file

<head>
<link rel="stylesheet" type="text/css" href="./wicket/resource/com.demo.WicketApplication/bundle-ver-54903C08BD33E9FB5DA355BE40331F02.css" nonce="o8ucNjn605sWzLMeVlFgM-kh" />
</head>

body excerpt with javascript file and code

<script type="text/javascript" src="./wicket/resource/com.demo.WicketApplication/bundle-ver-E39F0FD375F78ED454CD6F59F3C635D4.js" nonce="o8ucNjn605sWzLMeVlFgM-kh"></script>
<script type="text/javascript" id="wicket-ajax-base-url" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
Wicket.Ajax.baseUrl="?1";
/*]]>*/
</script>
<script type="text/javascript" id="our_callback_url" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
our_callback_url = './?1-5.0-test';
/*]]>*/
</script>
<script type="text/javascript" nonce="o8ucNjn605sWzLMeVlFgM-kh">
/*<![CDATA[*/
Wicket.Event.add(window, "domready", function(event) { 
tripleview.initMyComponent('#id2', tripleview.postJson.bind(tripleview, "./?1-5.0-test"));
Wicket.Event.publish(Wicket.Event.Topic.AJAX_HANDLERS_BOUND);
;});
/*]]>*/
</script>

所以，当我第一次使用打开的 devTools 窗口导航到我的页面时

I get warnings but no errors

DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools failed to load SourceMap: Could not load content for chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

但是当我关闭 devtools 窗口并重新打开它时，我得到一个错误

Refused to load the stylesheet 'http://localhost:8080/wicket/resource/com.demo.WicketApplication/bundle-ver-54903C08BD33E9FB5DA355BE40331F02.css' because it violates the following Content Security Policy directive: "style-src 'nonce-t0wrytDNiwGcyBiQ64Uln-uP'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

error in devtools after reopening devtools window

我的问题是为什么我只使用 css 文件而不是 javascript 文件会收到此错误。为什么在关闭 devtools 窗口后重新打开 devtools 后会出现此错误？

附言

Chrome 版本：版本 81.0.4044.113（官方构建）（64 位）

【问题讨论】：

标签： google-chrome-devtools nonce

【解决方案1】：

我的项目中也有同样的警告。在我的情况下， gighmmpiobklfepjocnamgkkbiglidom 是 AdBlock 扩展。如果你打开 chrome-extension://gighmmpiobklfepjocnamgkkbilidom/include.preload.js.map 你会看到一些关于你的扩展的信息。在我的情况下是：

{"version":3, <...> "webpack:///../adblock-betafish/alias/include.preload.js",<...>

我刚刚在“chrome://extensions/”中关闭了 AdBlock，它对我有帮助。

您可以删除 AdBlock 扩展程序（或将其关闭）。希望能解决你的问题。

【讨论】：