Vous vous perdez sur internet, vous écoutez une chanson sombre de Francky Vincent, vous souhaitez en apprendre plus.

Vous allez sur votre moteur de recherche préféré, vous trouvez un article sur le sujet.

Votre article est flouté, vous ne pouvez pas lire, mais vous êtes intrigué.

Vous ne lirez pas

Habitant les Hauts-de-France, nos journaux m’ont habitué à voir ce genre paywall:

Le même principe est présent sur NextInpact, quelle ne fut pas ma surprise lorsque je suis tombé sur l’implémentation du Parisien:

L’article est entièrement affiché, flou mais présent, avec un popup fixe par-dessus.

Si nous analysons le code nous pouvons donc voir que chaque paragraphe est rendu comme ceci:

<section class="content" style="filter: blur(5px);">
<p>
Texte
</p>
</section>

Chaque paragraphe est inséré dans une section sur laquelle on applique un effet de flou.

Il nous suffit donc de forcer une autre valeur de flou avec !important afin de passer outre:

section[style]{filter:blur(0px) !important;}

Pour le mini popup c’est encore plus simple, on prend une de ses classes, au hasard piano-paywall et on le masque :

.piano-paywall {display: none !important;} 

Outre ce mini popup et l’effet de flou, qui sont exclusifs aux articles réservés aux abonnés, un deuxième paywall existe sur le site. Lui s’applique aux autres articles dès lors que nous en avons déjà consultés 5.

Ce dernier partage la classe .piano-paywall que nous avons sur le minipopup donc on réutilise la même chose et on passe outre.

Never trust user

Dans un monde parfait leur paywall fonctionne aussi bien que les autres.

Dans un monde parfait nous faisons confiance à l’utilisateur.

Nous ne faisons pas confiance à l'utilisateur.

Modifier le CSS automatiquement

Afin de passer outre le floutage il faut donc modifier les valeurs des CSS en questions. Pour faire cela nous avons plusieurs possibilités :

  • À la main

Clic droit, inspecter l’élément, ajouter nos modifications dans l’éditeur de style. Ça ne nécessite rien de spécial sauf de mémoriser/avoir le CSS sous la main et devoir faire la manipulation à chaque fois.

  • Via une extension

Ici vous avez le choix entre Greasemonkey pour faire vos modifs grâce à du JS ou Custom Style Script pour insérer directement le CSS.

Le problème ici est de devoir dépendre d’une extension. Outre le fait que j’ai du mal à faire confiance à ces dernières, vous n’avez pas les autorisations nécessaires pour les installer partout.

  • Via un bookmarklet

J’avais découvert le principe lors de mes débuts dans la carabistouille sur le défunt milw0rm. Il s’agit d'un marque-page ne contenant que du JavaScript et permettant l’exécution de code coté client juste en cliquant dessus. Voilà à quoi ça ressemble:

javascript:alert("Vous venez de cliquer sur un bookmarklet.");

Il suffirait donc d’avoir en marque-page un code JavaScript permettant de modifier le CSS de la page en cours. Cela existe et ressemble à ça:

document.getElementById(id).style.property = new style

Bookmarklet, CSS et JS

Afin de créer notre bookmarklet j’ai utilisé l’outil libre CSS Inject. Ce dernier permet de ne pas avoir à s’occuper de la modif de CSS par JS, il n’y a qu'à C/C notre CSS et il nous crée directement un bookmarklet prêt à l’emploi.

Si vous voulez vous en servir il suffit de rester appuyer sur ce lien FreeParisien et le glisser dans votre barre de favoris. Une fois sur un article obstrué nous n’aurez plus qu’à cliquer sur votre marque-page et laisser la magie opérer.