upsetjs needs unsafe nginx Content-Security-Policy setting style-src 'unsafe-inline'

[berntpopp]

Hi,

thanks a lot for this great visualization tool.
I'm trying to configure my server as savely as possible but can not find a good solution to replace the Content-Security-Policy "style-src 'unsafe-inline'" and still have upsetjs working.
The library seemms to render some inline sytles with a random string attached to the classes as I think is described here: https://medium.com/@sgratzl/upset-js-behind-the-technical-scenes-6eb0c880a03e.
As the strings are generated runtime one can not generate hashes and include these in the nginx config.
Basically I did not find a solution but keeping 'unsafe-inline' which resultins in a warning in mozilla observatory.

Any ideas how one could handle this?
Best wishes
Bernt

[sgratzl]

see also #98 and #97. Moreover, the style isn't random if you specify the id attribute. Note that this id will be used as the DOM id

[berntpopp]

Thank you this works now!

For Vue 2 I had to add this code to my methods section:

    customStyleFactory(rules) {
      return createElement(
        'style',
        {
          extra: 'abc',
        },
        rules
      );
    },

after ´import {createElement} from "@upsetjs/bundle";´ as described in #98.