4

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?

Tim
  • 3,576
  • 6
  • 44
  • 58
  • Possible duplicate of [Banned inline style CSP and dynamic positioning of HTML elements](https://stackoverflow.com/questions/24713440/banned-inline-style-csp-and-dynamic-positioning-of-html-elements) – Stephen R Aug 12 '18 at 13:08

2 Answers2

5

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 )

Stephen R
  • 3,512
  • 1
  • 28
  • 45
  • Yeah, CSP is tricky, but great once you get the hang of it. There’s a nice PHP class I use to handle it for me (CSP builder); but I still need to know the subtle ins and outs – Stephen R Aug 13 '18 at 14:49
0

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.

  • 2
    Setting CSS via JavaScript doesn’t hit the same CSP limitations. It’s not really inline styles; rather, you’re manipulating the DOM which CSP allows – Stephen R Aug 11 '18 at 15:26
  • Small quibble, this is incorrect: "*Use a CSP nonce to allow inline style **attributes** on selected **elements**.*" ... The nonce only works with "style elements" (aka ` – IncredibleHat Jun 11 '20 at 13:27