如何解决“违反CSP指令:" default-src'self'在Angular 8中? [英] How to solve "violate CSP directive: "default-src 'self'" in Angular 8?

查看:81
本文介绍了如何解决“违反CSP指令:" default-src'self'在Angular 8中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我们在客户服务器上部署了Angular 8单页Web应用程序.他们将CSP指令之一设置为:default-src'self'.像其他任何Angular应用程序一样,我们使用 ng build --prod 构建Angular应用程序.部署后,我们会收到以下错误消息:

We have an Angular 8 single page web app deployed on the customer server. They set one of the CSP directive to: default-src 'self'. We build the Angular app using ng build --prod like any other Angular applications. After deploying, we get this error:

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 代码,我看到这样的内容:

Look into the html code on the browser, I see something like this:

如您所见,Angular实际上使用标签< style> 来提供CSS(如果我输入错了,请纠正我).这违反了问题中提到的CSP指令.

As you can see, Angular actually use tag <style> to serve the css (please correct me if I'm wrong). This violates the CSP directive mentioned in the question.

在四处搜寻之后,我认为Angular/React在处理此问题方面非常糟糕,因为这些框架并不是在考虑CSP的情况下构建的.您可以查看Angular github页面,对此有一个未解决的问题.现在,我正在寻找一种解决方案来克服这一问题,当然,由于客户不希望更改CSP策略,因此不是一种选择.

After searching around, I think Angular/React is quite bad at handling this issue, those frameworks are not built with CSP in mind. You can check out Angular github page, there is an open issue for this. Now I'm searching for a solution to overcome this, of course changing CSP policy is not an option because the customers don't want to.

我如何告诉Angular在生产中不使用标签< style> 来提供CSS服务?我认为要使其正常工作,我们需要以某种方式设置Angular,以加载CSS文件,然后在这些文件中使用样式,而不是将< style> 注入 html 会导致CSP问题.

How can I tell Angular not to use tag <style> in production to serve 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 .

Edit 1: Our project is using scss.

编辑2 :搜索后,我发现Angular将使用< style> 元素将组件的样式注入DOM中.如此处所示:

Edit 2: After searching around, I have found out that Angular will inject your component's styles into the DOM by using <style> element. As shown here:

现在我有了一个主意,因为每个组件的样式都会通过< style> 元素注入到DOM中,因此我们可以通过捆绑所有组件的样式 .scss来防止这种情况的发生.文件转换为单个 style.scss 文件.从上图可以看到,我们总是有一个空的< style> 元素,因此,如果此方法有效,我们最终只会得到一个< style> 元素,并且一个< link> 元素,该元素链接到我们的全局样式 scss 文件.在浏览器呈现页面之前,我们可以有多种方法来删除该空的< style> 元素.

Now I have an idea, because for each compinent's style will be injeced into the DOM through <style> element, we can prevent this from happening by bundling all component's style .scss file into a single style.scss file. From the image above you can see that we always have an empty <style> element, so if this works, we will endup with only one <style> element and a <link> element that link to our global style scss file. We can have multiple way to remove that empty <style> element before the page got rendered by the browser.

现在,我被困在配置自定义Webpack来实现这一目标.自Angular CLI 6以来,我们无法使用 ng弹出来获取 webpack.config.js 文件.我一直在使用Angular CLI 8,因此,这是我添加自定义的唯一方法将Webpack配置为使用 custom-webpack npm.我找不到与我期望的输出相同的优质配置文件,如果您知道如何配置webpack以便将Angular中所有组件样式的 scss 文件捆绑到全局的 scss 文件.

Now I'm stuck at configuring custom webpack to make this happen. 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.

推荐答案

我认为这可以回答我的问题:

I think this can be an acceptable answer for my question:

首先,我的建议是使用 styleUrls 远离.Angular将使用< style> 元素将组件的样式注入DOM.其次,如果可能,您应该了解/询问部署服务器/环境上的CSP策略.我为解决该问题所做的工作(我的项目规模很小,只有几个组件):

First of all, my recommendation is stay away from using styleUrls. Angular will inject styles of your component into the DOM using <style> element. Secondly, if it's possible, you should know / ask for the CSP policy on the deployment server/environment. What I have been doing to resolve the issue (my project is reletively small with just a couple dozen of components):

  1. 复制(一对一)组件的相对链接,并将其放入 styles 属性的 angular.json 中.这是因为Angular会将此属性中的所有样式捆绑为单个 css/scss 文件.我一个一个地复制,因为 css/scss 文件最初设计为可与Angular View Encapsulation一起使用.将它们全部聚集到一个地方可能会引入意外的问题,这会破坏UI.每当复制组件样式并放入 styles 时,我都会检查UI是否因此而中断.如果发生此类问题,这将有助于我缩小根本原因.

  1. Copy (one by one) relative link of components, put them into angular.json, in styles attribute. This is because Angular will bundle all styles in this attribute as a single css/scss file. I copy one by one because the css/scss file was designed to work with Angular View Encapsulation in the first place. Gathering all of them into one place might introduct unexpected issue, this will break the UI. Whenever copy a component style and put into styles, I check if the UI breaks because of that. This will help me narrow down the root cause if such issue happens.

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

For each component, after copy its component style file's relative path into styles, I remove styleUrls in @Component. This prevents Angular from injecting <style> into the DOM.

注意事项:

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

这篇关于如何解决“违反CSP指令:" default-src'self'在Angular 8中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