小编Edo*_*ani的帖子

使用具有严格内容安全策略的 Angular Material

我正在使用 Angular 6 和 Angular Material 6 开发企业应用程序。

现在我必须为一个具有非常严格的 CSP 的新客户构建项目,那就是

内容安全策略:“default-src 'self';”

该政策无法修改。

我搜索了以前的答案,但只得到了将组件样式从 stylesUrls 移动到 angular.json 中的 styles 属性的事实。但即使这样做,我仍然有很多错误

拒绝应用内联样式,因为它违反了以下内容安全策略指令:“default-src 'self'”。启用内联执行需要“unsafe-inline”关键字、哈希值(“...”)或随机数(“nonce-...”)。另请注意,“style-src”未显式设置,因此“default-src”用作后备。

我注意到,当应用程序启动时,编译器会在页面的头部添加很多 <style> 标签,我认为这就是那些重复错误的原因。

样式标签

Content-Security-Policy 的元标记是我添加的,它的唯一用途是模拟服务响应标头。

有没有办法避免这种行为?要在一个文件中构建所有 css 并在加载应用程序时将其添加为 < link > 标记?

编辑:

我找到了一种方法来实现此目的,方法是从组件中删除所有 stylesUrl 并将组件样式表导入到主 style.scss 中。然后我手动将这些样式标签中的所有内容复制到 css 文件中。最后,我简单地将这个 css 文件链接到我的 index.html 中。

控制台中的错误仍然存​​在,但应用程序运行正常。

css styles content-security-policy angular-material angular

5
推荐指数
0
解决办法
3341
查看次数