轻松解决安全隐患：打造受信任的 Markdown 渲染工具

2022-12-25 04:20:34

通过改造 MDX 实现不受信任 Markdown 的客户端渲染方案

在数字时代的今天，Markdown 已成为一种颇受欢迎的格式，它以简洁易懂的语法赋予我们撰写格式丰富的文章的能力。然而，传统的 Markdown 渲染方式存在固有的安全隐患。若将用户提交的 Markdown 内容直接渲染至网站上，攻击者可通过嵌入恶意代码，对网站发动攻击。

改造 MDX 的必要性

为了弥补这一缺陷，我们可以改造 MDX，打造一个客户端渲染、组件化且不受信任的 Markdown 解决方案。这让我们得以在渲染 Markdown 内容前，对其执行安全检查，确保不会对网站构成威胁。

实现方案：逐步详解

1. 创建 Markdown 渲染器

首先，新建一个 React 组件，负责渲染 Markdown 内容，命名为 MarkdownRenderer。

import React from "react";

const MarkdownRenderer = ({ markdown }) => {
  // 将 Markdown 渲染成 HTML
  const html = markdownToHtml(markdown);

  // 将 HTML 渲染至 DOM
  return <div dangerouslySetInnerHTML={{ __html: html }} />;
};

export default MarkdownRenderer;

2. 建立安全检查函数

接下来，创建一个函数 sanitizeMarkdown，负责对 Markdown 内容进行安全检查。

import DOMPurify from "dompurify";

const sanitizeMarkdown = (markdown) => {
  // 利用 DOMPurify 对 Markdown 执行安全检查
  const sanitizedHtml = DOMPurify.sanitize(markdown);

  // 返回经过安全检查的 HTML 内容
  return sanitizedHtml;
};

3. 组合组件，确保安全

最后，将两个组件整合为 SafeMarkdownRenderer，负责渲染安全的 Markdown 内容。

import React from "react";

const SafeMarkdownRenderer = ({ markdown }) => {
  // 对 Markdown 执行安全检查
  const sanitizedHtml = sanitizeMarkdown(markdown);

  // 将经过安全检查的 HTML 渲染至 DOM
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
};

export default SafeMarkdownRenderer;