Svelte中安全渲染用户输入Markdown的疑问及方案咨询

一、是否存在XSS攻击风险？ #

答案是肯定的。你看到<script>标签没执行，是因为现代浏览器会自动拦截HTML中直接插入的<script>标签的执行，但这只是最基础的防护，还有大量其他类型的XSS攻击能绕过这个限制：

• 属性型XSS：比如用户输入<img src=x onerror=alert('xss')>，marked会原样渲染这个标签，onerror事件会触发执行恶意脚本；
• 伪协议链接：比如<a href="javascript:alert('xss')">点击我</a>，用户点击链接后会执行脚本；
• iframe嵌入恶意内容：用户输入<iframe src="https://malicious.com/steal-data" width=0 height=0></iframe>，会偷偷加载恶意页面；
• 其他事件属性：比如<div onclick=alert('xss')>点我</div>，同样能触发脚本执行。

这些场景下，恶意代码都能正常执行，所以你的当前方案存在明确的XSS风险。

二、除了Sanitize之外的安全渲染方案 #

1. 完全禁用Markdown的HTML嵌入支持 #

大多数Markdown解析库都提供了关闭HTML解析的选项，比如在marked中：

marked.setOptions({
  html: false // 禁止解析用户输入中的HTML标签
});

开启这个配置后，用户输入的任何HTML标签都会被转义为纯文本（比如<script>会变成<script>），从根源上杜绝HTML注入的可能。如果你的业务不需要用户输入自定义HTML，这是最直接有效的方法。

2. 沙箱化隔离渲染 #

将渲染后的HTML放在带有sandbox属性的<iframe>中，利用浏览器的沙箱机制限制页面权限：

<iframe sandbox srcdoc="<div>渲染后的Markdown HTML</div>"></iframe>

sandbox属性默认会禁止脚本执行、弹窗、表单提交、父页面交互等操作，即使恶意代码被渲染，也无法突破沙箱影响主页面的安全。需要注意的是，你可能需要调整sandbox的具体权限（比如添加allow-same-origin允许加载同域资源），同时要处理iframe的样式适配问题。

3. 配置严格的内容安全策略(CSP) #

通过HTTP响应头或meta标签设置严格的CSP规则，限制页面可执行的脚本、加载的资源：

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'none';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data:;
">

这个规则会禁止所有脚本执行（包括内联脚本和外部脚本），只允许加载同域的资源和base64图片。即使恶意HTML被渲染，CSP会直接阻止脚本的执行，从浏览器层面阻断XSS攻击。

4. 自定义安全渲染规则 #

扩展Markdown解析库的渲染逻辑，对危险内容进行针对性过滤：

• 对于链接，只允许http://、https://协议，过滤javascript:、vbscript:等伪协议；
• 对于图片，同样限制协议，同时移除所有事件属性（比如onerror、onload）；
• 只允许安全的HTML标签（比如<p>、<h1>、<ul>等），禁止所有带有事件属性的标签。

比如在marked中自定义渲染器：

const renderer = new marked.Renderer();
// 重写链接渲染逻辑
renderer.link = function(href, title, text) {
  // 过滤非http/https协议的链接
  if (!href.startsWith('http://') && !href.startsWith('https://')) {
    href = '#'
  }
  return `<a href="${href}" title="${title || ''}">${text}</a>`;
};

marked.setOptions({ renderer });

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