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

Apply styles to SVG text elements directly as allowed by strict CSPs #7256

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Apply styles to SVG text elements directly as allowed by strict CSPs #7256

wants to merge 2 commits into from
+131 −67

Commits on Oct 27, 2024

  1. 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).
    @martian111
    martian111 committed Oct 27, 2024
    Configuration menu
    Copy the full SHA
    91f668c View commit details
    Browse the repository at this point in the history

  2. Add draftlogs for Pull Request plotly#7256

    @martian111
    martian111 committed Oct 27, 2024
    Configuration menu
    Copy the full SHA
    d561644 View commit details
    Browse the repository at this point in the history