Use of inline styles doesn't play nice with Content Security Policy

[ctusch]

gridstack.js seems to use inline styles extensively. We would like to disable inline styles via CSP's style-src to avoid the security risk they present. Are there any plans for gridstack.js to avoid the use of inline-styles?

[troolee]

What do you mean by inline styles?

All styles used by gridstack are in css files or generated inside STYLE tag. And we cannot avoid of usage of generated styles. I don't see any other way to implement all functionality gridstack provides without that.

And what kind of security risks this may cause?

[ctusch]

Hey,

inline styles are the style tag and the style attribute.

I had a short look at the source and it seems like you only need the style tag in _updateStyles to set the vertical size and position. I'm not familiar enough with your project but wouldn't it be possible to do this using the DOM objects and setting their styles directly? This wouldn't violate CSP (don't ask me why exactly that is so).

E.g. change

if (this._styles._max === 0) {
    Utils.insertCSSRule(this._styles, prefix, 'min-height: ' + getHeight(1, 0) + ';', 0);
}

to

if (this._styles._max === 0) {
    var elements = document.querySelectorAll(prefix);
    for (var i = 0; i < elements.length; ++i) {
        elements[i].style.minHeight = getHeight(1, 0);
    }
}

I'm no expert on security myself but here are some risks associated with inline styles:
http://dontkry.com/posts/code/disable-inline-styles.html
http://scarybeastsecurity.blogspot.co.at/2009/12/generic-cross-browser-cross-domain.html

Please note that I'm not saying that your use of inline styles exposes these risks. But it prevents activating the CSP style-src which is a safeguard for developers to not introduce such risks by accident.

[DonnchaC]

I'd also like to be able to set a strict CSP policy and disable inline-styles. Is there any plan for Gridstack to change from using custom styles and to use DOM modification instead? 👍

[anupam-contaque]

Copied from #1512:

Content Security Policy header blocks all inline-style, inline-script tags as it may impose XSS vulnerabilities.

Since, missing CSP header is identified as a critical XSS vulnerability, it would be better option to provide support for this rather than forcing users to use unsafe-inline source or removing CSP header from application.

One option is to pass server generated nonce during grid initialization which can be used as nonce attribute in inline <style> tags, that would prevent blocking of <style> tags generated by gridstack.

As mentioned in earlier comments, other option is to use javascript to set styles directly on element's style property like

document.querySelector('div').style.display = 'none';