Add a constructor config flag that automatically escapes html in parameters

[gardarh]

In some cases using component interpolation is inconvenient (example case when a string needs to be crafted in code and sent into a child component).

I commonly use "minor" html tags in translation strings, e.g. the <b> tag. However this causes a very subtle XSS attack vector where I need to be very careful not to pass user input directly as interpolation parameters.

I would like to be able to send a flag (e.g. escapeParameterHtml) into the VueI18n constructor:

export const i18n = new VueI18n({
  escapeParameterHtml: true,
  messages: translations,
})

This would add the following step to the BaseFormatter.interpolate, roughly so:

export const escapeHtml = function(rawText: string): string {
  return rawText
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
}

class BaseFormatter {
interpolate (message: string, values: any): Array<any> {
...
if(options.escapeParameterHtml) {
    values = Object.entries(values).map([key, value] => [key, escapeHtml(value)])
}
}

If I could create a custom formatter that extended the BaseFormatter this would be simple to do without modifying the library but unfortunately the BaseFormatter class is not exported.

[gardarh]

If this feature aligns with the project philosophy I could implement it and submit a PR. @kazupon Please let me know and I'll get to it.

[kazupon]

Sorry, lately my reply.

That sounds good.
You can send a PR. :)

[kazupon]

Merged.