feat: escap html parameter options (#139)

Author: kazupon

README.md

@@ -228,6 +228,7 @@ Note: the replacement value **must be boolean literals** and cannot be strings,
     - [x] dateTimeFormats
     - [x] numberFormats
     - [x] warnHtmlMessage
+    - [x] escapeParameter
   - methods
     - [x] t
     - [x] getLocaleMessages
@@ -263,6 +264,7 @@ Note: the replacement value **must be boolean literals** and cannot be strings,
     - [x] formatFallbackMessages
     - [x] preserveDirectiveContent
     - [x] warnHtmlInMessage
+    - [x] escapeParameterHtml
     - [x] postTranslation
     - [x] componentInstanceCreatedListener
     - [x] t

src/composer.ts

@@ -139,6 +139,7 @@ export interface ComposerOptions<Message = VueMessageType> {
   fallbackFormat?: boolean
   postTranslation?: PostTranslationHandler<Message>
   warnHtmlMessage?: boolean
+  escapeParameter?: boolean
 }
 
 /**
@@ -183,6 +184,7 @@ export interface Composer<
   fallbackRoot: boolean
   fallbackFormat: boolean
   warnHtmlMessage: boolean
+  escapeParameter: boolean
   // methods
   t(key: Path): string
   t(key: Path, plural: number): string
@@ -469,6 +471,8 @@ export function createComposer<
     ? options.warnHtmlMessage
     : true
 
+  let _escapeParameter = !!options.escapeParameter
+
   // custom linked modifiers
   // prettier-ignore
   const _modifiers = __root
@@ -509,6 +513,7 @@ export function createComposer<
       unresolving: true,
       postTranslation: _postTranslation === null ? undefined : _postTranslation,
       warnHtmlMessage: _warnHtmlMessage,
+      escapeParameter: _escapeParameter,
       __datetimeFormatters: isPlainObject(_context)
         ? ((_context as unknown) as RuntimeInternalContext).__datetimeFormatters
         : undefined,
@@ -933,6 +938,13 @@ export function createComposer<
       _warnHtmlMessage = val
       _context.warnHtmlMessage = val
     },
+    get escapeParameter(): boolean {
+      return _escapeParameter
+    },
+    set escapeParameter(val: boolean) {
+      _escapeParameter = val
+      _context.escapeParameter = val
+    },
     // methods
     t,
     d,

src/core/context.ts

@@ -92,6 +92,7 @@ export interface RuntimeOptions<Message = string> {
   postTranslation?: PostTranslationHandler<Message>
   processor?: MessageProcessor<Message>
   warnHtmlMessage?: boolean
+  escapeParameter?: boolean
   messageCompiler?: MessageCompiler<Message>
   onWarn?: (msg: string, err?: Error) => void
 }
@@ -124,6 +125,7 @@ export interface RuntimeTranslationContext<Messages = {}, Message = string>
   postTranslation: PostTranslationHandler<Message> | null
   processor: MessageProcessor<Message> | null
   warnHtmlMessage: boolean
+  escapeParameter: boolean
   messageCompiler: MessageCompiler<Message>
 }
 
@@ -245,6 +247,7 @@ export function createRuntimeContext<
   const warnHtmlMessage = isBoolean(options.warnHtmlMessage)
     ? options.warnHtmlMessage
     : true
+  const escapeParameter = !!options.escapeParameter
   const messageCompiler = isFunction(options.messageCompiler)
     ? options.messageCompiler
     : compile
@@ -275,6 +278,7 @@ export function createRuntimeContext<
     postTranslation,
     processor,
     warnHtmlMessage,
+    escapeParameter,
     messageCompiler,
     onWarn,
     __datetimeFormatters,

src/core/translate.ts

@@ -34,9 +34,11 @@ import {
   isEmptyObject,
   generateFormatCacheKey,
   generateCodeFrame,
+  escapeHtml,
   inBrowser,
   mark,
-  measure
+  measure,
+  isObject
 } from '../utils'
 import { DevToolsTimelineEvents } from '../debugger/constants'
 
@@ -83,6 +85,9 @@ const isMessageFunction = <T>(val: unknown): val is MessageFunction<T> =>
  *
  *    // suppress localize fallback warning option, override context.fallbackWarn
  *    translate(context, 'foo.bar', { name: 'kazupon' }, { fallbackWarn: false })
+ *
+ *    // escape parameter option, override context.escapeParameter
+ *    translate(context, 'foo.bar', { name: 'kazupon' }, { escapeParameter: true })
  */
 
 /** @internal */
@@ -94,6 +99,7 @@ export type TranslateOptions = {
   locale?: Locale
   missingWarn?: boolean
   fallbackWarn?: boolean
+  escapeParameter?: boolean
 }
 
 // `translate` function overloads
@@ -210,6 +216,10 @@ export function translate<Messages, Message = string>(
     ? options.fallbackWarn
     : context.fallbackWarn
 
+  const escapeParameter = isBoolean(options.escapeParameter)
+    ? options.escapeParameter
+    : context.escapeParameter
+
   // prettier-ignore
   const defaultMsgOrKey: string =
     isString(options.default) || isBoolean(options.default) // default by function option
@@ -222,6 +232,9 @@ export function translate<Messages, Message = string>(
   const enableDefaultMsg = fallbackFormat || defaultMsgOrKey !== ''
   const locale = isString(options.locale) ? options.locale : context.locale
 
+  // escape params
+  escapeParameter && escapeParams(options)
+
   // resolve message format
   // eslint-disable-next-line prefer-const
   let [format, targetLocale, message] = resolveMessageFormat(
@@ -289,6 +302,20 @@ export function translate<Messages, Message = string>(
   return postTranslation ? postTranslation(messaged) : messaged
 }
 
+function escapeParams(options: TranslateOptions) {
+  if (isArray(options.list)) {
+    options.list = options.list.map(item =>
+      isString(item) ? escapeHtml(item) : item
+    )
+  } else if (isObject(options.named)) {
+    Object.keys(options.named).forEach(key => {
+      if (isString(options.named![key])) {
+        options.named![key] = escapeHtml(options.named![key] as string)
+      }
+    })
+  }
+}
+
 function resolveMessageFormat<Messages, Message>(
   context: RuntimeTranslationContext<Messages, Message>,
   key: string,

src/legacy.ts

@@ -90,6 +90,7 @@ export interface VueI18nOptions {
   formatFallbackMessages?: boolean
   preserveDirectiveContent?: boolean
   warnHtmlInMessage?: WarnHtmlInMessageLevel
+  escapeParameterHtml?: boolean
   sharedMessages?: LocaleMessages<VueMessageType>
   pluralizationRules?: PluralizationRules
   postTranslation?: PostTranslationHandler<VueMessageType>
@@ -124,6 +125,7 @@ export interface VueI18n<
   formatFallbackMessages: boolean
   sync: boolean
   warnHtmlInMessage: WarnHtmlInMessageLevel
+  escapeParameterHtml: boolean
   preserveDirectiveContent: boolean
   // methods
   t(key: Path): TranslateResult
@@ -230,6 +232,7 @@ function convertComposerOptions<
   const warnHtmlMessage = isString(options.warnHtmlInMessage)
     ? options.warnHtmlInMessage !== 'off'
     : true
+  const escapeParameter = !!options.escapeParameterHtml
   const inheritLocale = isBoolean(options.sync) ? options.sync : true
 
   if (__DEV__ && options.formatter) {
@@ -271,6 +274,7 @@ function convertComposerOptions<
     pluralRules: pluralizationRules,
     postTranslation,
     warnHtmlMessage,
+    escapeParameter,
     inheritLocale,
     __i18n,
     __root
@@ -430,6 +434,14 @@ export function createVueI18n<
       composer.warnHtmlMessage = val !== 'off'
     },
 
+    // escapeParameterHtml
+    get escapeParameterHtml(): boolean {
+      return composer.escapeParameter
+    },
+    set escapeParameterHtml(val: boolean) {
+      composer.escapeParameter = val
+    },
+
     // preserveDirectiveContent
     get preserveDirectiveContent(): boolean {
       __DEV__ &&

src/utils.ts

@@ -108,6 +108,15 @@ export const getGlobalThis = (): any => {
   )
 }
 
+export function escapeHtml(rawText: string): string {
+  return rawText
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
 /* eslint-enable */
 
 /**

test/core/context.test.ts

@@ -163,6 +163,18 @@ describe('postTranslation', () => {
   })
 })
 
+describe('escapeParameter', () => {
+  test('default', () => {
+    const ctx = context({})
+    expect(ctx.escapeParameter).toEqual(false)
+  })
+
+  test('specify', () => {
+    const ctx = context({ escapeParameter: true })
+    expect(ctx.escapeParameter).toEqual(true)
+  })
+})
+
 describe('getLocaleChain', () => {
   let ctx: RuntimeContext<unknown, unknown, unknown, string>
   beforeEach(() => {

test/core/translate.test.ts

@@ -611,6 +611,42 @@ describe('warnHtmlMessage', () => {
   })
 })
 
+describe('escapeParameter', () => {
+  test('context option', () => {
+    const ctx = context({
+      locale: 'en',
+      warnHtmlMessage: false,
+      escapeParameter: true,
+      messages: {
+        en: {
+          hello: 'hello, {name}!'
+        }
+      }
+    })
+
+    expect(translate(ctx, 'hello', { name: '<b>kazupon</b>' })).toEqual(
+      'hello, &lt;b&gt;kazupon&lt;/b&gt;!'
+    )
+  })
+
+  test('override with params', () => {
+    const ctx = context({
+      locale: 'en',
+      warnHtmlMessage: false,
+      escapeParameter: false,
+      messages: {
+        en: {
+          hello: 'hello, {0}!'
+        }
+      }
+    })
+
+    expect(
+      translate(ctx, 'hello', ['<b>kazupon</b>'], { escapeParameter: true })
+    ).toEqual('hello, &lt;b&gt;kazupon&lt;/b&gt;!')
+  })
+})
+
 describe('error', () => {
   test(errorMessages[CoreErrorCodes.INVALID_ARGUMENT], () => {
     const ctx = context({