Semantic-ui: [Content Security Policy] Make the framework CSP-compliant

[fernandops26]

I just implemented CSP in an application, but I see that some semantic modules are injecting styles online, so they are blocking and they stop working. I need to completely use CSP throughout the application, but semantic is limiting that.

[awgv]

Hi @fernandops26, sorry for the delay. That’s probably because of the transition component that’s being used for animations, I saw attr() in several places there, and it doesn’t work when strict policies are enabled. If you’re feeling adventurous, you could try forking the component and change attr() to css() to see if it works, if you do, don’t forget to exclude the component from being built in semantic.json.

Do you have the same problem with other components, or is it just the modal? I’ll be able to take a closer look at the issue in a week or so, but even if I’ll fix it, please keep in mind that it might take a while to be merged.

[fernandops26]

@Banandrew also exists problems with dropdown and accordion.

[fernandops26]

@Banandrew I created a PR that resolve some problems of CSP with the file transition.js
Here: #5660

[cordoval]

makes total sense to secure this and it is an easy change, i don't see why it would take long to merge 👍

[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.

[birthdaycorp]

Has this issue been fixed in recent versions of the framework? I'm using version 2.3.2 and ran into this problem once I implemented my content security policy. I see a pull request and a few other issues that aimed to fix this by changing attr() to css() in src/definitions/modules/transition.js. But I believe css() still operates on inline styles? 😓

There's also Fomantic-UI, but they're not yet at a level where they allow theming. 😢

[lubber-de]

There's also Fomantic-UI, but they're not yet at a level where they allow theming.

For the record: Fomantic-UI, as compatible fork, of course has the same level of theming as SUI has! @birthdaycorp was looking at a precompiled ruby SASS repo

As discussed and explained in https://github.com/fomantic/Fomantic-UI/issues/214#issuecomment-675065054 i also don't think the PR #5660 will fix CSP issue, because .css() will also create inline styles (please, proove me wrong)

[fernandops26]

Hi guys, it's been a long time since I left the PR for review, however my approach does not aim to prevent the style from being added in a linear way, my PR focuses on avoiding using the .attr() function because it allows adding any attribute that is NOT IT'S STYLES, that's why CSP is complaining.