如何在反应中添加 target=_blank

Question

我需要使文本中的所有链接打开一个新选项卡，并且文本来自angerlySetInnerHTML={{__html: content,}}。代码位于一个新类中，该类扩展了反应代码块中的组件，其中我在 <section> 中选择了文本 id

Answer 1

只需添加rel="noopener noreferrer"即可解决您的问题。

https://caniuse.com/?search=noopener%20

<a href="https://hasantezcan.dev" target="_blank" rel="noopener noreferrer">Go to website</a>

来源

Answer 2

这是我的解决方案replace

var content = `<a href="https://stackoverflow.com">Stack Overflow</a><a href="https://google.com">Google</a>`;

class App extends React.Component {

  render(){
    return (
      <div 
          dangerouslySetInnerHTML={{
              __html: content.replace(/href/g, "target='_blank' href")
          }}>
      </div>
    )
  } 
}

Answer 3

安全

\n

当您target="_blank"与链接一起使用时，建议在链接到第三方内容时始终设置rel="noopener"或。rel="noreferrer"

\n

\n

• rel="noopener"阻止新页面访问该window.opener属性并确保它在单独的进程中运行。如果没有这个，目标页面可能会将您的页面重定向到恶意 URL。

  \n
\n

• rel="noreferrer"具有相同的效果，但也会阻止Referer header被发送到新页面。\xe2\x9a\xa0\xef\xb8\x8f 删除引用标头将影响分析。

  \n

  <a href="www.google.com" target="_blank" rel="noreferrer"> Search </a>\n

  \n
\n

\n