如何在Pug中安全渲染变量字符串内的超链接且不转义其余文本？

针对你遇到的Pug模板中安全渲染用户输入URL的问题，这里有几个实用方案，既能让合法URL变成可点击链接，又能彻底防范XSS攻击：

方案1：先转义再替换的安全处理流程 #

核心思路是先对所有用户输入做全局转义，把恶意HTML标签转成纯文本实体，再在转义后的内容里识别并替换URL为安全的<a>标签，最后用!{}渲染处理后的结果。这样既避免了恶意代码执行，又能让合法链接正常生效。

示例代码：

// 修正正则里的语法错误（原正则的应为\b），确保匹配合法URL
const urlRegex = /\b(https?|ftp|file):\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|]/gi;

// 模拟带恶意内容的用户输入
const userInput = 'Hey everybody, check this out: http://www.cool-site.com <a href="www.u-r-hacked.com">Click me!</a>';

// 第一步：全局转义用户输入，把特殊字符转为HTML实体
const escapedContent = pug.escape(userInput);

// 第二步：在转义后的文本中，把URL替换为安全的<a>标签
const safeContent = escapedContent.replace(urlRegex, (match) => {
  // 对匹配到的URL再次转义（防范URL里的恶意参数）
  const safeUrl = pug.escape(match);
  return `<a href="${safeUrl}">${safeUrl}</a>`;
});

// 在Pug模板中渲染最终安全内容
.postContents !{safeContent}

这个方案里，恶意的<a>标签会被转义成<a href="www.u-r-hacked.com">Click me!</a>以纯文本显示，而合法URL会被替换成可点击的安全链接，完全规避了XSS风险。

方案2：用第三方安全库简化处理 #

如果不想自己维护正则和转义逻辑，可以用经过安全验证的第三方库，比如linkifyjs。这类库会自动识别文本中的合法URL、邮箱等，同时自动转义所有危险内容，生成安全的HTML片段。

示例用法：

const linkify = require('linkifyjs');

const userInput = 'Hey everybody, check this out: http://www.cool-site.com <a href="www.u-r-hacked.com">Click me!</a>';

// 直接生成安全的HTML内容，linkify会自动处理转义和URL识别
const safeContent = linkify.html(userInput);

// 在Pug模板中渲染
.postContents !{safeContent}

这种方案更省心，第三方库已经覆盖了各种边缘场景（比如带端口的URL、特殊字符的URL），还支持自定义链接样式和属性。

关键注意事项 #

• 永远优先转义用户输入：所有用户提交的内容都不能直接用!{}渲染，必须先经过转义处理。
• 正则要严谨：自己写URL正则时，一定要测试各种边缘情况，避免漏判或误判。
• 避免混合渲染方式：不要部分内容用#{}转义、部分用!{}直接渲染，容易出现安全漏洞，统一处理成安全HTML后再渲染更稳妥。

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