CSP-当动态放置页面元素时，如何解决style-src unsafe-inline

Question

In our app code we allow some objects to drag and drop around the page. Also we have things like popups that need to be positioned below buttons and dialogs that we position in the page ect.

To do so we need to allow the following inline css properties

• z-index
• top, bottom, left, right
• height, width

We cant really make classes for this, imagine left for example could be 0 to 20000 so we would need millions of classes.

I cant see any way other than inline css.

So to solve for CSP ( https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP ) then that means we need to fully allow style-src: unsafe-inline

I'm sure this is a common scenario. What do people do about this case? We also use veracode to scan our software so im thinking we just "mitagate" this by explaining that we only allow a set of inline css attributes.

But i would think maybe CSP should allow a certain subset of dynamic css attributes.

Has anyone encountered this and have any thoughts?

Answer 1

When you write CSS to elements via JavaScript using the CSSOM, it's not the same as literally writing style=“...”; rather, you are directly manipulating the DOM [correction: the CSSOM]. CSP allows these types of styles even when not allowing unsafe-inline styles.

(See here for an example. You don't want to add a literal “style” attribute to the element, but use the CSSOM — https://stackoverflow.com/a/29089970/339440 )

Answer 2

Unfortunately, there's currently no "clean" way of doing this. CSP doesn't currently have any way of inspecting style attributes to determine if they're safe; it's unclear that this is possible at all, as almost any CSS attribute could be used to create misleading or otherwise unintended content on a site.

The options I see are:

1. Use a CSP nonce to allow inline style attributes on selected elements. This is similar to unsafe-inline , but more selective (and hence a bit safer).

2. When CSS attr() is implemented in all common browsers, you :

    /* ATTENTION: This is not a working example; see below */ .position-by-attr { left: attr(data-left px); top: attr(data-top px); } 

    <div class="position-by-attr" left="123" top="456"> … </div> 

   However, note that this feature is not currently implemented in any browser . It is present in the CSS3 specification, but has not been implemented. It may be years (if ever) before it is practically usable.