React中使用dangerouslySetInnerHTML渲染的链接无法在新标签页打开

DOMPurify 默认会过滤掉 target 属性，这就是你渲染后的链接无法在新标签页打开的原因。你可以通过配置 DOMPurify 的钩子或属性白名单来解决这个问题，推荐使用钩子自动为所有链接添加安全的新标签页属性：

方法一：自动为所有链接添加 target="_blank" 和安全属性 #

通过 afterSanitizeAttributes 钩子，在清理完成后自动给 <a> 标签添加目标属性，同时加上安全必备的 rel="noopener noreferrer"（防止新页面篡改原页面上下文）：

import DOMPurify from 'dompurify';

// 全局配置DOMPurify钩子，只需初始化一次
DOMPurify.addHook('afterSanitizeAttributes', (node) => {
  if (node.tagName === 'A') {
    node.setAttribute('target', '_blank');
    node.setAttribute('rel', 'noopener noreferrer');
  }
});

// 在组件中使用
function HtmlRenderer({ htmlString }) {
  const sanitizedHtml = DOMPurify.sanitize(htmlString);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
}

方法二：仅允许已有 target 属性保留 #

如果你只需要保留原HTML中已存在的 target 属性，不需要自动添加，可以修改 DOMPurify 的属性白名单：

import DOMPurify from 'dompurify';

// 配置允许a标签使用target属性
DOMPurify.setConfig({
  allowedAttributes: {
    ...DOMPurify.defaults.allowedAttributes,
    'a': [...(DOMPurify.defaults.allowedAttributes['a'] || []), 'target']
  }
});

注意事项 #

• rel="noopener noreferrer" 是安全最佳实践，必须添加，避免新打开的页面通过 window.opener 控制原页面，防止钓鱼或恶意攻击。
• 全局配置的钩子只需在应用初始化时执行一次，无需在每个组件重复设置。

内容的提问来源于stack exchange，提问作者Anurag Singh