本教程旨在解决使用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规范，可能会导致解析失败或出现安全漏洞。
当开发者尝试在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.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。
重要提示： 尽管上述代码展示了如何正确配置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处理）是极其危险的。
为了构建一个真正安全的Markdown预览器，您应该在Marked.js解析输出的HTML之后，使用一个专门的、经过充分测试的HTML净化库进行二次处理。
推荐的HTML净化库包括：
以下是使用DOMPurify集成到您的Markdown渲染流程中的示例：
安装DOMPurify：
npm install dompurify # 或者 yarn add dompurify
在组件中集成DOMPurify：
ibrary, like DOMPurify (recommended), sanitize-html or insane on the output HTML!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 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 (
致胜网络推广营销网专注海外推广十年,是谷歌推广.Facebook广告全球合作伙伴,我们精英化的技术团队为企业提供谷歌海外推广+外贸网站建设+网站维护运营+Google SEO优化+社交营销为您提供一站式海外营销服务。