Comments (4)
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.
from visualizer.
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.
from visualizer.
Cool. Can you watch that issue, then make a PR (for the visualizer) when that loader PR is merged and released?
from visualizer.
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>`
from visualizer.
Related Issues (20)
- BUG: artisanal typings require @uirouter/core when it's not a dependency of the project HOT 1
- Allow comments in the tsconfig.json file HOT 1
- Add horizontal layouts
- StateVis: current state not highlighted if vis launched after first transition
- StateVis: Collapsed nodes should animate their parent
- StateVis: Initial layout has unwanted "padding"
- Visualizer for Sticky and DSR states ? HOT 1
- Cannot read property 'isCanceled' of undefined
- 7.2.0 seems to break apps in IE11 HOT 2
- Error with Internet Explorer and .assign method HOT 2
- Display custom data properties in Transition Popover
- a bug of visualizer.d.ts for ng2
- What version of visualizer goes with angular-ur-router 1.0.0-rc.1? HOT 1
- When clicked State Visualizer dissapears HOT 1
- update dependency preact to 8.2.xx HOT 4
- Hooks not deregistering after component is destroyed HOT 1
- Action required: Greenkeeper could not be activated 🚨
- Action required: Greenkeeper could not be activated 🚨
- RADIAL_EDGE && TREE_EDGE functions fail on missing node._parent (possible fix)
- JSX element type 'ReactElement<any>' is not a constructor function for JSX elements.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from visualizer.