本教程旨在解决使用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组件中的使用 VIEWER
此代码段的问题在于：
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组件中的使用保持不变 VIEWER
通过这种方式，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-htmlinsane
以下是使用DOMPurify集成到您的Markdown渲染流程中的示例：
安装DOMPurify：
npm install dompurify# 或者yarn add dompurify
在组件中集成DOMPurify：
import DOMPurify from 'dompurify';import { marked } from 'marked'; // 确保导入markedclass MarkdownPreviewer extends React.Component { constructor(props) { super(props); this.state = { value: '## Hello MarkdownnnThis is some **bold** text and an alert("XSS") 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 (