Blog

Sicherheitstests nur mit Ihrem Browser

Ömer Karaduman

Ömer Karaduman

Aktualisiert Oktober 15, 2025
7 Minuten

Sicherheitstests sind ein ganz eigener Beruf, der Kenntnisse über Nischen-Tools, Erfahrung mit verschiedenen Technologien und eine gewisse destruktive Einstellung erfordert. Aber das bedeutet nicht, dass Sicherheitstests nur den Experten überlassen werden sollten.

Heute zeigen wir Ihnen, wie Sie Ihr Wissen über funktionale Tests erweitern können, um die versteckten Schwachstellen in Ihrer Webanwendung aufzudecken, und zwar mit nichts anderem als Ihrem Browser!

eine Person in einem Kapuzenpulli, die vor mehreren Monitoren mit grünem Text auf schwarzem Bildschirm sitzt
Eine solche Umgebung brauchen Sie nicht, aber Sie können sich gerne einen Kapuzenpulli schnappen, wenn Sie damit in Stimmung kommen.

Eine einfache Funktion zum Testen

Stellen Sie sich vor, dass Sie die folgende Funktion testen sollen:

Bildschirm zur Zahlungsbestätigung

Als Benutzer möchte ich meinen Namen und meine Adressdaten eingeben und den angegebenen Zahlungsbetrag bestätigen können.
Kriterien für die Akzeptanz:
  • Die Bestätigung ist nicht möglich, wenn Name oder Adresse leer sind.
  • Der Benutzer kann den Zahlungsbetrag nicht ändern.
  • Wenn der Nutzer ein Premium-Mitglied ist, wird keine Versandgebühr erhoben.
  • Wenn der Nutzer kein Premium-Mitglied ist, wird eine Versandgebühr von 5 Euro erhoben.
Außerhalb des Bereichs:
  • Registrierung als Premium-Mitglied
  • Berechnung des Zahlungsbetrags
  • Validierung von Name und Adresse (sie werden akzeptiert, solange sie nicht leer sind)
Zum Testen, wird Ihnen ein Bildschirm zur Verfügung gestellt bei dem ein vordefinierter Zahlungsbetrag eingegeben wird und der Benutzer kein Premium-Benutzer ist. Die Berechnung des Zahlungsbetrags, die Registrierung als Premium-Mitglied und die Übergabe dieser Daten an den Bildschirm sind bereits getestet. Jetzt, besuchen Sie die Übungsseite falls Sie das noch nicht getan haben, überlegen Sie sich, welche Tests Sie durchführen würden, probieren Sie sie aus und sehen Sie, ob die Implementierung korrekt aussieht. Wenn Sie einige potenzielle Sicherheitsprobleme identifiziert haben, herzlichen Glückwunsch! Sie haben bereits eine Tester-Mentalität, bei der Sie sich nicht nur auf die Überprüfung der Akzeptanzkriterien beschränken. Lesen Sie weiter, um zu sehen, ob Sie alle versteckten Schwachstellen gefunden haben. Wenn Sie der Meinung sind, dass die Implementierung gut aussah, lesen Sie weiter, um ein neues Kapitel in Ihrem Testansatz aufzuschlagen!

Frontend und Backend; verbunden, aber unabhängig

Wenn Sie sich auf die Benutzeroberfläche (UI) konzentrieren, können Sie feststellen, dass sie alle vorgegebenen Akzeptanzkriterien erfüllt. Sie können das Formular nicht mit leeren Eingaben abschicken, Sie können den Zahlungsbetrag nicht ändern und es gibt keine Option zur Änderung des Prämienstatus. Alles ist in Ordnung, oder? Nun, nicht wirklich.

Bei der Arbeit an einer Webanwendung ist es ein weit verbreiteter Irrtum, Frontend und Backend als ein Ganzes zu betrachten, als untrennbare Teile einer einzigen Anwendung. Diese Denkweise kann dazu führen, dass sich die Tester auf End-to-End-Tests (E2E) konzentrieren und alle Aktionen und Überprüfungen auf der UI-Ebene durchführen.

Frontend und Backend sind jedoch zwei unabhängige Komponenten, die nur durch APIs miteinander verbunden sind. Während das Backend auf einem entfernten Server liegt, befindet sich das Frontend auf dem Rechner des Kunden (normalerweise in einem Browser). Dies wirft zwei Probleme auf:

  • Der Benutzer kann das Frontend verändern (nicht nur die Benutzeroberfläche, sondern auch die Benutzerskripte und lokalen Daten)
  • Der Benutzer kann die Benutzeroberfläche ganz auslassen und direkt die APIs verwenden.
Deshalb lautet eine gängige Faustregel: "Stellen Sie sicher, dass das Backend alle Daten, die es erhält, validiert". Und das ist auch der Grund, warum wir als Tester sicherstellen müssen, dass diese Praxis befolgt wird.

Lassen Sie uns sehen, was das für unser Beispiel bedeutet.

Ändern des Frontends

Die meisten Webbrowser werden mit einer Reihe von Entwicklertools geliefert, mit denen Sie hinter den Vorhang blicken können. Mit diesen Tools können Sie alle Elemente des Frontends, das sich auf Ihrem Computer befindet, untersuchen (und ändern!).

In den Beispielen werden wir verwenden Die Entwickler-Tools von Chrome können Sie in der Dokumentation Ihres bevorzugten Browsers nachschlagen, um einen ähnlichen Effekt zu erzielen. (siehe Safari , Firefox , Edge ). Normalerweise können Sie die Entwicklertools öffnen, indem Sie mit der rechten Maustaste auf eine beliebige Seite klicken und "Inspect" oder "Inspect Element" wählen.

