2016年11月1日 星期二

i18next 不進行跳脫處理

i18next 是一個 JavaScript 框架,可以進行多國語系的翻譯。最近工作上進行的專案就是使用它來完成。不過被人發現到一個 Bug ,輸出的文字,有些時候會冒出 HTML 的 <br/> 標籤。查找了一下,發現到是出在傳入作為翻譯參數的文字造成的。

作為翻譯的文字中,可以使用 {{變數名稱}} 來為翻譯的文字加上參數。如:

{
  "HELLO": "Hello, {{name}}!"
}

var output = i18next.t("HELLO", {name: 'Tim"});
// output = "Hello, Tim"

這種方式可以讓同一個翻譯設定變得更有彈性,不過相對的也可能帶來一些安全性的風險。因此 i18next 預設會將傳入的參數(上面的例子就是 name 參數)進行一些跳脫處理。像是將 < 變成 &lt; 來避免所謂的跨網域攻擊問題(XSS)。

而我的專案遇到的問題,就是在於我傳入的字串,中間包含了排版用的換行字元。
因此導致被 i18next 給處理掉了。

要避免這樣子的狀況,目前找到的作法,是在參數的名稱加一個減號,這樣 i18next 就不會對傳入的資料作處理了。

{
  "HELLO": "Hello, {{- name}}!"
}
// 一樣的呼叫方式, name 參數傳入的資料,就不會被處理。

當然這樣子的作法,有可能會引入一些安全性的問題。所以要注意使用。