使用Angular 10时的CSP阻塞样式和脚本

Question

小背景:我已经创建了一个angular web应用程序，我正处于项目生命周期的部署阶段。出于某种原因，我不能理解的是，CSP正在阻止我的本地CSS文件被使用。我已经通读了这里关于“快速修复”的每一个帖子，但还没有达成解决方案。我使用的CSP策略是

<meta http-equiv="content-security-policy"
content="default-src 'none' unsafe-inline;
script-src 'self' https://maps.googleapis.com unsafe-inline;
connect-src 'self' unsafe-inline; 
img-src 'self' unsafe-inline; 
style-src 'self' unsafe-inline;
base-uri 'self' unsafe-inline;
form-action 'self' unsafe-inline" />

Answer 1

由于您没有提供代码片段或关于阻止脚本和样式的CSP消息，因此我将尝试“根据患者的照片来治疗患者”。

变体1。'self'标记表示与页面加载时相同的方案/主机/端口。

因此，如果您通过http://localhost:5000加载web应用程序，那么“self”将只允许从http://localhost:5000/path_to加载样式和脚本(不能省略nbr端口)。

您有不匹配的端口、方案或host_name。

变体2。你有两个CSPs (都是通过meta标签或者meta + HTTP头)，其中一个CSPs是非常直接的。