英文:
Styles imported through angular.json blocked by Content-Security-Policy script-src: self
问题
通过angular.json文件的styles数组导入了一些CSS和SCSS文件，最终在<body>下添加了以下代码：
<link rel="stylesheet" href="styles.44408b7ba7c0e916.css" media="all" onload="this.media='all'">
我使用了content-security-policy: object-src 'none'; script-src 'self';，这阻止了上面的<link>加载，因此应用程序无法正常工作。错误信息如下：
拒绝执行内联事件处理程序，因为它违反了以下内容安全策略指令："script-src 'self'"。要启用内联执行，需要使用"unsafe-inline"关键字、散列（'sha256-...'）或nonce（'nonce-...'）。请注意，散列不适用于事件处理程序、样式属性和javascript导航，除非存在"unsafe-hashes"关键字。
我注意到将'unsafe-inline'添加到CSP中将解决问题，但我不能采用这种不安全的解决方案。
请建议我其他不会威胁安全性的解决方案。
此外，请解释一下为什么CSS会被script-src策略阻止。
英文:
I have imported couple of css and scss files through angular.json styles array, this eventually added
<link rel="stylesheet" href="styles.44408b7ba7c0e916.css" media="all" onload="this.media='all'">
under <body>. I have content-security-policy: object-src 'none'; script-src 'self', which is blocking the above <link> from loading and hence application not working. The error is as below,
> Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
angular.json
link tag
error in console
I see adding 'unsafe-inline' to CSP will solve the problem but I cannot go with this solution as this is unsafe.
Please suggest me any other solution which is not a threat to security.
Also please throw some light on why css is being blocked by script-src policy.
答案1
得分: 1
这个帮助解决了我的问题，
找到了如何禁用内联关键样式
https://angular.io/guide/workspace-config#styles-optimization
在 angular.json 中的构建配置中，将
"optimization": true
替换为
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
英文:
This one helped to resolve my issue,
Found how to disable the inlineCritical styles
https://angular.io/guide/workspace-config#styles-optimization-options
In angular.json in the build configuration Instead of
"optimization": true
Replace with
"optimization": {
"scripts": true,
"styles": {
"minify": true,
"inlineCritical": false
},
"fonts": true
},
答案2
得分: 0
错误提示说它拒绝执行内联事件处理程序，它将位于您的标签末尾的"onload="this.media='all'""。您应该将其重写为白名单脚本中的事件监听器。
英文:
The error says it refused to execute the inline event handler, which would be onload="this.media='all'" at the end of your tag. You should rewrite this as an event listener in an allowlisted script.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论