如何解决 Angular 8 中的“违反 CSP 指令：”default-src 'self'”？

Question

我们在客户服务器上部署了一个 Angular 8 单页 web 应用程序。 他们将 CSP 指令之一设置为：default-src 'self'。 我们使用ng build --prod Angular 应用程序，就像任何其他 Angular 应用程序一样。 部署后，我们收到此错误：

main-es2015.47b2dcf92b39651610c0.js:1 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

在浏览器上查看html代码，我看到如下内容：

如您所见，Angular 实际上使用标签<style>来为 css 服务（如果我错了，请纠正我）。 这违反了问题中提到的 CSP 指令。

在搜索之后，我认为 Angular/React 在处理这个问题方面相当糟糕，这些框架没有考虑到 CSP。 您可以查看 Angular github 页面，这是一个未解决的问题。 现在我正在寻找一种解决方案来克服这个问题，当然改变 CSP 策略不是一种选择，因为客户不想这样做。

如何告诉 Angular 不要在生产中使用标签<style>来服务 css？ I think to make it works we need to set Angular in a way that it will load the css files, and then use styles in those files instead of injecting <style> into html which causes CSP issue.

编辑 1 ：我们的项目正在使用scss 。

编辑 2 ：搜索后，我发现 Angular 将使用<style>元素将组件的 styles 注入 DOM。 如此处所示：

现在我有了一个想法，因为每个组件的样式都会通过<style>元素注入到 DOM 中，我们可以通过将所有组件的样式.scss文件捆绑到单个style.scss文件中来防止这种情况发生。 从上图中你可以看到我们总是有一个空的<style>元素，所以如果这样的话，我们最终将只有一个<style>元素和一个链接到我们的全局样式scss文件的<link>元素。 在页面被浏览器渲染之前，我们可以有多种方法来删除那个空的<style>元素。

现在我坚持配置自定义 webpack 来实现这一点。 We cant use ng eject to get the webpack.config.js file since Angular CLI 6. I've been using Angular CLI 8 so the only way for me to add custom configuration into Webpack is to use custom-webpack npm. I cant find a good config file that has the same output as my desire, please help if you know how to config webpack to bundle all component's styles scss files in Angular into a global scss file.

Answer 1

我认为这对于我的问题来说是一个可以接受的答案：

首先，我的建议是远离使用styleUrls 。 Angular 将使用<style>元素将组件的 styles 注入到 DOM 中。 其次，如果可能的话，您应该了解/询问部署服务器/环境上的 CSP 策略。 我一直在做什么来解决这个问题（我的项目相对较小，只有几十个组件）：

1. 复制（一个一个）组件的相关链接，将它们放入angular.json ，在styles属性中。 这是因为 Angular 会将此属性中的所有 styles 捆绑为单个css/scss文件。 我一个一个地复制，因为css/scss文件首先设计为与 Angular 视图封装一起使用。 将它们全部集中到一个地方可能会引入意想不到的问题，这会破坏 UI。 每当复制组件样式并放入styles时，我都会检查 UI 是否因此而中断。 如果发生此类问题，这将帮助我缩小根本原因。

2. 对于每个组件，在将其组件样式文件的相对路径复制到styles ，我删除了@Component中的styleUrls 。 这可以防止 Angular 将<style>注入 DOM。

注意事项：

• 将所有 styles 收集到一个文件中并立即加载它们可能会导致性能问题。 幸运的是，我公司的项目相对较小。
• 现在您需要记录在项目中使用样式的新方法。