Safe message rendering at the browser?

[wladston]

Hi,

I'm in the process of migrating a Vue2 app to Vue3.

The app needs to load .json messages from a server, and compile them at the browser. I can't pre-compile the all the messages, because some of them are dynamically generated by a Python backend.

It seems like the all versions of vue-i18n that are compatible with vue3 now require a runtime-only version in order to pass CSP. It seems like it's impossible to use the compiler + runtime build with CSP. Is that correct?

If so, is it impossible to migrate my app to vue3 under CSP? Is there anything I can do to have a build of vue-i18n that doesn't use eval or new Function?

Everywhere I looked, people very strongly advised against unsafe-eval headers.

What is your advice for me?

Thanks very much for your help,

[kazupon]

The app needs to load .json messages from a server, and compile them at the browser. I can't pre-compile the all the messages, because some of them are dynamically generated by a Python backend.

Deal with this use case, intlify project provides a cli & API.
By using the CLI & API, you can compile .json on the back-end.
https://github.com/intlify/cli

[wladston]

Thank you so much for answering me again, @kazupon :)

Currently, the section of my app that loads remote messages looks like this:

resp = await fetch('https://server.example.com/api/get-messages/')
msg = resp.jsonData.msg
this.$i18n.mergeLocaleMessage(this.$i18n.locale, msg)
this.$forceUpdate()

This works when I use the curreent compiler + runtime build of vue-i18n for vue3.

How can I addapt this code section in order to use the CLI & API as you suggested?

If there's any documentation as of how this can be performed, or a code example, I'd be very glad to see it.

Thanks once more!

[kazupon]

I’ll prepare the example that will be used with compilation.

[wladston]

I’ll prepare the example that will be used with compilation.

Thank you in advance for your kindness 🙇‍♂️

[kazupon]

I've just prepared it!
#891

please check the below example!
https://github.com/intlify/vue-i18n-next/tree/master/examples/backend

[wladston]

It coudn't be easier to understand. Thank you so much! I'll work on implementing this on the app.