Issue with a strict Content Security Policy (CSP) about visualizer

[christopherthielen]

Sorry for the delay.

I don't really know anything about the CSP issue you describe so I don't know how to solve this. Part of the problem is that the app needs to support lazy loading. Its styles are inside the bundled .js and it needs to inject the styling somehow. I'm using style-loader from webpack to do so.

I'm not sure using classes only would fix the problem because you'd still need the CSS classes injected into your document. Can you explain further?

I don't understand the "nounce", how I would publish something like that in the library.

[dsebastien]

Hello @christopherthielen !

Thanks for looking at this one.

The idea when a content security policy is strict is that it can limit security risks by preventing dangerous things like inline scripts and styles, etc. Script tags and including scripts is the most obvious but stylesheets can also be abused. You can find a lot of information about this here: https://developers.google.com/web/fundamentals/security/csp/

If you're using the style loader of webpack then I guess that the following PR should provide a solution to be able to define the nonce on the inserted style tag(s): webpack-contrib/style-loader#155

With that supported by the style loader it'll be possible to define a custom "nonce" attribute with some value to be added to the generate <link rel="stylesheet" ... tag(s).

Thus with that you should be able to make the tag look like this in the dom:

<link rel="stylesheet" nonce="some_random_string">

With that, we'll be able to add "some_random_string" to our CSP to mark that content as trusted and thus not to be blocked by the CSP.

[christopherthielen]

Cool. Can you watch that issue, then make a PR (for the visualizer) when that loader PR is merged and released?

[christophercr]

Hi, I've created a pull request (#43) to fix this.

As @dsebastien already pointed out, the PR in the style-loader to support custom attributes has been implemented, so it is available since version 0.14.0.

@christopherthielen I just added a simple nonce which is only relevant in case the visualizer is used in a CSP compliant app so that it can be added to the CSP directives in order to mark that content as trusted and thus not to be blocked. You can change the value if you want :)

This will cause the styles to be added like this:

<style nonce="uiroutervisualizer" type="text/css"> ... </style>`