Semantic-ui: Content Security Policy

[embedthis]

Can Semantic-UI modal dialogs be used with Content Security Policy (CSP) directives but without requiring 'unsafe-inline'?

Is it possible to externalize the inline styles into a stylesheet so that CSP can be used effectively?

See http://www.html5rocks.com/en/tutorials/security/content-security-policy/ for background on CSP unsafe-inline.

[embedthis]

Bit more information. To use Semantic-UI and CSP, you need to use 'unsafe-inline' which disables a major benefit of CSP.

[devlux]

I do not think you need 'unsafe-inline' but instead allow the access to embedded fonts resource in base64 encoded data attributes as follows:

script-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:;

At least this works for me... ;-)

http://cspisawesome.com/

[embedthis]

If you use modal dialogs, you will require unsafe-inline.

Those fonts are required too.

[jlukic]

I don't believe it should be affected by that CSP, I use the same with SUI and modals.

[calebogden]

I'm having a similar issue where semantic-ui adds style directly to element on dropdown menus (I believe during the show / hide transition)

[calebogden]

After a quick review it looks like many modules modify style directly

[jlukic]

Some modules also insert inline styles in head, for example, sidebar.

[sensedeep]

Net/Net, you need to use unsafe-inline for CSP.

Not sure what the work-around would be.

[jlukic]

Using injected css is a boon because it prevents distracting inline style attributes, and allows use of pseudo selectors for targeting multiple elements with styles.

This lets us do things like calculate sidebar width before calculating 3dtransform for animation
https://github.com/Semantic-Org/Semantic-UI/blob/master/src/definitions/modules/sidebar.js#L232

[sensedeep]

No doubt dynamic styles are of great value. But some sites really need full CSP without inline-styles. There are some very nasty exploits that use injected styles to subvert a page. This risk may prevent Semantic-UI being used .... we have such sites.

It would be great if there were some way to use predefined CSS rules such cases without needing dynamic styles.

[calebogden]

@sensedeep Yes exactly, CSP requirements are restricting my use of Semantic UI

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.