如何在sanitize-html中设置或覆盖锚点标签的target="_blank"

嘿，这问题很常见！你已经在配置里允许了a标签的target属性，现在只需要加个小配置就能让所有链接默认在新标签页打开，还能顺便补上安全属性，一举两得。

直接修改你的sanitize-html配置，添加transformTags选项专门处理a标签就好：

__html = sanitizeHTML(children, {
  allowedTags: sanitizeHTML.defaults.allowedTags.concat(['img']),
  allowedAttributes: {
    '*': ['href', 'align', 'alt', 'center', 'bgcolor', 'style', 'width'],
    'img': ['src'],
    'a': ['target', 'rel'] // 别忘了把rel也加入允许的属性列表
  },
  transformTags: {
    'a': function(tagName, attribs) {
      // 强制设置target为_blank，同时添加安全的rel属性
      return {
        tagName: 'a',
        attribs: {
          ...attribs,
          target: '_blank',
          rel: 'noopener noreferrer'
        }
      };
    }
  }
});

关键说明： #

• transformTags是sanitize-html提供的标签转换钩子，能让你自定义处理特定标签的属性甚至结构
• 一定要把rel加入allowedAttributes的a标签列表里，不然这个安全属性会被过滤掉
• 添加rel="noopener noreferrer"是安全最佳实践，能避免新打开的页面通过window.opener篡改原页面，防止钓鱼攻击

这样处理后，你的链接就会自动带上target="_blank"和安全属性，点击后直接在新标签页打开谷歌啦！

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