简介
在前端开发中，我们经常需要在页面中展示富文本，如博客文章、评论、聊天记录等。但是用户输入的富文本中可能含有恶意代码，如 XSS 攻击代码，会对网站安全造成威胁。因此，我们需要对富文本进行过滤和清洁，以避免不必要的风险。
本文将介绍一个非常实用的 npm 包 sanitize-html，它可以帮助我们快速有效地清洁富文本，保证安全性。
安装
npm install sanitize-html
使用
-- -------------------- ---- ------- ----- ------------ - ------------------------- -- ---- ----- ------- - - ------------ --- ------------------ -- -- -- ----- ----- --------- - ----------------------- ---------
在上面代码中，我们引用 sanitize-html 包，并设置了清洁选项 options，然后使用 sanitizeHtml() 方法对富文本进行清洁。
选项配置
在使用 sanitize-html 进行清洁时，我们需要根据需求配置选项，以满足清洁的要求。下面是常用的选项：
allowedTags
allowedTags 属性用于设置允许通过的 HTML 标签。如果我们不希望任何标签通过，可以设置为空数组 []，这将不允许任何 HTML 标签。
const options = {
allowedTags: [] // 不允许任何标签
}如果我们只允许 p 和 em 两个标签通过，可以设置为 [ 'p', 'em' ]。
allowedAttributes
allowedAttributes 属性用于设置允许通过的标签属性。如果不希望任何属性通过，可以设置为空对象 {}。
const options = {
allowedAttributes: {} // 不允许任何属性
}如果我们只允许 href 属性通过，可以设置为 { 'a': [ 'href' ] }。
示例
下面是一个使用示例，我们清洁一个包含危险代码的富文本。
-- -------------------- ---- ------- ----- ------------ - ------------------------- ----- --------- - --------------------------------------- ------------ ----- ------- - - ------------ - --- -- ------------------ -- -- ----- --------- - ----------------------- --------- ----------------------- -- -- --------- ----------
我们的清洁选项只允许 <p> 标签通过，因此，“XSS”代码被清除了。
结论
sanitize-html 是一个非常实用的 npm 包，可以方便快捷地清洁富文本，保证网站的安全性。希望本文能帮助大家更好地理解 sanitize-html 的使用方法和相关选项，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/40220