CODEWITHSUNDEEP
viterollupcontent-security-policy
Bekzod
Bekzod

Reputation: 342

Vite + Vue 3 built project Content-Security-Policy Error (CSP) 'script-src "self"' because of new Function constructor in built files

I have added CSP header 'Content-Security-Policy': "script-src 'self'", built project, then got error:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

which disables using eval & Function constructors. Is it possible to get rid of using Function constructor in built files?

enter image description here

enter image description here

Upvotes: 4

Views: 2322

Answers (2)

sceee
sceee

Reputation: 2163

Several months later, vue-i18n v10 (which is in beta at writing) seems to resolve this.

The reason is that vue-i18n v10 by default enables JIT compilation. This specific issue (CSP problems) is also mentioned as one of the reasons for this change:

Reason: CSP problems can be solved and dynamic resources can be supported

This means the flag __INTLIFY_JIT_COMPILATION__ mentioned in the answer by @Bekzod is no longer needed starting with vue-i18n v10.0.0-alpha.5 and above (see changelog).

Just installing v10.0.0-beta.1 (at time of writing) without configuring any other settings resolved the unsafe-eval CSP errors for me.

Upvotes: 0

Bekzod
Bekzod

Reputation: 342

actually, it wasn't problem of vue 3 itself. The problem was caused from 'vue-i18n' plugin which was solved by adding

__INTLIFY_JIT_COMPILATION__: true

to define object in vite.config.ts

enter image description here

https://github.com/intlify/vue-i18n-next/issues/1457

Upvotes: 1

Related Questions