sanitize-html 防止 XSS（跨站脚本攻击）

sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库，主要用于防止 XSS（跨站脚本攻击）。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的，从而确保用户输入的内容不会包含潜在的恶意代码。

主要功能

• HTML 清理：移除不安全的标签和属性。
• 自定义配置：可以根据需求配置允许的标签、属性等。
• XSS 防护：有效防止跨站脚本攻击。

使用场景

• 在接收用户输入的富文本内容时，确保内容的安全性。
• 在展示第三方提供的 HTML 内容时，防止恶意代码注入。

安装

可以通过 npm 安装 sanitize-html：

npm install sanitize-html

基本用法

const sanitizeHtml = require('sanitize-html');const dirty = '<p><script>alert("XSS");</script>Some text</p>';
const clean = sanitizeHtml(dirty, {allowedTags: ['p', 'b', 'i', 'em', 'strong'],allowedAttributes: {},
});console.log(clean); // 输出: <p>Some text</p>

以下是一个在vue中使用的更全面的配置示例：

import sanitizeHtml from 'sanitize-html';export default {data() {return {dirtyContent: '<p><script>alert("XSS");</script>Some text</p>'};},computed: {sanitizedContent() {return sanitizeHtml(this.dirtyContent, this.sanitizeConfig);// 第一个参数是要处理的文本，第二个参数是配置项}},methods: {sanitizeConfig() {return {allowedTags: ['p', 'b', 'i', 'em', 'strong', 'a', 'img'],// 允许的 HTML 标签列表。allowedAttributes: {// 允许的 HTML 属性及其对应的标签。a: ['href', 'title'],img: ['src', 'alt']},transformTags: {// 对特定标签进行转换的函数,可以修改特定标签的属性值或结构。a: (tagName, attribs) => {if (!attribs.href.startsWith('http')) {attribs.href = 'https://example.com';}return { tagName, attribs };}},allowedStyles: { // 允许的 CSS 样式及其对应的属性,只有这些样式属性及其值会被保留。'*': { // * 代表所有标签color: [/^#[0-9a-f]{6}$/i, /^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/]'font-size': [/\d+px/]},p: { // 仅适用于 <p> 标签'font-weight': ['bold', 'normal']}},// allowedStyles: ['color', 'background-color', 'font-size', 'text-align', 'margin', 'padding'],  //也可以 这种写法， 允许使用的 CSS 样式属性 只有这些样式属性及其值会被保留。disallowedTagsMode: 'escape', // 处理allowedTags列表中不允许的标签，方式，'escape' 这个属性将不允许的标签及其内容转义为文本形式，'remove' 这个属性会直接移除这些标签。parseStyle: true, // 是否解析 style 行内属性,设置为 true 时，style 属性将被解析并清理，并根据 allowedStyles 配置来决定哪些样式属性及其值是允许的allowProtocolRelativeUrls: false,//是否允许协议相对 URL（如 //example.com）,设置为 false 时，协议相对 URL 将被移除或替换。enforceHtmlEntityEncoding: true,//是否强制编码 HTML 实体,设置为 true 时，特殊字符将被编码为 HTML 实体，例如 < 被编码为 &lt;。allowedSchemes: ['http', 'https', 'mailto'],// 允许的 URL 方案（协议）,只有这些方案的 URL 会被保留，其他方案的 URL 将被移除。allowedSchemesByTag: { // 为不同标签指定不同的允许 URL 方案。a: ['http', 'https', 'mailto'],img: ['http', 'https']},allowedSchemesAppliedToAttributes: ['href', 'src'],// 指定哪些属性需要检查 URL 方案。selfClosing: ['img', 'br', 'hr'], // 这些标签将被视为自闭合标签。exclusiveFilter: (frame) => frame.tag === 'script' || frame.tag === 'style', // 排除某些标签或属性的过滤器函数,返回 true 的标签或属性将被移除。nonTextTags: ['script', 'style'], // 这些标签的内容将被视为非文本内容，不会被清理。textFilter: (text) => text.replace(/badword/g, '****') // 文本内容的过滤器函数，可以对文本内容进行自定义处理。};}}
};

 通过这些配置，你可以更精细地控制 HTML 内容的清理规则，确保应用的安全性和功能性，一般常用的就前面几个，根据自己需要进行配置，如果有不对或者不足的欢迎评论区补充。