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

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

主要功能

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

使用场景

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

安装

可以通过 npm 安装 sanitize-html：

Cobol 复制代码

npm install sanitize-html

基本用法

javascript 复制代码

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中使用的更全面的配置示例：

javascript 复制代码

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