Markdown是一种轻量级的标记语言，通常用于编写技术文档和博客文章。随着网页应用程序的发展，许多前端开发人员选择使用Markdown来编写文档、注释和博客文章。但是，Markdown中的HTML代码可以导致安全漏洞和跨站点脚本攻击。为了避免这些问题，我们可以使用@gerhobbelt/markdown-it-sanitizer npm包，这是一种安全的Markdown渲染器，可以过滤掉危险的HTML代码和JavaScript。
安装
要使用@gerhobbelt/markdown-it-sanitizer npm包，您需要先安装Node.js和npm。安装完成后，您可以在终端中使用以下命令安装@gerhobbelt/markdown-it-sanitizer：
npm install @gerhobbelt/markdown-it-sanitizer
用法
要使用@gerhobbelt/markdown-it-sanitizer，您需要先导入它：
const md = require('markdown-it')();
const Sanitizer = require('@gerhobbelt/markdown-it-sanitizer');
md.use(Sanitizer, { /* options */ });然后，您可以像往常一样使用markdown-it来渲染Markdown文本。@gerhobbelt/markdown-it-sanitizer将在渲染时自动过滤掉危险的HTML代码和JavaScript。
例如，以下代码将渲染Markdown文本，并将其作为HTML添加到一个div元素中：
-- -------------------- ---- ------- ----- -- - ------------------------- ----- --------- - --------------------------------------------- ----------------- - -- ------- -- --- ----- ------------ - -- ------ ------------------------------------ ----- ---- - ------------------------ ----- --------- - ------------------------------------- ------------------- - -----
选项
@gerhobbelt/markdown-it-sanitizer支持以下选项：
- allowedTags：一组允许的HTML标记。默认情况下，它包括a、abbr、b、blockquote、code、del、dd、div、dl、dt、em、h1、h2、h3、h4、h5、h6、hr、i、img、kbd、li、ol、p、pre、s、strike、strong、sub、sup、ul、br、ulink和span。
- allowedAttributes：一组允许的HTML属性。默认情况下，它包括href、src、align、alt、title、width、height、class、name、target、rel、id、lang、dir、cite、datetime、style和xml：lang。
例如，以下代码使用allowedTags选项来限制允许的HTML标记：
const md = require('markdown-it')();
const Sanitizer = require('@gerhobbelt/markdown-it-sanitizer');
md.use(Sanitizer, {
allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ]
});效果示例
以下是一个示例Markdown文本：
# Hello, @gerhobbelt/markdown-it-sanitizer!
This is a **bold** text.
This is an _emphasized_ text.
This is a [link](https://www.google.com/).
This is an <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo" />.
This is a <script>alert('Hello, World!');</script>.Markdown-it将该文本转换为以下HTML：
<h1>Hello, @gerhobbelt/markdown-it-sanitizer!</h1> <p>This is a <strong>bold</strong> text. This is an <em>emphasized</em> text. This is a <a href="https://www.google.com/">link</a>. This is an <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google Logo">. This is a .</p>
注意，<script>标记已经被过滤掉了，因为它是不安全的HTML代码。</p> <h2>结论</h2> <p>使用@gerhobbelt/markdown-it-sanitizer npm包，我们可以使用Markdown编写文档、注释和博客文章，而不必担心安全问题。@gerhobbelt/markdown-it-sanitizer过滤掉危险的HTML代码和JavaScript，从而保护您的应用程序不受攻击。为了获得最佳结果，请在使用该软件包时，使用适当的选项来限制允许的HTML标记和属性。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/5f02c870403f2923b035bd8d">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/5f02c870403f2923b035bd8d">https://www.javascriptcn.com/post/5f02c870403f2923b035bd8d</a></p> </blockquote>