Skip to content

fix(svg): fix assigning style attribute does not work when CSP is enforced#1030

Merged
plainheart merged 1 commit intoecomfe:masterfrom
alxnddr:fix-csp-issue
Sep 22, 2023
Merged

fix(svg): fix assigning style attribute does not work when CSP is enforced#1030
plainheart merged 1 commit intoecomfe:masterfrom
alxnddr:fix-csp-issue

Conversation

@alxnddr
Copy link
Contributor

@alxnddr alxnddr commented Sep 18, 2023

Fixes apache/echarts#16610

Overview

This pull request addresses a specific limitation concerning Content Security Policy (CSP). When CSP is enabled, direct assignments to an element's style property using a string are disallowed. However it is possible to use element.style.cssText = ... instead.

Reproduction

Create and open an HTML file with the following content:

<!DOCTYPE html>
<html>
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'nonce-my-nonce'; style-src 'nonce-my-nonce'"
    />
    <style nonce="my-nonce">
      #main {
        width: 100vw;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="main"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zrender/5.4.4/zrender.min.js" nonce="my-nonce"></script>
    <script nonce="my-nonce">
      const zr = zrender.init(document.getElementById("main"), {
        renderer: "svg",
      });

      var text = new zrender.Text({
        style: {
          text: "this text should be 64px and bold",
          fill: "red",
          font: "bold 64px sans-serif",
          textAlign: "center",
        },
        x: 100,
        y: 100,
      });

      zr.add(text);
    </script>
  </body>
</html>

In the console you should see the following error:
Screen Shot 2023-09-18 at 4 18 47 PM

@luizarakaki
Copy link

luizarakaki commented Sep 19, 2023

@Ovilia @pissang
Can you take a look on this PR? Happy to iterate on it if necessary.

@pissang pissang requested a review from plainheart September 21, 2023 14:43
@plainheart plainheart merged commit 9263428 into ecomfe:master Sep 22, 2023
This was referenced Dec 4, 2023
Closed
Closed
@alxnddr alxnddr mentioned this pull request Jan 17, 2024
Merged
@plainheart plainheart mentioned this pull request Jan 30, 2024
Closed
@Ovilia Ovilia mentioned this pull request Jan 31, 2024
Open
@Manviel Manviel mentioned this pull request Mar 14, 2024
Closed
@X-oss-byte X-oss-byte mentioned this pull request May 25, 2024
Open
@chandraguptsharma1 chandraguptsharma1 mentioned this pull request Jul 17, 2024
Open
@Elenore23 Elenore23 mentioned this pull request Jul 20, 2024
Open
@junior junior mentioned this pull request Jul 26, 2024
Closed
@X-oss-byte X-oss-byte mentioned this pull request Aug 7, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@pissang pissang pissang approved these changes

@plainheart plainheart plainheart approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug] CSP

4 participants

@alxnddr @luizarakaki @pissang @plainheart