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 实体，例如 < 被编码为 <。
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 内容的清理规则，确保应用的安全性和功能性，一般常用的就前面几个，根据自己需要进行配置，如果有不对或者不足的欢迎评论区补充。
