javascript - CSP - How to solve style-src unsafe-inline -when having dynamically positioned page elements - Stack Overflow

admin管理员组

文章数量:1317359

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 () then that means we need to fully allow style-src: unsafe-inline

I'm sure this is a mon 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?

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/en-US/docs/Web/HTTP/CSP) then that means we need to fully allow style-src: unsafe-inline

I'm sure this is a mon 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?

• javascript
• css
• content-security-policy

Share Improve this question Follow asked Jul 27, 2018 at 19:51 TimTim 3,81677 gold badges4545 silver badges6060 bronze badges 1

• Possible duplicate of Banned inline style CSP and dynamic positioning of HTML elements – Stephen R Commented Aug 12, 2018 at 13:08

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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./a/29089970/339440 )

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 mon 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.

本文标签：