search

Semantic-Org / Semantic-UI

Semantic is a UI component framework based around useful principles from natural language.
http://www.semantic-ui.com
MIT License
51.09k stars 4.95k forks source link

[Content Security Policy] Make this framework CSP-compliant #7007

Open birthdaycorp opened 4 years ago

birthdaycorp commented 4 years ago

I just updated my project to use a content security policy, which has the unfortunate side effect of completely breaking this framework due to its use of dynamic inline styling. Commits that were intended to fix the issue (by changing attr() to css() ) do not seem to have changed anything.

modal.js,transition.js, dropdown.js, popup.js, etc should work without needing to use inline styles. Adding an unsafe-inline to the style-src directive is the only way of making the two play along, but this defeats the purpose of a csp and should not be encouraged. Nobody wants a malicious user injecting CSS.

Steps

Using the suggested js for implementing a modal and clicking the targeted element adds an inline style to either the <body> or a parent tag. This js adds style="height: 334px; to the <body> tag on my site:

$('.ui.modal')
  .modal('show')
;

Version

2.4.2

birthdaycorp commented 4 years ago

Actually, after comparing the transitions.js of the PR with same file in current branch, it would appear that PR was either never merged, or it was reverted.

Why is this?