Merge commit from fork

* fix: Escape and sanitize for HTML attributes of escape parameter option

* fix: add a11y related attributes

Author: kazupon

docs/guide/essentials/syntax.md

@@ -334,3 +334,82 @@ As result, the below:
 <!--<br> exists but is rendered as html and not a string-->
 world</p>
 ```
+
+### Using the escape parameter option
+
+To help mitigate XSS risks when using HTML messages, Vue I18n provides escape parameter options. When enabled, this option escapes interpolation parameters and sanitizes the final translated HTML.
+
+:::tip NOTE
+The option name depends on which API mode you're using:
+- **Legacy API**: use `escapeParameterHtml`
+- **Composition API**: use `escapeParameter`
+:::
+
+#### Legacy API
+
+```js
+// enable `escapeParameterHtml` globally
+const i18n = createI18n({
+  locale: 'en',
+  legacy: true,
+  escapeParameterHtml: true,
+  messages: {
+    en: {
+      message: {
+        welcome: 'Welcome <strong>{name}</strong>!'
+      }
+    }
+  }
+})
+
+// or enable it per translation
+this.$t('message.welcome', { name: userInput }, { escapeParameter: true })
+```
+
+#### Composition API
+
+```js
+// enable `escapeParameter` globally
+const i18n = createI18n({
+  locale: 'en',
+  escapeParameter: true,
+  messages: {
+    en: {
+      message: {
+        welcome: 'Welcome <strong>{name}</strong>!'
+      }
+    }
+  }
+})
+
+// or enable it per translation
+const { t } = useI18n()
+t('message.welcome', { name: userInput }, { escapeParameter: true })
+```
+
+#### How it works
+
+When the escape parameter option is enabled:
+- HTML special characters (`<`, `>`, `"`, `'`, `&`, `/`, `=`) in interpolation parameters are escaped
+- The final translated HTML is sanitized to prevent XSS attacks:
+  - Dangerous characters in HTML attribute values are escaped
+  - Event handler attributes (`onclick`, `onerror`, etc.) are neutralized
+  - JavaScript URLs in href, src, action, formaction, and style attributes are disabled
+
+#### Example
+
+```js
+const userInput = '<img src=x onerror=alert(1)>'
+
+// Without escape parameter (DANGEROUS):
+$t('message.welcome', { name: userInput })
+// Result: Welcome <strong><img src=x onerror=alert(1)></strong>!
+
+// With escape parameter (SAFE):
+$t('message.welcome', { name: userInput }, { escapeParameter: true })
+// Result: Welcome <strong>&lt;img src=x &#111;nerror=alert(1)&gt;</strong>!
+```
+
+:::warning IMPORTANT
+Even with the escape parameter option enabled, you should still be cautious about using HTML in translations. Always validate and sanitize user input before using it in translations, and prefer [Component interpolation](../advanced/component) when possible.
+:::

packages/core-base/src/translate.ts

@@ -15,6 +15,7 @@ import {
   isString,
   mark,
   measure,
+  sanitizeTranslatedHtml,
   warn
 } from '@intlify/shared'
 import { isMessageAST } from './ast'
