本教程旨在解决使用marked.js库在react等前端框架中解析markdown内容时遇到的常见问题，特别是关于sanitize选项的配置。我们将详细说明如何正确设置marked.js的选项并通过marked.parse()方法进行内容转换，以确保markdown预览器正常工作。同时，文章将强调marked.js内置sanitize选项的安全性隐患及其弃用状态，并推荐使用dompurify等专业的第三方库进行html内容净化，以构建更安全可靠的富文本渲染方案。
在前端应用中，将用户输入的Markdown文本实时渲染为HTML预览是常见的需求。Marked.js是一个流行的Markdown解析库，常与React等框架结合使用，通过dangerouslySetInnerHTML属性将解析后的HTML插入DOM。然而，在配置Marked.js时，若不遵循其API规范，可能会导致解析失败或出现安全漏洞。
Marked.js解析问题分析
当开发者尝试在getRawMarkup函数中直接调用marked(this.state.value, {sanitize: true})并将其结果用于dangerouslySetInnerHTML时，可能会发现Markdown内容无法正常渲染。这通常是由于对Marked.js的API理解不当造成的。
以下是可能导致解析失败的错误示例代码：
// 错误的Marked.js调用方式
getRawMarkup() {
// 直接在marked函数中传递选项，且使用了旧的marked()方法
return {__html: marked(this.state.value, {sanitize: true}) };
}
// 在React组件中的使用
<div>
<div className="title-input">VIEWER</div>
<div>
<div className="content" id="preview" dangerouslySetInnerHTML={this.getRawMarkup()} />
</div>
</div>此代码段的问题在于：
- marked() 方法的使用： 在较新版本的Marked.js中，用于解析字符串的主要方法是marked.parse()，而不是直接调用marked()。
- 选项设置方式： marked库的全局选项通常通过marked.setOptions()方法进行设置，而不是每次调用marked.parse()时作为第二个参数传递。虽然某些旧版本或特定用法可能支持，但setOptions是推荐且更清晰的方式。
正确的Marked.js配置与解析
为了确保Marked.js能够正确解析Markdown并应用配置，应遵循以下步骤：首先，使用marked.setOptions()方法设置全局或局部选项；然后，调用marked.parse()方法进行内容解析。
以下是修复后的getRawMarkup函数示例：
// 正确的Marked.js调用方式
getRawMarkup() {
// 1. 使用marked.setOptions()设置配置
marked.setOptions({
// sanitize: true, // 注意：此选项已弃用且不安全，详见下文
});
// 2. 使用marked.parse()解析Markdown字符串
return { __html: marked.parse(this.state.value) };
}
// 在React组件中的使用保持不变
<div>
<div className="title-input">VIEWER</div>
<div>
<div className="content" id="preview" dangerouslySetInnerHTML={this.getRawMarkup()} />
</div>
</div>通过这种方式，marked.setOptions()会在解析之前配置好Marked.js的行为，而marked.parse()则负责将Markdown字符串转换为HTML。
Markdown内容安全：弃用Marked.js内置净化功能
重要提示： 尽管上述代码展示了如何正确配置Marked.js，但其中涉及的sanitize: true选项是一个已被弃用且不推荐使用的功能。
Marked.js官方文档明确指出：
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.js内置的sanitize功能不足以提供可靠的安全保障，不应依赖它来防止跨站脚本攻击（XSS）等安全漏洞。将用户生成或外部来源的HTML内容直接插入DOM（即使经过Marked.js的sanitize: true处理）是极其危险的。
推荐的安全实践：使用专业的HTML净化库
为了构建一个真正安全的Markdown预览器，您应该在Marked.js解析输出的HTML之后，使用一个专门的、经过充分测试的HTML净化库进行二次处理。
推荐的HTML净化库包括：
- DOMPurify (推荐)
- sanitize-html
- insane
以下是使用DOMPurify集成到您的Markdown渲染流程中的示例：
-
安装DOMPurify：
npm install dompurify # 或者 yarn add dompurify
-
在组件中集成DOMPurify：
import DOMPurify from 'dompurify'; import { marked } from 'marked'; // 确保导入marked class MarkdownPreviewer extends React.Component { constructor(props) { super(props); this.state = { value: '## Hello Markdown\n\nThis is some **bold** text and an <script>alert("XSS")</script> attempt.', }; } getSafeMarkup() { // 1. 解析Markdown为HTML const rawHtml = marked.parse(this.state.value); // 2. 使用DOMPurify净化HTML const cleanHtml = DOMPurify.sanitize(rawHtml); // 3. 返回净化后的HTML return { __html: cleanHtml }; } render() { return ( <div> <textarea id="editor" value={this.state.value} onChange={(e) => this.setState({ value: e.target.value })} /> <div className="title-input">VIEWER</div> <div className="content" id="preview" dangerouslySetInnerHTML={this.getSafeMarkup()} /> </div> ); } }
在这个示例中，getSafeMarkup()函数首先使用marked.parse()将Markdown转换为原始HTML，然后将此原始HTML传递给DOMPurify.sanitize()进行严格净化，最后将净化后的安全HTML用于渲染。这样可以有效防止恶意脚本的注入，大大提高应用的安全性。
总结
正确使用Marked.js进行Markdown解析，关键在于理解其API，特别是使用marked.setOptions()进行全局配置和marked.parse()进行内容转换。然而，更重要的是，开发者必须高度重视安全性。Marked.js内置的sanitize选项已被弃用且不安全，绝不应用于生产环境。为了确保用户内容的安全性，强烈建议在Marked.js解析输出的HTML内容上，额外集成专业的HTML净化库，如DOMPurify，以提供强大的XSS防护。遵循这些最佳实践，可以构建出既功能完善又安全可靠的Markdown预览和渲染解决方案。
