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:
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.
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()
tocss()
) 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 anunsafe-inline
to thestyle-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 addsstyle="height: 334px;
to the<body>
tag on my site:Version
2.4.2