CSP 'unsafe-eval' after v6.4.0

qcp commented 1 year ago

请确认

[X] 我可以确认这个问题无法在 ECharts 项目本身中复现。

您是如何将 Vue-ECharts 引入项目的？

通过 ES 模块 import

版本信息

❯ npm ls
├─ @babel/parser@7.21.4
├─ @esbuild/linux-arm@0.17.17
├─ @esbuild/linux-arm64@0.17.17
├─ @esbuild/linux-ia32@0.17.17
├─ @esbuild/linux-loong64@0.17.17
├─ @esbuild/linux-mips64el@0.17.17
├─ @esbuild/linux-ppc64@0.17.17
├─ @esbuild/linux-riscv64@0.17.17
├─ @esbuild/linux-s390x@0.17.17
├─ @esbuild/linux-x64@0.17.17
├─ @vitejs/plugin-vue@4.1.0
├─ @volar/language-core@1.3.0-alpha.0
│  └─ @volar/source-map@1.3.0-alpha.0
├─ @volar/source-map@1.3.0-alpha.0
│  └─ muggle-string@^0.2.2
├─ @volar/typescript@1.3.0-alpha.0
│  └─ @volar/language-core@1.3.0-alpha.0
├─ @volar/vue-language-core@1.2.0
│  ├─ @volar/language-core@1.3.0-alpha.0
│  ├─ @volar/source-map@1.3.0-alpha.0
│  ├─ @vue/compiler-dom@^3.2.47
│  ├─ @vue/compiler-sfc@^3.2.47
│  ├─ @vue/reactivity@^3.2.47
│  ├─ @vue/shared@^3.2.47
│  ├─ minimatch@^6.1.6
│  ├─ muggle-string@^0.2.2
│  └─ vue-template-compiler@^2.7.14
├─ @volar/vue-typescript@1.2.0
│  ├─ @volar/typescript@1.3.0-alpha.0
│  └─ @volar/vue-language-core@1.2.0
├─ @vue/compiler-core@3.2.47
│  ├─ @vue/shared@3.2.47
│  ├─ @babel/parser@^7.16.4
│  ├─ estree-walker@^2.0.2
│  └─ source-map@^0.6.1
├─ @vue/compiler-dom@3.2.47
│  ├─ @vue/shared@3.2.47
│  └─ @vue/compiler-core@3.2.47
├─ @vue/compiler-sfc@3.2.47
│  ├─ @babel/parser@^7.16.4
│  ├─ @vue/compiler-core@3.2.47
│  ├─ @vue/compiler-dom@3.2.47
│  ├─ @vue/compiler-ssr@3.2.47
│  ├─ @vue/reactivity-transform@3.2.47
│  ├─ @vue/shared@3.2.47
│  ├─ estree-walker@^2.0.2
│  ├─ magic-string@^0.25.7
│  ├─ source-map@^0.6.1
│  └─ postcss@^8.1.10
├─ @vue/compiler-ssr@3.2.47
│  ├─ @vue/shared@3.2.47
│  └─ @vue/compiler-dom@3.2.47
├─ @vue/reactivity@3.2.47
│  └─ @vue/shared@3.2.47
├─ @vue/reactivity-transform@3.2.47
│  ├─ @babel/parser@^7.16.4
│  ├─ @vue/compiler-core@3.2.47
│  ├─ @vue/shared@3.2.47
│  ├─ estree-walker@^2.0.2
│  └─ magic-string@^0.25.7
├─ @vue/runtime-core@3.2.47
│  ├─ @vue/shared@3.2.47
│  └─ @vue/reactivity@3.2.47
├─ @vue/runtime-dom@3.2.47
│  ├─ @vue/shared@3.2.47
│  ├─ @vue/runtime-core@3.2.47
│  └─ csstype@^2.6.8
├─ @vue/server-renderer@3.2.47
│  ├─ @vue/shared@3.2.47
│  └─ @vue/compiler-ssr@3.2.47
├─ @vue/shared@3.2.47
├─ balanced-match@1.0.2
├─ brace-expansion@2.0.1
│  └─ balanced-match@^1.0.0
├─ csstype@2.6.21
├─ de-indent@1.0.2
├─ echarts@5.4.2
│  ├─ tslib@2.3.0
│  └─ zrender@5.4.3
├─ esbuild@0.17.17
├─ estree-walker@2.0.2
├─ he@1.2.0
├─ magic-string@0.25.9
│  └─ sourcemap-codec@^1.4.8
├─ minimatch@6.2.0
│  └─ brace-expansion@^2.0.1
├─ muggle-string@0.2.2
├─ nanoid@3.3.6
├─ picocolors@1.0.0
├─ postcss@8.4.22
│  ├─ nanoid@^3.3.6
│  ├─ picocolors@^1.0.0
│  └─ source-map-js@^1.0.2
├─ resize-detector@0.3.0
├─ rollup@3.20.4
├─ source-map@0.6.1
├─ source-map-js@1.0.2
├─ sourcemap-codec@1.4.8
├─ tslib@2.3.0
├─ typescript@5.0.4
├─ vite@4.3.0-beta.7
│  ├─ esbuild@^0.17.5
│  ├─ postcss@^8.4.21
│  └─ rollup@^3.20.2
├─ vue@3.2.47
│  ├─ @vue/shared@3.2.47
│  ├─ @vue/compiler-dom@3.2.47
│  ├─ @vue/runtime-dom@3.2.47
│  ├─ @vue/compiler-sfc@3.2.47
│  └─ @vue/server-renderer@3.2.47
├─ vue-demi@0.13.11
├─ vue-echarts@6.5.4
│  ├─ resize-detector@^0.3.0
│  └─ vue-demi@^0.13.2
├─ vue-template-compiler@2.7.14
│  ├─ de-indent@^1.0.2
│  └─ he@^1.2.0
├─ vue-tsc@1.2.0
│  ├─ @volar/vue-language-core@1.2.0
│  └─ @volar/vue-typescript@1.2.0
└─ zrender@5.4.3
   └─ tslib@2.3.0

问题详情

After upgrade to v6.4.0 or above we got csp error.

Because of new Function here.

CSP setting (min reproduce):

content-security-policy: 
      base-uri 'self';
      default-src 'self'; 
      script-src *.webcontainer.io http: https: 'unsafe-inline';
      style-src 'self' *.webcontainer.io https: data: blob: 'unsafe-inline';

Given the security requirements, this is a huge problem for us.

问题复现

https://stackblitz.com/edit/vitejs-vite-hqrq2t?file=index.html,src%2FApp.vue&terminal=dev

Justineo commented 1 year ago

This is indeed a problem. We need to use new Function to safely register a web component for progressive enhancement, since VueECharts currently supports older browsers.

We have removed this enhancement for CSP-strict scenarios since vue-echarts@6.5.5.

klastarnstrom commented 1 month ago

This is indeed a problem. We need to use new Function to safely register a web component for progressive enhancement, since VueECharts currently supports older browsers.

We have removed this enhancement for CSP-strict scenarios since vue-echarts@6.5.5.

How do I enable this CSP strict scenario?

Justineo commented 1 month ago

How do I enable this CSP strict scenario?

https://github.com/ecomfe/vue-echarts?tab=readme-ov-file#csp-style-src-or-style-src-elem

ecomfe / vue-echarts