@@ -153,7 +154,16 @@ export interface TranslateOptions<Locales = Locale>
   fallbackWarn?: boolean
   /**
    * @remarks
-   * Whether do escape parameter for list or named interpolation values
+   * Whether to escape parameters for list or named interpolation values.
+   * When enabled, this option:
+   * - Escapes HTML special characters (`<`, `>`, `"`, `'`, `&`, `/`, `=`) in interpolation parameters
+   * - Sanitizes the final translated HTML to prevent XSS attacks by:
+   *   - Escaping dangerous characters in HTML attribute values
+   *   - Neutralizing event handler attributes (onclick, onerror, etc.)
+   *   - Disabling javascript: URLs in href, src, action, formaction, and style attributes
+   *
+   * @defaultValue false
+   * @see [HTML Message - Using the escapeParameter option](https://vue-i18n.intlify.dev/guide/essentials/syntax.html#using-the-escapeparameter-option)
    */
   escapeParameter?: boolean
   /**
@@ -765,10 +775,15 @@ export function translate<
   )
 
   // if use post translation option, proceed it with handler
-  const ret = postTranslation
+  let ret = postTranslation
     ? postTranslation(messaged, key as string)
     : messaged
 
+  // apply HTML sanitization for security
+  if (escapeParameter && isString(ret)) {
+    ret = sanitizeTranslatedHtml(ret) as MessageFunctionReturn<Message>
+  }
+
   // NOTE: experimental !!
   if (__DEV__ || __FEATURE_PROD_INTLIFY_DEVTOOLS__) {
     // prettier-ignore

packages/core-base/test/translate.test.ts

@@ -685,7 +685,7 @@ describe('escapeParameter', () => {
     })
 
     expect(translate(ctx, 'hello', { name: '<b>kazupon</b>' })).toEqual(
-      'hello, &lt;b&gt;kazupon&lt;/b&gt;!'
+      'hello, &lt;b&gt;kazupon&lt;&#x2F;b&gt;!'
     )
   })
 
@@ -703,7 +703,7 @@ describe('escapeParameter', () => {
 
     expect(
       translate(ctx, 'hello', ['<b>kazupon</b>'], { escapeParameter: true })
-    ).toEqual('hello, &lt;b&gt;kazupon&lt;/b&gt;!')
+    ).toEqual('hello, &lt;b&gt;kazupon&lt;&#x2F;b&gt;!')
   })
 
   test('no escape', () => {
@@ -722,6 +722,72 @@ describe('escapeParameter', () => {
       'hello, <b>kazupon</b>!'
     )
   })
+
+  test('vulnerable case from GHSA report - img onerror attack', () => {
+    // Mock console.warn to suppress warnings for this test
+    const originalWarn = console.warn
+    console.warn = vi.fn()
+
+    const ctx = context({
+      locale: 'en',
+      warnHtmlMessage: false,
+      escapeParameter: true,
+      messages: {
+        en: {
+          vulnerable: 'Caution: <img src=x onerror="{payload}">'
+        }
+      }
+    })
+
+    const result = translate(ctx, 'vulnerable', {
+      payload: '<script>alert("xss")</script>'
+    })
+
+    // with the fix, the payload should be escaped, preventing the attack
+    // The onerror attribute is neutralized by converting 'o' to &#111;
+    expect(result).toEqual(
+      'Caution: <img src=x &#111;nerror="&lt;script&gt;alert(&quot;xss&quot;)&lt;&#x2F;script&gt;">'
+    )
+
+    // result should NOT contain executable script tags
+    expect(result).not.toContain('<script>')
+    expect(result).not.toContain('</script>')
+
+    // Restore console.warn
+    console.warn = originalWarn
+  })
+
+  test('vulnerable case - attribute injection attack', () => {
+    const ctx = context({
+      locale: 'en',
+      warnHtmlMessage: false,
+      escapeParameter: true,
+      messages: {
+        en: {
+          message: 'Click <a href="{url}">here</a>'
+        }
+      }
+    })
+
+    const result = translate(ctx, 'message', {
+      url: 'javascript:alert(1)'
+    })
+
+    // with the fix, javascript: URL scheme is neutralized
+    expect(result).toEqual('Click <a href="javascript&#58;alert(1)">here</a>')
+
+    // another attack vector with quotes
+    const result2 = translate(ctx, 'message', {
+      url: '" onclick="alert(1)"'
+    })
+
+    expect(result2).toEqual(
+      'Click <a href="&quot; onclick&#x3D;&quot;alert(1)&quot;">here</a>'
+    )
+
+    // `onclick` attribute should be escaped
+    expect(result2).not.toContain('onclick=')
+  })
 })
 
 describe('error', () => {

packages/shared/src/utils.ts

@@ -3,6 +3,8 @@
  * written by kazuya kawaguchi
  */
 
+import { warn } from './warn'
+
 export const inBrowser = typeof window !== 'undefined'
 
 export let mark: (tag: string) => void | undefined
@@ -104,10 +106,66 @@ export const getGlobalThis = (): any => {
 
 export function escapeHtml(rawText: string): string {
   return rawText
+    .replace(/&/g, '&') // escape `&` first to avoid double escaping
     .replace(/</g, '&lt;')
     .replace(/>/g, '&gt;')
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&apos;')
+    .replace(/\//g, '&#x2F;') // escape `/` to prevent closing tags or JavaScript URLs
+    .replace(/=/g, '&#x3D;') // escape `=` to prevent attribute injection
+}
+
+function escapeAttributeValue(value: string): string {
+  return value
+    .replace(/&(?![a-zA-Z0-9#]{2,6};)/g, '&amp;') // escape unescaped `&`
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+}
+
+export function sanitizeTranslatedHtml(html: string): string {
+  // Escape dangerous characters in attribute values
+  // Process attributes with double quotes
+  html = html.replace(
+    /(\w+)\s*=\s*"([^"]*)"/g,
+    (_, attrName, attrValue) =>
+      `${attrName}="${escapeAttributeValue(attrValue)}"`
+  )
+
+  // Process attributes with single quotes
+  html = html.replace(
+    /(\w+)\s*=\s*'([^']*)'/g,
+    (_, attrName, attrValue) =>
+      `${attrName}='${escapeAttributeValue(attrValue)}'`
+  )
+
+  // Detect and neutralize event handler attributes
+  const eventHandlerPattern = /\s*on\w+\s*=\s*["']?[^"'>]+["']?/gi
+  if (eventHandlerPattern.test(html)) {
+    if (__DEV__) {
+      warn(
+        'Potentially dangerous event handlers detected in translation. ' +
+          'Consider removing onclick, onerror, etc. from your translation messages.'
+      )
+    }
+    // Neutralize event handler attributes by escaping 'on'
+    html = html.replace(/(\s+)(on)(\w+\s*=)/gi, '$1&#111;n$3')
+  }
+
+  // Disable javascript: URLs in various contexts
+  const javascriptUrlPattern = [
+    // In href, src, action, formaction attributes
+    /(\s+(?:href|src|action|formaction)\s*=\s*["']?)\s*javascript:/gi,
+    // In style attributes within url()
+    /(style\s*=\s*["'][^"']*url\s*\(\s*)javascript:/gi
+  ]
+
+  javascriptUrlPattern.forEach(pattern => {
+    html = html.replace(pattern, '$1javascript&#58;')
+  })
+
+  return html
 }
 
 const hasOwnProperty = Object.prototype.hasOwnProperty