Weiche Paywalls mit CSS und JavaScript entfernen
Manche Paywalls schicken dir den ganzen Artikel und verstecken ihn dann hinter einem grauen Overlay und sperren die Seite, sodass du nicht scrollen kannst. Der Text ist bereits in deinem Browser — du kannst ihn nur nicht lesen. Dieser Artikel zeigt, wie du dieses Overlay mit CSS und JavaScript entfernst. Zuerst eine wichtige Unterscheidung und eine ehrliche Anmerkung zur Ethik.
Weiche Paywall gegen harte Paywall
Das ist wichtig, also lies es vor allem anderen.
- Eine weiche Paywall schickt das vollständige Artikel-HTML an deinen Browser und versteckt es dann: ein Overlay, eine Scroll-Sperre, eine Unschärfe, eine
max-height-Klemme. Der Inhalt ist im DOM. Bestätigen kannst du das in den DevTools — öffne das Elements-Panel und suche nach einem Absatz des Artikels; ist er da, ist die Paywall weich. - Eine harte Paywall schickt den Textkörper gar nicht erst. Der Server prüft dein Abo und gibt nur dann den Text zurück. Das DOM enthält einen Teaser und sonst nichts. Kein CSS und kein JavaScript kann Inhalt herbeizaubern, der nie ausgeliefert wurde.
Dieser Artikel geht nur um weiche Paywalls — die Sichtbarkeit von Text wiederherzustellen, der bereits in deinem Browser liegt. Eine harte Paywall kannst du nicht umgehen, und du solltest es auch nicht versuchen.
Eine ehrliche Anmerkung zu Ethik und Recht
Qualitätsjournalismus kostet Geld in der Herstellung. Eine weiche Paywall ist die Wette eines Verlags, dass Nörgeln besser funktioniert als Blockieren. Eine Seite im eigenen Browser umzustylen ist legal — dasselbe Recht, das Werbeblocker und Lesemodus existieren lässt — aber Legalität ist nicht die ganze Geschichte.
Sei ein anständiger Leser: Wenn du dich auf eine Publikation verlässt, abonniere sie. Nutze diese Techniken für den gelegentlichen Einzelartikel, für Barrierefreiheit oder um etwas zu lesen, das dir ein Freund geschickt hat — nicht als Weg, nie wieder für Nachrichten zu zahlen. Redaktionen, denen du das Geld entziehst, schließen irgendwann.
Finden, was den Artikel verbirgt
Öffne die DevTools, Elements-Panel. Weiche Paywalls nutzen eine kleine Auswahl an Tricks, meist in Kombination:
- Ein
divmit fixer Position und hohemz-index, der den Artikel verdeckt — das Overlay. overflow: hiddenoderposition: fixedauf<body>— die Scroll-Sperre.- Ein
filter: blur()auf den unteren Absätzen. - Ein
max-heightplusoverflow: hiddenauf dem Artikel-Container — die Ausblend-Klemme.
Klick dich durch das Overlay-Element und lies seine berechneten Stile. Notiere die Klassennamen — die nimmst du als Nächstes ins Visier.
Das Overlay entfernen
Das Overlay ist ein separates Element, das obendrauf gelegt wird. Verstecke es mit CSS:
/* Common paywall overlay class and ID patterns */
.paywall,
.paywall-overlay,
.subscription-wall,
.piano-overlay,
.tp-modal,
.tp-backdrop,
[class*="paywall" i],
[class*="metering" i],
[id*="paywall" i] {
display: none !important;
}Nutze das i-Flag für Groß-/Kleinschreibung-unabhängiges Attribut-Matching, genau wie bei Cookie-Bannern. Fang breit an, dann verenge auf bestimmte Klassen, falls du zu viel triffst.
Das Scrollen des Body freigeben
Das Overlay zu verstecken nützt nichts, wenn die Seite noch eingefroren ist. Weiche Paywalls sperren das Scrollen, damit du den versteckten Text nicht erreichst. Erzwing es zurück:
/* Restore normal scrolling */
html, body {
overflow: auto !important;
position: static !important;
height: auto !important;
}Falls ein Skript die Sperre immer wieder neu setzt, schlägt es eine winzige JS-Regel, indem sie den Inline-Stil in einer Schleife löscht:
// Re-assert scrolling against a script that keeps locking it
setInterval(() => {
document.documentElement.style.overflow = 'auto';
document.body.style.overflow = 'auto';
document.body.style.position = 'static';
}, 400);Den Text entunschärfen
Viele Paywalls lassen die ersten beiden Absätze scharf und verschwimmen den Rest als Teaser. Der Text ist vollständig da — er ist nur unscharf. Entferne den Filter:
/* Kill the blur teaser */
.article-body,
.article-content,
[class*="blur" i],
[class*="fade" i] {
filter: none !important;
-webkit-filter: none !important;
}Sitzt die Unschärfe auf einem bestimmten Kindelement, inspiziere es und ziele auf genau diese Klasse — ein pauschales * { filter: none } kann legitime Effekte anderswo auf der Seite kaputt machen.
Die max-height-Klemme entfernen
Der andere klassische Teaser: Der Artikel-Container hat ein max-height und overflow: hidden, sodass du den oberen Teil und ein Gradient-Ausblenden siehst. Heb die Klemme auf:
/* Unclamp the article so the full text shows */
.article-body,
.post-content,
[class*="article" i][class*="clamp" i],
[class*="gated" i] {
max-height: none !important;
overflow: visible !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Remove the gradient fade element if it is a separate node */
.content-fade,
[class*="gradient-fade" i] {
display: none !important;
}Alles als eine Regel zusammensetzen
Jeder Verlag nutzt eine etwas andere Mischung. Der effiziente Ansatz mit JustZix ist eine Regel pro Seite, eng abgegrenzt:
- Erstelle eine Regel mit dem URL-Muster
https://news.example.com/*. - Füge das Overlay-, Scroll-Freigabe-, Entunschärfungs- und Entklemm-CSS in den CSS-Tab ein.
- Füge das Scroll-Freigabe-JS nur hinzu, wenn ein Skript die Seite immer wieder neu sperrt.
- Halte diese Regeln in einem Ordner namens „Lesen", damit du sie als Gruppe prüfen und deaktivieren kannst.
Weil die Regel auf eine Domain begrenzt ist, betrifft sie nie eine Seite, die du lieber einfach abonnieren würdest.
Siehe auch
- Dark Patterns und falsche Dringlichkeit abschalten — dieselben Fähigkeiten, angewandt auf manipulative UI.
- Ein eigenes Druck-Stylesheet für bessere PDFs — einen Artikel aufräumen, bevor du ihn speicherst.
- JustZix-Anwendungsfälle für mehr leseorientierte Regeln.
Für den gelegentlichen Artikel hinter einem weichen Overlay installiere JustZix und schreib eine eng abgegrenzte Regel. Und wenn du eine Publikation oft liest — zahl dafür. Das hält die Artikel am Laufen.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.