React-i18next的安全漏洞

问题描述

我们正在使用react-i18next来完善我们的Web应用程序以支持几种语言。该应用程序已经用英语编写，我们需要将其转换为键，然后翻译这些键。

问题是，我们有很多格式化文本的页面，整​​个页面都带有a，span，p，strong等标签。例如：

<h2 className="ml-3 my-0">Question: How to do the thing?</h1>
<p className="ml-5">You may sometimes want to do a thing.</p>
<span className="ml-5">On Android:</span>
<ol>
  <li>Do thing #1</li>
  <li>Click <i className="icon-list"></i> that thing</li>
  <li>Click the other thing,to do the thing</li>
</ol>

我想做什么

我正在考虑制作一个自定义Trans组件，并将标签存储在JSON中。如果我们有这样的事情怎么办：

import React from 'react'
import { useTranslation,Trans } from 'react-i18next'

const CustomTrans = (props) => {
  const { i18nKey,t } = props;
  return (
    <Trans 
      i18nKey={i18nKey} 
      t={t} 
      components={{
        p: <p />,span: <span />,strong: <strong />,i: <i />,a: <a rel="noopener noreferrer" target="blank" />,ol: <ol />,li: <li />
      }}
    />
  )
}

所以我可以然后map JSON键显示：

en.json

{
  "namespace1": {
    "question1": {
      "heading": "Question: How to do the thing?","content": [
        "<p className="ml-5">You may sometimes want to do a thing.</p>","<span className="ml-5">On Android:</span>"
        "<ol><li>Do thing #1</li><li>Click <i className='icon-list'></i> that thing</li><li>Click the other thing,to do the thing</li></ol>"
      ]
    }
  }
}

返回jsx：

const MyComponent = () => {
  const { t } = useTranslation("namespace1");
  const contentArr = t("question1.content",{returnObjects: true});
  return (
    <h2 className="ml-3 my-0">{t("question1.heading")}</h1>
    {contentArr.map( (_,i) => <CustomTrans i18nKey={"question1.content." + i} t={t} /> )}
  )
}

我想要映射到question1.content数组（question1.content.0，question1.content.1等）和CustomTrans中的每个项目上它。这样一来，在页面上真的很容易进行内容映射，并应用了独特的className和其他道具。

我的问题：那是一个安全漏洞吗？我们没有用户输入，但是有没有办法像a标签那样插入xss？ i18next的html清理适用吗？我不想做任何更改。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）