vue3 with vue-i18n-next only works with unsafe-eval CSP header

[bencevass]

While trying to update to Vue3, we have noticed that apps won't work with CSP headers that don't allow unsafe-eval. Apparently this is because the newest vue-i18n is using eval, are there any plans to fix this, or will Vue3 apps require unsafe-eval moving forward?

Module versions (please complete the following information):

• vue: 3.0.11
• vue-i18n: 9.1.6

To Reproduce Steps to reproduce the behavior: ex:

1. set Content-Security-Policy header with a script-src that doesn't contain unsafe-eaval
2. try to use any vue3 app that contains vue-i18n-next
3. See error in browser console

Expected behavior In many organizations the security guidelines dictate that CSP headers are set and unsafe-eval is usually not allowed

[PeterAlfredLee]

@bencevass Thank you for your feedback!

Unfortunately, I could not reproduce your reporting info. Could you give us the reproduction code or repo, please?

[bencevass]

Hi,

The issue is that eval or eval-like code is used in this project.

If not removed, vue apps which use vue-18n-next will be blocked by browsers, if CSP (Content-Security-Policy) headers are set and unsafe-eval is not allowed (which has been a security requirement in every project I have worked in recently).

Here you can find an example of such code: https://github.com/intlify/vue-i18n-next/blob/8da0a72fcd9c8c155b4414dbb4915fef29982390/format-explorer/src/App.vue#L63

BR Bence

[PeterAlfredLee]

Well, I think the format-explorer subproject will not be published to npmjs, and will not be included in i18n publish releases.

I think the eval-like code here is for convenience of debugging. Am I right about this @kazupon ?

[kazupon]

Well, I think the format-explorer subproject will not be published to npmjs, and will not be included in i18n publish releases.

I think the eval-like code here is for convenience of debugging. Am I right about this @kazupon ?

Yeah, that's exactly what @PeterAlfredLee was referring to. The format-explorer is what we use for debugging purposes in the message compiler. This package is not public and will not be used in any applications.

As for the CSP problem, if you are using bundler, you can solve it by using the runtime-only module, as described in the docs. https://vue-i18n.intlify.dev/ja/guide/advanced/optimization.html#improve-performance-and-reduce-bundle-size-with-runtime-build-only

Currently, Vue applications are generally developed using bundler. Therefore, it makes sense to support bundler only.

[bencevass]

Thank you, I will have a look

[kascat]

An alternative is:

import { useI18n } from 'vue-i18n'
const { messages, locale } = useI18n()
console.log(messages.value?.[locale.value]?.example)

So, can create a function to otimize: messages.value?.[locale.value]?.example

Ex:

function t (labelToTranslate) {
  const localeMessages = messages.value?.[locale.value]
  const keys = (labelToTranslate || '').split('.')
  const translatedLabel = keys.reduce((ac, key) => ac?.[key], localeMessages)

  return translatedLabel !== undefined ? translatedLabel : labelToTranslate;
}

console.log(t('role.admin'))