Les easter eggs sur le web

Article rédigé suite à un stage d'observation dans l'équipe d'Alsacréations

Lorsque l'on consulte un site web, nous pouvons tous voir le code source (avec ctrl + U » ou en faisant un clic droit puis inspecter).

Quelques sites en profitent pour dissimuler des easter eggs le plus souvent sous la forme d'art ASCII ou de messages à demi-cachés, que ce soit en HTML, JavaScript, ou CSS. Ces messages sont soit des petits clins d'oeil à destination d'autres personnes curieuses ou pratiquant le développement web, soit intentionnels pour mentionner des liens vers des pages de recrutement, des avertissements ou des ressources variées.

Voyons quelques exemples de différentes natures, en mettant de côté ceux qu'affichent les moteurs de recherche tels que Google avec des mots clés spécifiques (ex: cherchez "anagramme" ou "Askew").

HTML

Mozilla a placé dans son code un "godzilla" crachant du feu sur le logo, assorti d'un message :

Bonjour, enchanté ! Intéressé d’avoir un impact direct sur des centaines de millions d’utilisateurs ? Rejoins Mozilla, et viens faire partie de la communauté qui aide à construire un meilleur avenir pour le web. Visitez … pour en apprendre plus sur les emplois disponibles. Visitez … pour plus de façons de s'impliquer et aider à supporter Mozilla

             _.-~-.
           7''  Q..\
        _7         (_
      _7  _/    _q.  /
    _7 . ___  /VVvv-'_                                            .
   7/ / /~- \_\\      '-._     .-'                      /       //
  ./ ( /-~-/||'=.__  '::. '-~'' {             ___   /  //     ./{
 V   V-~-~| ||   __''_   ':::.   ''~-~.___.-'' _/  // / {_   /  {  /
  VV/-~-~-|/ \ .'__'. '.    '::                     _ _ _        ''.
  / /~~~~||VVV/ /  \ )  \        _ __ ___   ___ ___(_) | | __ _   .::'
 / (~-~-~\\.-' /    \'   \::::. | '_ ` _ \ / _ \_  / | | |/ _` | :::'
/..\    /..\__/      '     '::: | | | | | | (_) / /| | | | (_| | ::'
vVVv    vVVv                 ': |_| |_| |_|\___/___|_|_|_|\__,_| ''

Hi there, nice to meet you!
Interested in having a direct impact on hundreds of millions of users? Join
Mozilla, and become part of a global community that’s helping to build a
brighter future for the Web.

Visit https://www.mozilla.org/careers to learn about our current job openings.
Visit https://www.mozilla.org/contribute for more ways to get involved and
help support Mozilla.

Sur la page d'accueil de Amazon, vous trouverez tout en bas de la page de code, un canard qui dit Meow. Sympa non ?

       .__(.)< (MEOW)
        \___)   
 ~~~~~~~~~~~~~~~~~~

Sur theoatmeal se cache un gigantesque ptérodactyle, à vous de le trouver.

Vous pourrez également trouver le logo de l’Université du Michigan dans leur code source :

<!--
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMM             MMMMMMMMMMMMMMMMM             MMMMMMMMM
MMMMMMMM              MMMMMMMMMMMMMMM              MMMMMMMMM
MMMMMMMM                MMMMMMMMMMM                MMMMMMMMM
MMMMMMMM                 MMMMMMMMM                 MMMMMMMMM
MMMMMMMM                  MMMMMMM                  MMMMMMMMM
MMMMMMMMMMMM               MMMMM                MMMMMMMMMMMM
MMMMMMMMMMMM                MMM                 MMMMMMMMMMMM
MMMMMMMMMMMM                 V                  MMMMMMMMMMMM
MMMMMMMMMMMM                                    MMMMMMMMMMMM
MMMMMMMMMMMM         ^               ^          MMMMMMMMMMMM
MMMMMMMMMMMM         MM             MM          MMMMMMMMMMMM
MMMMMMMMMMMM         MMMM         MMMM          MMMMMMMMMMMM
MMMMMMMMMMMM         MMMMM       MMMMM          MMMMMMMMMMMM
MMMMMMMMMMMM         MMMMMM     MMMMMM          MMMMMMMMMMMM
MMMMMMMM                MMMM   MMMM                MMMMMMMMM
MMMMMMMM                MMMMMVMMMMM                MMMMMMMMM
MMMMMMMM                MMMMMMMMMMM                MMMMMMMMM
MMMMMMMM                MMMMMMMMMMM                MMMMMMMMM
MMMMMMMM                MMMMMMMMMMM                MMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
-->

Quelques marques comme KitKat ou Coca-Cola avaient aussi opté pour cet art caché, mais les ont supprimés depuis des refontes récentes.

Si vous souhaitez vous aussi ajouter un easter egg tel quel dans votre code, il y a une manière très simple de le faire : utiliser les commentaires HTML entre <!-- et finissant par -->. Tout ce qui est placé entre n'est pas interprété par le navigateur. Vous trouverez aussi de nombreux sites vous permettant de générer de l'art avec les caractères.

Code Konami

Le Code Konami quant à lui correspond à une combinaison de touches successives, venant initialement d'un code de triche de jeu vidéo : « Haut Haut Bas Bas Gauche Droite Gauche Droite B A ». Vous pouvez essayer cette commande sur :

• Le site de Ldlc : La page va se retourner
• La page du billet de 10 dollars de la Banque du Canada : l'hymne national survient avec une pluie de billets
• La page 404 de Discord : Un jeu snake va se lancer

Un petit script konami-js vous premet de l'ajouter facilement.

robots.txt, humans.txt

Les fichiers robots.txt sont connus pour être placés à la racine d'un site pour interdire le référencement de certaines portions aux robots d'indexation. Ces derniers peuvent contenir des commentaires, donc de l'ascii art. Notez par exemple celui de alsacreations.com ;)

Plus récemment pensés, les fichiers humans.txt décrivent les personnes "humaines" ayant contribué à un projet et sont un espace totalement libre pour y dissimuler (aussi) des easter eggs. Par exemple :

• Celui de Google basique mais efficace
• Celui de html5boilerplate.com
• Celui de Discord très artistique

     ..-:\oo-.    .:oo/:-.
    -oooooooooooooooooooooo.                            __                                                          ___
   -oooooooooooooooooooooooo.           OOOOOOOOO:-.   `MM`     _.._        _.._        _.._     ____  _       _.   OOO.
  -oooooooooooooooooooooooooo.          OOOOOOOOOOOo:        -/ooo-ooo.  -/OOOOOO/.  :/OOOOOO:.  OOOO.oOo: .:oOOOO-.OOO.
 `ooooooo/--/oooooo:--/ooooooo          OOOO    `OOOO `OooI `ooo:.    ` /oOO/```-:..oOOO-``\OOO: OOOO/` ``.oOOO/```\OOO.
 :oooooo-    :oooo-    :oooooo-         OOOO    .OOOo `OOOI  `-OOOOOOo.`OOOO.      -OOO:   .OOOo OOOO.    -OOOO`   /OOO.
 ooooooo:-  -/oooo:-  -/oooooo/         OOOOooooOooo- `OOOI  ._   `]OO/ :OOOOoooOO.`OOOOOooOOOO- OOOO.    `/OOOOooOOOOO.
 ooooooooo//oooooooo//ooooooooo         OOOOOOOOO:-`  `OOOI  `:OOoOO:-`  `-:OOOO:-`  `-:OOOO:-`  OOOO.     `-:OOO:-`OOO.
 ooooooo/ooooooooooooo//oooooo/
 `.:ooooo/``.------.`.\oooo/:.
     `.-:`            .:-.`

  https://discord.com/company

Console

La console JavaScript du navigateur peut révéler des messages, une fois ouverte (par F12 ou Ctrl+Shift+I). C'est un outil typique à destination des développeuses et développeurs, on y retrouve non seulement des erreurs ;) mais aussi parfois des messages de bienvenue ou encore d'avertissement comme Discord qui est assez explicite :

À vous !

Prenez quelques instants pour ajouter à vos projets et sites ces petits messages cachés. Et précisez en commentaires si vous connaissez d'autres sites avec de telles astuces !