Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use CSSOM for style manipulations #566

Closed
thegranddesign opened this issue Jun 28, 2018 · 5 comments · Fixed by #601
Closed

Use CSSOM for style manipulations #566

thegranddesign opened this issue Jun 28, 2018 · 5 comments · Fixed by #601

Comments

@thegranddesign
Copy link

Inline styling causes CSP violations and I'd much rather just put it in my CSS manually.

Additionally it would be nice to just be able to @import the styles in my CSS rather than do inline styles.
@thegranddesign
Copy link
Author

BTW, no, adding 'unsafe-inline' is not a viable option.

@pzuraq
Copy link
Contributor

pzuraq commented Jun 28, 2018

Unfortunately that’s not an option for us, a large portion of the styles have to be inline. Specifically, fixed columns, fixed headers and footers, and column widths all are accomplished with inline styles.

VerticalCollection also achieves its occlusion through the use of inline styles (manipulating the height of occluded content). I realize the security concerns here, but I don’t think there is a way around this. If you know of a way to dynamically set values like top, left, right, width, and height without doing it inline please let me know.

@pzuraq pzuraq closed this as completed Jun 28, 2018
@thegranddesign
Copy link
Author

You should be able to change it via JS yes?

@pzuraq
Copy link
Contributor

pzuraq commented Jun 28, 2018

We actually are changing everything via JS, however we are setting them via setAttribute which is not allowed. It appears that using HTMLElement.style to set individual properties is allowed, even though the end result is the same. It must do sanitization itself.

I added a note to the MDN on this since it's not documented anywhere, event the CSP spec doesn't explicitly mention it (but it also doesn't explicitly disallow it). Will reopen this and rename, the styles are not optional but we need to use CSSOM to set them.

@pzuraq pzuraq reopened this Jun 28, 2018
@pzuraq pzuraq changed the title Remove (Or Add Option to Disable) Inline Styling Use CSSOM for style manipulations Jun 28, 2018
@thegranddesign
Copy link
Author

Yes, that’s what I was referring to. Thank you!

pzuraq added a commit that referenced this issue Jul 31, 2018
@pzuraq
[bugfix] Use CSSOM for style manipulations
f19477e 
Currently we assign the style property directly when manipulating CSS.
This is an XSS vector, and prevents security conscious users from using
a CSP that prevents this type of manipulation. We can avoid it by
assigning style properties directly on the `element.style` object, which
filters the text safely (as per CSSOM).

fixes #566
@pzuraq pzuraq mentioned this issue Jul 31, 2018
Merged
pzuraq added a commit that referenced this issue Aug 2, 2018
@pzuraq
[bugfix] Use CSSOM for style manipulations (#601)
aeceb6c 
* [bugfix] Use CSSOM for style manipulations

Currently we assign the style property directly when manipulating CSS.
This is an XSS vector, and prevents security conscious users from using
a CSP that prevents this type of manipulation. We can avoid it by
assigning style properties directly on the `element.style` object, which
filters the text safely (as per CSSOM).

fixes #566

* fix prettier

* fix api wrappers
@razor-x razor-x mentioned this issue Feb 25, 2022
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[bugfix] Use CSSOM for style manipulations Addepar/ember-table
2 participants
@pzuraq @thegranddesign