网站分为哪几种,注册公司和建网站,wordpress 最喜欢的主题,网站模板大全sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库#xff0c;主要用于防止 XSS#xff08;跨站脚本攻击#xff09;。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的#xff0c;从而确保用户输入的内容不会包含潜在的恶意代码。
主要功能
HTML…sanitize-html 是一个用于清理和验证 HTML 的 JavaScript 库主要用于防止 XSS跨站脚本攻击。它允许你定义一套规则来决定哪些 HTML 标签和属性是可以被信任的从而确保用户输入的内容不会包含潜在的恶意代码。
主要功能
HTML 清理移除不安全的标签和属性。自定义配置可以根据需求配置允许的标签、属性等。XSS 防护有效防止跨站脚本攻击。
使用场景
在接收用户输入的富文本内容时确保内容的安全性。在展示第三方提供的 HTML 内容时防止恶意代码注入。
安装
可以通过 npm 安装 sanitize-html
npm install sanitize-html
基本用法
const sanitizeHtml require(sanitize-html);const dirty pscriptalert(XSS);/scriptSome text/p;
const clean sanitizeHtml(dirty, {allowedTags: [p, b, i, em, strong],allowedAttributes: {},
});console.log(clean); // 输出: pSome text/p
以下是一个在vue中使用的更全面的配置示例
import sanitizeHtml from sanitize-html;export default {data() {return {dirtyContent: pscriptalert(XSS);/scriptSome 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: [/\dpx/]},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 内容的清理规则确保应用的安全性和功能性一般常用的就前面几个根据自己需要进行配置如果有不对或者不足的欢迎评论区补充。
