You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
We are currently trying to enforce stricter Content Security Policies on our webapp.
The webapp uses echarts-for-react, and this one in turn uses size-sensor.
Unfortunately, we are forced to set style-src: 'unsafe-inline' due to this dependency, because there is a code snippet in object.js that sets an inline style here:
It would be really good if we could enhance the security of our webapp by removing unsafe-inline and still be able to use echarts.
I see a couple of ways to fix this:
Put styles into a separate CSS file and use CSS classes to reference them.
Create separate <style> tags in the same document and add a nonce attribute to them that is populated from a <meta> property on the page (ass JSS does it)
The text was updated successfully, but these errors were encountered:
We would need a way to "inject" our nonce attribute from the document into the <style> tag that size-sensor generates. Not sure what is best practice here for other libraries, but I quite like JSS's approach, they read the value from the document's <meta> tag.
We are currently trying to enforce stricter Content Security Policies on our webapp.
The webapp uses
echarts-for-react
, and this one in turn usessize-sensor
.Unfortunately, we are forced to set
style-src: 'unsafe-inline'
due to this dependency, because there is a code snippet inobject.js
that sets an inline style here:size-sensor/src/sensors/object.js
Line 30 in 3e71e3d
It would be really good if we could enhance the security of our webapp by removing
unsafe-inline
and still be able to use echarts.I see a couple of ways to fix this:
<style>
tags in the same document and add anonce
attribute to them that is populated from a<meta>
property on the page (ass JSS does it)The text was updated successfully, but these errors were encountered: