The issue has been closed

Content-Security-Policy: Failed to construct 'Worker': Access to the script at #5462

matzeeable posted onGitHub

G2 Version: 4.2.10
Platform: All browsers
Mini Showcase(like screenshots):

We are using this package in a published WordPress plugin (wordpress.org). One of our users cannot use statistics as it seems that G2 cannot work with Content-Security-Policy (CSP).

The user has configured the following CSP header:

Content-Security-Policy: default-src https: 'unsafe-inline' 'unsafe-eval';

Afterward, G2 cannot render any statistics, furthermore it runs into an uncaught exception:

Refused to create a worker from 'blob:https://www.-------.ch/74ff2c72-6e8d-40db-8424-182bd22efc3c' because it violates the following Content Security Policy directive: "default-src https: 'unsafe-inline' 'unsafe-eval'". Note that 'worker-src' was not explicitly set, so 'default-src' is used as a fallback.

Uncaught DOMException: Failed to construct 'Worker': Access to the script at 'blob:https://www.-------.ch/74ff2c72-6e8d-40db-8424-182bd22efc3c' is denied by the document's Content Security Policy.

This is caused by: https://github.com/antvis/algorithm/blob/d0b9a0fbea68cc6f2b26477d30c492d13bb7df9a/packages/graph/src/workers/createWorker.ts#L13

To make this work, we need to tell our users to enable worker-src with blob:, but this one our users justifiably reject on the basis of security.

Is it somehow possible to "skip" Web workers when they cannot be used?

Can you show your code?

posted by hustcc over 1 year ago

Does not work:

<!DOCTYPE html>
<html>
  <head>
    <title>This is the title of the webpage!</title>
    <meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-inline' 'unsafe-eval';" />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/antv-g2/4.2.10/g2.min.js"
      integrity="sha512-sLJoPKEALc+stEWFaPQBHWcTE5KJGFRa3mzaeBbIEK/MqzrrV1DLHE+gkfBI9WvhXtGff2Ur9xszlWH723cPAQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div id="container" style="width: 600px; height: 400px"></div>
    <script>
      console.log(window.G2);

      const { Chart } = window.G2;

      // Sample data
      const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 320 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 },
      ];

      const chart = new Chart({
        container: "container",
        theme: "classic",
        autoFit: true,
        height: 500,
      });

      chart.data(data);
      chart.render();
    </script>
  </body>
</html>

When I change the

<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-inline' 'unsafe-eval';" />

<meta http-equiv="Content-Security-Policy" content="default-src https: 'unsafe-inline' 'unsafe-eval'; worker-src https: blob:;" />

it works.

I also see that this issue got resolved with v5, as I cannot reproduce. Is there an official release date for v5? And I see it also has many breaking changes, will something like a codemod exist later? 😊

posted by matzeeable over 1 year ago

@matzeeable Can help to fixed this issue in your debugger env in v4? Now v5 is released, in next month, we will remove the next tag in npm.

posted by hustcc over 1 year ago

When using @next it looks like the issue is resolved. I see it also has many breaking changes, will something like a codemod exist later? 😊

posted by matzeeable over 1 year ago

@matzeeable Sorry, we will not provide a codemod because the changes are too significant and it would be difficult to implement a codemod.

posted by hustcc over 1 year ago

When using @next it looks like the issue is resolved. I see it also has many breaking changes, will something like a codemod exist later? 😊

how to use @next?

posted by ufresh2013 over 1 year ago

Fund this Issue

$0.00

Funded

Pull requests

Content-Security-Policy: Failed to construct 'Worker': Access to the script at #5462

Company

Community

Support

Connect