Die meisten modernen JS-Frameworks wie React, Vue, oder Angular bringen von Haus aus bereits viele Sicherheitsfeatures mit, die es vorher nicht in der Form gab. Trotzdem kann man auch hier noch Fehler machen, die sich direkt auf die Sicherheit auswirken. Die Gefahr ist also nach wie vor, dass man aus Unwissenheit Schwachstellen verursacht. Deshalb ist es wichtig, diese Schwachstellen zu kennen, um sie dann auch vermeiden zu können.
Als Beispiel zeige ich hier einen klassischen Fall von Cross Site Scripting (XSS), der auch heute noch sehr real ist. Wir konstruieren uns dazu das folgende Szenario.
Nehmen wir an, wir wollten einen Benutzer mit seinem Namen ansprechen, indem wir ihn über eine Marketing-E-Mail verknüpfen. Das Hinzufügen von ?name=Julian zum Query-String und das anschließende Hinzufügen zum DOM wäre eine schnelle Möglichkeit, dies zu tun.
Zum Beispiel:
document.querySelector('.tagline').innerHTML = nameFromQueryStringDadurch würde „Julian“ direkt namentlich angesprochen werden auf der Seite. Die Filterung auf den Request-Parameter wird vom JS-Framework hier nicht gemacht werden.
Die Verwendung von Code wie dem oben genannten bedeutet, dass jeder Angreifer Code in Deine Webanwendung einfügen und übernehmen kann. Allein durch Ändern des Namens in <script src="my.malicious.site"> kann man eine URL kreieren, die eine gefälschte Zahlungsseite so aussehen lässt, als würde sie von Deiner SSL-verschlüsselten Website geliefert.
Aus diesem Grund ist es ratsam, Daten von Requestparametern immer vorher zu prüfen und zu filtern, und sie niemals einfach so zu übernehmen. Nur so kann man XSS wirksam vermeiden.