Refused to apply inline style because it violates the following Content Security Policy directive

Prerequisites

[X] I have not leaked any internal company information.
[X] I have not posted internal links or code snippets.

What happened?

We are building our application with React, Webpack, using Client Side Rendering (CSR), and MiniWeb as a server. We faced this issue in the console:

We found out that the problem occurs on ix-icons loader.

We examined the following links and we could not find a solution for CSR because we cannot use nonce values: https://github.com/siemens/ix/issues/171 https://ix.siemens.io/docs/installation/csp

We had the same issue previously and when we added the hash values that we got from the error messages to the Content Security Policy header in our server config, the problem was solved but the possibilities of these hash values are infinite. We found out that when we try to use a new iX component on the UI, we get this problem again, as you can see in the first screenshot.

Could you please share with us a solution to maintain this problem? Thank you.

What type of frontend frameware are you seeing the problem on?

React

Which version of iX do you use?

V2.1.0

Code to produce this issue.

On ix-icon loader files.

siemens / ix