Ist ein erforderliches Feld wirklich erforderlich? Oder ein Nur-Lese-Feld Nur-Lese-Feld?

Wenn Sie versucht haben, das Formular mit einem leeren Namen oder einer Adresse abzuschicken, haben Sie festgestellt, dass der Browser dies nicht zulässt. Auf den ersten Blick scheinen die Akzeptanzkriterien erfüllt zu sein. Aber ist das wirklich so?

Gehen Sie zurück zur Beispielseite und klicken Sie mit der rechten Maustaste auf das Feld "Name" und dann auf "Prüfen". Das Fenster mit den Entwicklertools sollte sich öffnen und das Feld "Name" ausgewählt sein.

Doppelklicken Sie auf das Attribut "erforderlich" und löschen Sie es einfach. Sie sehen nun, dass Sie das Formular mit einem leeren Namensfeld abschicken können.

Das Gleiche können Sie mit dem Adressfeld machen, und das sind potenzielle Fehler für das System. Andererseits stellt es kein großes Sicherheitsrisiko dar, eine Bestellung mit einem ungültigen Empfänger zu erstellen. Es wäre sogar noch besser, wenn wir einen finanziellen Vorteil daraus ziehen könnten.

Versuchen Sie dazu, das Feld "paymentDue" zu untersuchen. Sie werden sehen, dass es ein readonly-Attribut hat, das auf ähnliche Weise entfernt werden kann. Oder Sie aktualisieren einfach das hartkodierte Attribut "value" auf etwas Günstigeres. Sie können es sogar mit negativen Werten versuchen!

Frontend ist mehr als die Benutzeroberfläche

Abgesehen von der Benutzeroberfläche enthält das Frontend JavaScript, CSS und verschiedene lokale Speicheroptionen. Sie können einen Blick auf die Registerkarte Quellen in den Entwicklertools werfen und die Datei form-script.js überprüfen, die die für diese Seite verwendeten Skripte enthält. In den meisten modernen Websites sind die Skripte jedoch viel größer und verschleiert, so dass sie nicht so leicht zu verstehen und zu ändern sind wie die Benutzeroberfläche selbst.

Lassen Sie uns für dieses Beispiel einen Blick auf die (un)bekannteste Form der lokalen Speicherung werfen: Cookies. Gehen Sie in den Entwicklertools auf die Registerkarte Anwendung und klicken Sie auf den Eintrag unter dem Abschnitt Cookies. Daraufhin werden alle Cookies der Website aufgelistet. Einige von ihnen könnten verwirrend sein, aber "isPremiumMember" sieht interessant aus. Versuchen Sie, den Wert auf "true" zu setzen, und senden Sie das Formular erneut ab.

Wenn es nur auf allen Plattformen so einfach wäre, Premium-Mitglied zu werden!

Sie werden vielleicht denken, dass dies nur ein albernes kleines Beispiel ist, aber ich bin persönlich auf eine beliebte Website gestoßen, bei der Sie das isAdmin-Flag in den Cookies auf "true" setzen konnten, um alle Administratorrechte zu erhalten!

Beachten Sie, dass die Änderungen, die Sie in der Benutzeroberfläche vornehmen, vorübergehend sind und nach einer Aktualisierung nicht mehr vorhanden sind. Das Cookie hingegen bleibt bestehen, bis es abläuft oder von der Webseite überschrieben wird.

Wie wäre es, wenn Sie die Benutzeroberfläche ganz weglassen?

Wie wir bereits erwähnt haben, sind Backend und Front unabhängig und über APIs miteinander verbunden. In den Entwicklertools können Sie auf die Registerkarte Netzwerk wechseln und den API-Aufruf beobachten, der erfolgt, wenn Sie das Formular abschicken. Et voilà! Alle Parameter, die wir gesucht haben, sind im API-Aufruf klar und deutlich verfügbar. Sie können diese API mit einem Tool wie Postman oder von Ihrem Terminal aus mit Befehlen wie cURL aufrufen und frei mit den Parametern spielen!

Brauchen wir dann keine Frontend-Validierungen?

Nein! Sie sind immer noch wichtig für die Benutzerfreundlichkeit und sollten getestet werden. Allerdings sollte man sich nicht auf sie verlassen, um die Sicherheit zu gewährleisten. Vielmehr sollte das Backend immer für die Validierung und Bereinigung der empfangenen Daten verantwortlich sein.

Fazit

Wie Sie gesehen haben, sind Sicherheitstests nicht nur etwas für Experten. Mit ein wenig Neugier und Entdeckergeist können Sie Schwachstellen in Webanwendungen aufdecken, und zwar mit nichts anderem als Ihrem Browser und seinen Entwickler-Tools.

Also, worauf warten Sie noch? Fangen Sie noch heute an, Ihre Fähigkeiten im Bereich Sicherheitstests zu trainieren! Besuchen Sie die besuchen Sie die Übungsseite (oder eine beliebige andere Website), experimentieren Sie mit dem Frontend und dem Backend, und sehen Sie, wie weit Sie die Grenzen ausloten können.

Denken Sie daran, dass Sicherheit ein fortlaufender Prozess ist, kein einmaliges Ereignis. Üben Sie weiter, lernen Sie dazu und teilen Sie Ihre Erkenntnisse, um das Internet für alle sicherer zu machen.

Und in der Zwischenzeit zögern Sie nicht, sich an uns zu wenden, wenn Sie Ihren Testansatz verbessern oder die Sicherheit Ihres Systems mit Hilfe unserer Domänenexperten erhöhen möchten!

Verfasst von

Ömer Karaduman

Contact

Let’s discuss how we can support your journey.