本文旨在解决使用`marked`库进行markdown渲染时，因`sanitize`选项配置不当导致内容不显示的问题，并提供正确的配置方法。更重要的是，文章将深入探讨`marked`内置`sanitize`选项的安全性风险，强调其已弃用且不安全的特性，并推荐使用dompurify等专业第三方库进行html内容净化，以确保应用在渲染用户生成内容时的安全性。
问题现象与初步诊断
在使用React等前端框架结合marked库渲染Markdown内容时，开发者常会遇到一个问题：当尝试加入内容净化（sanitize）功能后，原本能够正常显示的Markdown内容突然消失或无法解析。这通常发生在dangerouslySetInnerHTML与marked库的集成过程中。
以下是可能导致此问题的典型代码片段：
// 可能出现问题的getRawMarkup函数
getRawMarkup(){
// 尝试在此处使用sanitize选项
return {__html: marked(this.state.value, {sanitize: true}) };
}
// 在JSX中这样使用
<div>
<div class="title-input">VIEWER</div>
<div>
<div class="content" id="preview" dangerouslySetInnerHTML={this.getRawMarkup()} />
</div>
</div>在这种情况下，内容未能正确渲染的原因往往是marked库的sanitize选项没有被正确应用，或者与旧版marked的API使用方式存在冲突。
marked库的正确配置与解析
为了解决上述渲染问题，确保marked库能够正确解析Markdown并应用相关选项，推荐使用marked.setOptions方法全局配置选项，并使用marked.parse方法进行解析。
以下是修正后的getRawMarkup函数示例：
// 修正后的getRawMarkup函数
getRawMarkup(){
// 使用marked.setOptions设置全局选项
marked.setOptions({
sanitize: true, // 暂时保留，但请注意后续的安全警告
});
// 使用marked.parse方法解析Markdown字符串
return { __html: marked.parse(this.state.value) };
}通过marked.setOptions，我们可以确保sanitize等选项在解析前被正确设置。同时，使用marked.parse(markdownString)是marked库推荐的解析Markdown字符串的标准方法。这样配置后，Markdown内容通常会恢复正常渲染。
内容安全：marked内置sanitize的风险与替代方案
尽管上述修正解决了渲染问题，但更关键的是，marked库内置的sanitize: true选项存在严重的安全隐患，且已被官方标记为已弃用（deprecated）。
重要警告：marked库的官方文档明确指出：
If true, sanitize the HTML passed into markdownString with the sanitizer function. Warning: This feature is deprecated and it should NOT be used as it cannot be considered secure. Instead use a sanitize library, like DOMPurify (recommended), sanitize-html or insane on the output HTML!
这意味着，依赖marked内置的sanitize功能来防止跨站脚本攻击（XSS）是不安全的。它无法提供足够的保护，不应在生产环境中使用。
推荐的安全实践：
为了确保应用程序的安全性，特别是在渲染用户生成的内容时，我们应该在Markdown解析之后，但在通过dangerouslySetInnerHTML注入HTML之前，使用专门的、经过充分测试的第三方HTML净化库对输出的HTML进行处理。
推荐的第三方净化库包括：
- DOMPurify (推荐)：一个高性能、高安全性的HTML净化库。
- sanitize-html
- insane
以下是使用DOMPurify进行HTML净化的概念性示例：
-
安装DOMPurify：
npm install dompurify # 或者 yarn add dompurify
-
集成DOMPurify到getRawMarkup函数：
import DOMPurify from 'dompurify'; import { marked } from 'marked'; // 确保导入marked // ... 在你的React组件或其他上下文中 getSafeMarkup() { // 1. 将Markdown字符串解析为原始HTML // 注意：此处不再设置marked的sanitize选项 const rawHtml = marked.parse(this.state.value); // 2. 使用DOMPurify对原始HTML进行净化 const sanitizedHtml = DOMPurify.sanitize(rawHtml); // 3. 返回净化后的HTML，供dangerouslySetInnerHTML使用 return { __html: sanitizedHtml }; } // 在JSX中继续使用 <div> <div class="title-input">VIEWER</div> <div> <div class="content" id="preview" dangerouslySetInnerHTML={this.getSafeMarkup()} /> </div> </div>通过这种方式，我们首先让marked专注于将Markdown转换为HTML，然后将HTML净化交给专业的安全库处理。这不仅解决了渲染问题，更重要的是显著提升了应用处理用户生成内容时的安全性。
总结
在使用marked库渲染Markdown内容时，确保内容正确显示和应用安全是同等重要的。
- 正确配置marked：对于marked库的配置，应使用marked.setOptions来设置全局选项，并使用marked.parse方法进行Markdown解析，以确保选项被正确应用。
- 弃用marked内置sanitize：请务必避免使用marked库内置的sanitize: true选项，因为它已弃用且无法提供可靠的安全保障。
- 拥抱专业净化库：为了防范XSS等安全漏洞，强烈推荐在marked解析出HTML后，使用如DOMPurify等专业的第三方HTML净化库对HTML内容进行二次处理，再通过dangerouslySetInnerHTML注入到DOM中。
遵循这些最佳实践，可以帮助开发者构建既功能完善又安全可靠的Markdown渲染应用。
