fix: HTML reporter should not require CSP style-src 'unsafe-inline' #1369
Conversation
Using `style` attribute of an Element requires Content-Security-Policy (CSP) style-src 'unsafe-inline'. This makes testing that a library or an application does not violate a strict CSP more difficult.
There was a problem hiding this comment.
Thanks for submitting this. I'd be quite open to have QUnit be compatible with a strict CSP policy.
Having said that, if the CSP rule works the way I think it does, we'll need a lot more changes. I'd be happy to keep reviewing and accept them in small chunks, however you prefer.
reporter/html.js
Outdated
| allCheckbox.type = "checkbox"; | ||
| allCheckbox.checked = config.moduleId.length === 0; | ||
|
|
||
| allModulesLabel.classList.add( "clickable" ); |
There was a problem hiding this comment.
I suspect classList we might still support browsers in QUnit that predate classList. Would need to use className instead, if so.
There was a problem hiding this comment.
Didn't expected anyone to still support IE9 and IE10 as even Microsoft has dropped support more that two years ago. But you are right, QUnit webseite says:
QUnit currently supports the same browsers as jQuery 3.x.
And jQuery lists Internet Explorer: 9+.
Pushed the change.
| @@ -370,15 +374,27 @@ export function escapeText( s ) { | |||
| label.innerHTML = "Module: "; | |||
| label.appendChild( moduleSearch ); | |||
|
|
|||
| applyButton.textContent = "Apply"; | |||
| applyButton.style.display = "none"; | |||
There was a problem hiding this comment.
I haven't confirmed, so apologies if this isn't true... I would expect the CSP policy for inline styles to disallow all three methods of dynamic style creation: <style> elements, style="" attributes, and CSSOM/style properties (like this one).
To abide the CSP strict style policy, I think we need to declare the styles in the CSS file ahead of time, and toggle them with a class only. For example, the qunit-modulefilter-dropdown element could have a class like has-selection or has-no-selection. And based on that, we could hide the buttons as needed.
However, the apply button isn't the only violation, so to address your use case we'll need numerous other changes as well. Again, that's based on my (potentially) outdated understanding of CSP.
There was a problem hiding this comment.
The specification is not quite clear regarding CSSOM and CSP but as far as I'm aware of none of the implementation considers manipulating styles through CSSOM as a CSP violation. So while document.create('<button style="display: none;">') and document.create('button').style = "display: none;" require style-src 'unsafe-inline', document.create('button').style.display = 'none' is not violation style-src: 'none'.
|
@Krinkle Is there still something needed here? |
This is not needed anymore after CSP violations have been fixed upstream by qunitjs/qunit#1369.
Using
styleattribute of an Element requires Content-Security-Policy (CSP)style-src 'unsafe-inline'. This makes testing that a library or an application does not violate a strict CSP more difficult.