CSP

[afdy]

Hello out there! :)

While trying to implement django-formset with CSP headers enabled (I used django-csp), django-formset CSS does not load correctly due to CSP rejections. The only way I seem to be able to make this to work is to enable unsafe-inline's, which isn't a good thing.

Error from JS Console:
django-formset.js:25 Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-WkX35IJFaVtppxeyuhA45g=='". Either the 'unsafe-inline' keyword, a hash ('sha256-vpHft275yvNumbvZFlPdo4goDdB7Nnyeok2p1H6UBLk='), or a nonce ('nonce-...') is required to enable inline execution.

Checking line 25 of django-formset, I see it does indeed try to use inline styles within js, but there's no way down there that I can see to pass the nonce to authorise it to do so?

I can include a nonce, which allows the first js to load, but this then imports more inline styles. Any inline styles need to include a nonce.

    <script nonce="{{ request.csp_nonce }}" src="{% static 'formset/js/django-formset.js' %}" type="module"></script>

Config to django-csp make work (but insecure):

CSP_STYLE_SRC = ("'self'", "'unsafe-inline'")

How do I make django-formset play nice with CSP enabled? :)

Many thanks!

[jrief]

I didn't know, that inlined styles are forbidden by CSP.
As you might have experienced, django-formset is CSS-framework independent. This is possible because I extract styles from existing widgets <input>, <select>, <textarea> and apply them to the provided web components. Therefore django-formset must create its own styles.

Therefore it's probably mandatory to add unsafe-inline to the CSP headers.

Can you please point out what is insecure about this approach?

[afdy]

Hey @jrief , thanks for the awesome app also by the way!

This likely explains better than I, I'm ok with Python but i do start to get a little lost in JS/CSS, so it'd take me more time to understand. :)

https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html

To summarise- CSP headers help the browser protect the client from malicious code injection/XSS. Both JS and CSS can be vulnerable to code being manipulated and security falls to the weakest component on the website. (As a 3rd party app for example, a simple case, I could say, set your CSS background to another url to pass data on to another 3rd party?).

CSP provides a mechanism to guarantee the trust all code presented by the site is genuine.

There may be a better workaround for this than turning it all off (with "unsafe-inline") but I've not found it yet..