feat(unplugin-vue-i18n): support strict message and escape html

packages/unplugin-vue-i18n/README.md

@@ -300,6 +300,31 @@ This plugin will automatically select and bundle `petite-vue-i18n` build accordi
   > ⚠️ NOTE: 
   If you use the `js` and `ts` resources formats, set the paths, so your application code is not targeted. We recommend that resources be isolated from the application code.
 
+
+### `strictMessage`
+
+- **Type:** `boolean`
+- **Default:** `true`
+
+  Strictly checks that the locale message does not contain html tags.
+
+  If html tags are included, an error is thrown.
+
+  If you would not the error to be thrown, you can work around it by setting it to `false`, but **it means that the locale message might cause security problems with XSS**.
+
+  In that case, we recommend setting the `escapeHtml` option to `true`.
+
+
+### `escapeHtml`
+
+- **Type:** `boolean`
+- **Default:** `false`
+
+  Whether to escape html tags if they are included in the locale message.
+
+  If `strictMessage` is disabled by `false`, we recommend this option be enabled.
+
+
 ### `allowDynamic`
 
 - **Type:** `boolean`

packages/unplugin-vue-i18n/package.json

@@ -26,7 +26,7 @@
     }
   },
   "dependencies": {
-    "@intlify/bundle-utils": "^5.3.1",
+    "@intlify/bundle-utils": "^5.4.0",
     "@intlify/shared": "9.3.0-beta.17",
     "@rollup/pluginutils": "^5.0.2",
     "@vue/compiler-sfc": "^3.2.47",

packages/unplugin-vue-i18n/src/index.ts

@@ -121,6 +121,15 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
   debug('esm', esm)
 
   const allowDynamic = !!options.allowDynamic
+  debug('allowDynamic', allowDynamic)
+
+  const strictMessage = isBoolean(options.strictMessage)
+    ? options.strictMessage
+    : true
+  debug('strictMessage', strictMessage)
+
+  const escapeHtml = !!options.escapeHtml
+  debug('escapeHtml', escapeHtml)
 
   let isProduction = false
   let sourceMap = false
@@ -294,6 +303,8 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
                   isGlobal: globalSFCScope,
                   useClassComponent,
                   allowDynamic,
+                  strictMessage,
+                  escapeHtml,
                   bridge,
                   exportESM: esm,
                   forceStringify
@@ -449,6 +460,8 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
           {
             forceStringify,
             bridge,
+            strictMessage,
+            escapeHtml,
             exportESM: esm,
             useClassComponent
           }
@@ -500,6 +513,8 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
               isGlobal: globalSFCScope,
               useClassComponent,
               allowDynamic,
+              strictMessage,
+              escapeHtml,
               bridge,
               exportESM: esm,
               forceStringify
@@ -555,6 +570,8 @@ export const unplugin = createUnplugin<PluginOptions>((options = {}, meta) => {
               isGlobal: globalSFCScope,
               useClassComponent,
               bridge,
+              strictMessage,
+              escapeHtml,
               exportESM: esm,
               forceStringify
             }
@@ -644,12 +661,16 @@ async function generateBundleResources(
     isGlobal = false,
     bridge = false,
     exportESM = true,
+    strictMessage = true,
+    escapeHtml = false,
     useClassComponent = false
   }: {
     forceStringify?: boolean
     isGlobal?: boolean
     bridge?: boolean
     exportESM?: boolean
+    strictMessage?: boolean
+    escapeHtml?: boolean
     useClassComponent?: boolean
   }
 ) {
@@ -666,6 +687,8 @@ async function generateBundleResources(
         useClassComponent,
         bridge,
         exportESM,
+        strictMessage,
+        escapeHtml,
         forceStringify
       }) as CodeGenOptions
       parseOptions.type = 'bare'
@@ -743,7 +766,9 @@ function getOptions(
     bridge = false,
     exportESM = true,
     useClassComponent = false,
-    allowDynamic = false
+    allowDynamic = false,
+    strictMessage = true,
+    escapeHtml = false
   }: {
     inSourceMap?: RawSourceMap
     forceStringify?: boolean
@@ -752,6 +777,8 @@ function getOptions(
     exportESM?: boolean
     useClassComponent?: boolean
     allowDynamic?: boolean
+    strictMessage?: boolean
+    escapeHtml?: boolean
   }
 ): Record<string, unknown> {
   const mode: DevEnv = isProduction ? 'production' : 'development'
@@ -763,6 +790,8 @@ function getOptions(
     forceStringify,
     useClassComponent,
     allowDynamic,
+    strictMessage,
+    escapeHtml,
     bridge,
     exportESM,
     env: mode,

packages/unplugin-vue-i18n/src/types.ts

@@ -12,4 +12,6 @@ export interface PluginOptions {
   bridge?: boolean
   useClassComponent?: boolean
   useVueI18nImportName?: boolean
+  strictMessage?: boolean
+  escapeHtml?: boolean
 }

packages/unplugin-vue-i18n/test/fixtures/locales/html.json

@@ -0,0 +1,4 @@
+{
+  "hi": "<p>hi there!</p>",
+  "alert": "<script>window.alert('hi there!')</script>"
+}

packages/unplugin-vue-i18n/test/utils.ts

@@ -38,6 +38,10 @@ export async function bundleVite(
       ? 'info'
       : 'silent'
     : 'silent'
+  options.strictMessage = isBoolean(options.strictMessage)
+    ? options.strictMessage
+    : true
+  options.escapeHtml = !!options.escapeHtml
 
   const alias: Record<string, string> = {
     vue: 'vue/dist/vue.runtime.esm-browser.js'
@@ -154,6 +158,10 @@ export async function bundleAndRun(
   options.useClassComponent = isBoolean(options.useClassComponent) || false
   options.bridge = isBoolean(options.bridge) || false
   options.allowDynamic = isBoolean(options.allowDynamic) || false
+  options.strictMessage = isBoolean(options.strictMessage)
+    ? options.strictMessage
+    : true
+  options.escapeHtml = !!options.escapeHtml
 
   const { code, map } = await bundler(fixture, options)
 

packages/unplugin-vue-i18n/test/vite/bundle-import.test.ts

@@ -16,6 +16,7 @@ import { createMessageContext } from '@intlify/core-base'
   test(testcase, async () => {
     const options = {
       input,
+      strictMessage: false,
       include: [resolve(__dirname, '../fixtures/locales/**')]
     }
     const { exports: messages } = await bundleAndRun(

packages/unplugin-vue-i18n/test/vite/resource-compilation.test.ts

@@ -1,8 +1,19 @@
 import { resolve } from 'pathe'
 import { bundleVite, bundleAndRun } from '../utils'
-import { isFunction } from '@intlify/shared'
+import { isFunction, assign } from '@intlify/shared'
 import { createMessageContext } from '@intlify/core-base'
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let spyConsoleError: any
+beforeEach(() => {
+  spyConsoleError = jest.spyOn(global.console, 'error').mockImplementation()
+})
+
+afterEach(() => {
+  spyConsoleError.mockReset()
+  spyConsoleError.mockRestore()
+})
+
 const options = {
   target: './fixtures/locales/',
   include: [resolve(__dirname, '../fixtures/locales/**')]
@@ -57,3 +68,30 @@ test('dynamical resource with js / ts', async () => {
   })
   expect(isFunction(module)).toBe(true)
 })
+
+test('strict message', async () => {
+  let occured = false
+  try {
+    await bundleAndRun('html.json', bundleVite, {
+      ...options
+    })
+  } catch (e) {
+    occured = true
+  }
+  expect(occured).toBe(true)
+})
+
+test('escape message', async () => {
+  const { module } = await bundleAndRun(
+    'html.json',
+    bundleVite,
+    assign(options, {
+      strictMessage: false,
+      escapeHtml: true
+    })
+  )
+  expect(module.hi(createMessageContext())).toBe(`<p>hi there!</p>`)
+  expect(module.alert(createMessageContext())).toBe(
+    `<script>window.alert('hi there!')</script>`
+  )
+})

yarn.lock

@@ -969,7 +969,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@intlify/bundle-utils@^5.3.1, @intlify/bundle-utils@workspace:packages/bundle-utils":
+"@intlify/bundle-utils@^5.4.0, @intlify/bundle-utils@workspace:packages/bundle-utils":
   version: 0.0.0-use.local
   resolution: "@intlify/bundle-utils@workspace:packages/bundle-utils"
   dependencies:
@@ -1114,7 +1114,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@intlify/unplugin-vue-i18n@workspace:packages/unplugin-vue-i18n"
   dependencies:
-    "@intlify/bundle-utils": ^5.3.1
+    "@intlify/bundle-utils": ^5.4.0
     "@intlify/shared": 9.3.0-beta.17
     "@rollup/pluginutils": ^5.0.2
     "@vue/compiler-sfc": ^3.2.47