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

相关推荐
shchojj1 分钟前
cuda的3DArray和TextureObject
前端
OpenTiny社区9 分钟前
重磅更新!Fluent Editor 开源富文本支持 LaTeX 可编辑公式啦~
前端·ui·开源·opentiny
豆豆17 分钟前
如何选择企业网站模版来搭建网站?
服务器·开发语言·前端·php·软件构建
小白菜学前端19 分钟前
Threejs 材质贴图、光照和投影详解
前端·3d·three.js
浮华似水33 分钟前
Docker入门系列——Docker-Compose
前端
真的很上进40 分钟前
⚡️如何在 React 和 Next.js 项目里优雅的使用 Zustand
java·前端·javascript·react.js·前端框架·vue·es6
小牛itbull40 分钟前
ReactPress 安装指南:从 MySQL 安装到项目启动
前端·javascript·数据库·mysql·react.js·开源·reactpress
@大迁世界44 分钟前
释放 PWA 的力量:2024 年的现代Web应用|React + TypeScript 示例
前端·javascript·react.js·前端框架·ecmascript
宅博士小陈1 小时前
NodeJS的安装 npm 配置和使用 Vue-cli安装 Vue项目介绍
前端·javascript·vue.js
布兰妮甜1 小时前
Angular框架:构建现代Web应用的全面指南
前端·javascript·前端框架·angular.js