-
-
Notifications
You must be signed in to change notification settings - Fork 2k
Apply styles to SVG text elements directly as allowed by strict CSPs #7256
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.
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
Open
martian111
wants to merge
3
commits into
plotly:master
Choose a base branch
from
martian111:svg-text-utils-with-strict-csp
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 1 commit
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next
Next commit
Apply styles to SVG text elements allowed by strict CSPs
Strict Content Security Policies (those without 'unsafe-inline' keyword)
does not permit inline styles (setting the 'style' attribute in code).
However, setting individual style properties on an element object is
allowed.
Therefore, fix the "svg_text_utils.js" by changing the code that
retrieves, manipulates and applies the style attribute strings of the
"pseudo-HTML" configuration to instead parse and/or apply styles
directly on the element. In other words, instead of using
`d3.select(node).attr("style", "some string value")`, use
`d3.select(node).style(name, value)` as shown in the D3JS docs:
https://d3js.org/d3-selection/selecting#select
With this method, in addition to it being allowed by string CSPs, the
D3 JS library and/or the browser seems to do some level of input
validation and normalization. As such, unit test cases were updated to
account for this differences, which includes:
- Order and format of the attributes were changed. For example,
there will be a space after the colon of the CSS style when read back
from the browser.
- Invalid style attributes would not be applied. Thus, fixed test cases
with actual valid styles.
- Setting the "color" style attribute in SVG text actually normalizes to
setting the "fill" color attribute.
- Using "Times New Roman" font will cause "make-baseline" test to fail
due to "error 525: plotly.js error" when run by the Kaleido Python
library. Root cause of that is probably too deep to get into and
removing it does not change the substance of that test case (using
"Times, serif" achieves the same result).- Loading branch information
commit 91f668c03e5b474152842565f54ced1b577d4340
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this change necessary? Would the former family list be handled differently by the new code?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If I remember correctly (it's been a while now), it caused errors with the test automation when run by CircleCI (don't have exact details at the moment). I assumed it was an environment/setup issue, for example, font not installed. Removing Times New Roman helped get the test case to run and pass without errors. I believe the spirit of the test case is intact to show that the font style did get applied as expected.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
hmph, the CI env hasn't changed though, so if the same input that used to work now causes errors, doesn't that mean there's something different now about how we're handling these attributes?
Overall this is a fantastic change! Just want to make sure we aren't creating a subtle bug along the way.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! Yes, it makes sense to double check this change. I can try to reproduce when I get a chance (maybe in the next week or two). I vaguely remember it causing the CircleCI tests to fail, but no errors when testing the fonts via the browser on my laptop. I can try to verify with a CodeSandbox.