Content-Security-Policy compliance

[DeployDuckParticipant]

Hello,
I have to build a very secure webapplication.
That’s why it’s important for us to take all sorts of security measures. One of them is of course the CSP (Content Security Policy). I have no problems when I turn on it for scripts. But I get thousands of error messages – no matter which control I use from you when I activate the CSP for styles. The error messages indicate the use of unsafe inline code – in every jqWidget.

Do you have a tip for me how to handle this?
Could I use nonce and if so where?

The DeployDuck

[adminKeymaster]

Hi DeployDuck,

We use inline CSS for positioning of things, when positioning is dynamic especially. For example, when you drag a thumb of slider, scrollbar, reposition window with dragging, reorder of items, etc. We cannot avoid inline CSS, if we want to have dynamic UI which is responsive to user actions.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[DeployDuckParticipant]

Hello Peter,
thank you for your answer. I understand, that It’s difficult to build such a great toolset without using inline css.

CSP for scripts is an absolute must have from my point of view. In this regard, jqWidgets is absolute exemplary.

CSP for inline css, in my estimation, is a less dramatic risk. Nevertheless, we are trying hard to maximize the security of our system because it involves medical data that should not fall into the wrong hands. Therefore, the question of whether you see a way to protect the used inline scripts by hash or nonce.

Thanks

The DeployDuck

[adminKeymaster]

Hi DeployDuck,

Could you elaborate a bit more? How can we protect inline css with hash?

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[DeployDuckParticipant]

Hi Peter,
what I meen is explained here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
Please scroll down to “Unsafe inline styles”.

One possibility is to use hash – but only if the skript isn’t dynamic.

The other possiblity to allow inline css with CSP fully activated is to label the inserted css with a nonce like this:

<style nonce="2726c7f26c">
#inline-style { background: red; }
</style>

In addition, the nonce must be entered in the header of the page in the corresponding Content Security Policy:
Content-Security-Policy: style-src 'nonce-2726c7f26c'

I understand that this could be difficult to implement in your product. But maybe the one described here is an approach that you could follow:
https://stackoverflow.com/questions/24713440/banned-inline-style-csp-and-dynamic-positioning-of-html-elements
Take a look at answer 17.

I took a quick look at the sources of jqxcore.js. In it I find “setAttribute” used.
Maybe that’s an approach. Should only be a suggestion.

Have nice day

The Deploy Duck

[Peter StoevKeymaster]

Hi,

We are mostly using the last one: document.getElementById(id).style.left = '343px';in our code. setAttribute is used for setting attributes only, but we don’t set the style attribute like that. As things like scrolling for example are dynamic and include changing the ‘top’ and ‘left’ CSS properties, we do that by setting style.left = …. or style.top = … We also use the same approach when we have dragging included. For example, when dragging a Grid column header to the Grid’s grouping panel, we position the dragged columns dynamically with “absolute” positioning and again “left” and “top” CSS properties.

Best Regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com

[DeployDuckParticipant]

Hi Peter,
thank you for clarification.

With Regards,

The Deploy Duck

[Author]

Posts