À l’instar de Marie qui explique comment elle a préparé sa conférence à Paris Web, je vais vous expliquer l’envers du décor pour une intervention de 15 minutes sur CSP.

TLDR : comment faire rentrer un an et demi en 15 minutes.

Les débuts sur CSP

J’ai découvert CSP il y a un peu plus d’un an et demi, grâce au service Dareboost, qui teste la qualité des sites. J’avoue que sur le coup, je n’avais jamais entendu parler de ce truc : CSP, kézako ?

En lisant quelques documentations, je comprends l’idée principale : dire ce que l’on autorise à s’exécuter sur le front-end, sachant que tout ce qui ne sera pas autorisé sera bloqué (pour éviter des failles XSS, des contenus indésirables, etc.).

Je me dis, c’est simple, je vais tester cela vite fait, c’est l’affaire de 10 minutes. Effectivement, j’avais lu que déployer CSP prenait 5 à 10 minutes sur un post sur CSP sur Github. Par contre, ce que je n’avais pas lu, c’est que souvent, c’était que le vrai challenge était de faire fonctionner son site avec.

Plein d’entrain – j’étais en fin de journée au boulot – je me décide à tester cela sur un petit site en me disant que cela serait assez facile : mon code front est plutôt clean, ça ne devrait pas être bien dur. Hé oh, quand même, j’ai été élevé au grain Opquast et à l’orthogonalité moi !

Grossière erreur : CSP m’a montré que j’avais oublié plein de petites bricoles. Pas bien graves, mais CSP ne faisant pas dans la demi-mesure, je m’y suis cassé le dentier. Vous vous doutiez bien que je n’avais pas inventé la mise en garde que j’ai faite durant l’intervention : si je dis que c’est idiot de déployer CSP sur un site en production sans tester, c’est que j’ai été le premier à faire cette connerie !

Bref, rétro-pédalage complet, j’enlève l’en-tête HTTP CSP sur ce site. Le moins qu’on puisse dire, c’est que le premier contact avec CSP fut rude.

L’envie d’y arriver quand même

La plus grande vérité du code étant la suivante :

If all else don’t work
 {
  Read the manual
 }

Et m’étant cassé les dents, j’ai donc lu la doc. Je me suis dit qu’il faudrait que je teste cela sur un site relativement simple et que je maîtrise totalement, en l’occurrence ce sera sur Röcssti. Je mets en place de bon matin un CSP en mode report only avec un bête envoi de mail. Le soir, au calme, j’ai reçu quelques notifications. Rien de bien méchant :

• un attribut onerror pour le fallback PNG du logo en SVG. Déporté sur une fonction externe.
• Les event trackers de Google Analytics étaient sur des onclick, idem, déportés sur une fonction externe.
• Le code inline de Google Analytics fut aussi envoyé dans mon fichier JS qui contient tout.
• Etc.

Bref, en une petite heure à peine, les soucis étaient réglés, et en prime, j’ai pu industrialiser certains comportements et j’ai enfin trouvé un compagnon pour vérifier certaines bonnes pratiques d’orthogonalité. Finalement, je suis gagnant sur plusieurs tableaux.

Le second contact est bien plus agréable !

Un long travail de fond

Plutôt content, je me dis que je vais essayer de le mettre en place sur certains sites en cours de développement au travail. J’ai fait des essais en douce sur une petite dizaine de sites. Et petit à petit, je corrigeais les petits défauts. Bien entendu, les derniers sites bénéficieraient de ce travail de fond.

Mes plugins accessibles auront aussi droit à leurs directives CSP bien strictes, afin de me servir de garde-fou au cas où j’aurais un instant de faiblesse.

Même si ces essais ne passent pas toujours en production, les améliorations vont bon train. Je me dis que CSP gagnerait à être plus connu. À peu près toutes les personnes à qui j’en parle me regardent avec des billes à la place des yeux, et j’entends toujours la même remarque : inconnu au bataillon.

Le sujet va plus loin

J’ai pu déployer CSP très tôt durant une refonte de site, et durant l’inventaire des contenus (repris d’une ancienne version), CSP va révéler un potentiel auquel je n’avais pas pensé. Ayant interdit les styles en ligne et plusieurs personnes s’occupant de faire l’inventaire des contenus, ils vont sans le savoir me faire remonter les adresses des pages où un nettoyage des anciens contenus s’impose. Bénéfice supplémentaire : ces vieux styles en ligne ne seront pas chargés, ne détruisant pas les efforts de mise en page sur la nouvelle version. Non seulement, les infos remontent toutes seules, mais en plus les vieux cancrelats ne viennent pas salir la nouvelle version. C’est-y-pas beau ?

Entre temps, j’ai commencé à avoir quelques notifications bizarres, voir incompréhensibles. Il m’a fallu un certain temps pour comprendre que les premiers messages étaient des erreurs d’extensions sous Chrome, n’utilisant que très peu ce navigateur. Ayant du mal à reproduire ces erreurs, je me suis mis en tête un soir de faire un proof of concept, une bête page avec CSP activé qui serait identifiée de manière unique, dont les notifications seraient envoyées dans une base, et qui ferait un bête appel AJAX pour ressortir les notifications CSP qu’elle aurait déclenchées (et aussi pour soulager ma messagerie de ces notifications).

Je crée le système à l’arrache la plus complète mais le tout marche. J’essaie de tester, curieusement, je n’arrive pas à reproduire le bug sous Chrome… là je me dis, super j’ai fait tout cela durant une soirée pour rien.

Mais j’en trouve un sous Firefox le lendemain ! Assez pénible ce bug d’ailleurs, je reçois des tonnes de notifications CSP dès que j’utilise l’inspecteur de code sur un site où CSP interdit strictement les styles en ligne.

Des bugs sous les navigateurs

J’en fais part à Julien Wajsberg – qui travaille chez Mozilla – histoire d’avoir son avis. Le bug est reproductible, je le reporte : Bug 1195302 sur CSP.

L’expérience qui suit me fut plutôt agréable : rapidement, des gens de chez Mozilla font le lien avec d’autres bugs, les discussions vont bon train, et un patch est proposé sur des nightly. À la fin, on m’annonce que le bug sera fixé sur Firefox 43. Mais une personne indique mon bug et demande s’il ne serait pas possible d’accélérer la manœuvre (uplift), car « un développeur est impacté par ce bug ». Autant le dire de suite : ce genre d’attention est très agréable et très apprécié.

Finalement, le patch sera appliqué sur Firefox 42, qui ne devrait pas tarder à sortir au moment où j’écris ce billet.

Entre temps, j’arrive de nouveau à reproduire des bugs sur Chrome et Safari, à force de collecter des données. Même démarche, sur Blink/Chrome, le problème sera pris en charge. Entre temps, des devs de chez Chrome m’inviteront à poster aussi chez Safari.

J’avais reporté un autre soupçon de bug chez Firefox sur un autre sujet (flexbox), mais il s’avérera que c’est bien Firefox qui suit la spec. Du coup, les mozilliens ouvriront un bug sur Chrome.

Bref, si vous croyiez que les développeurs de navigateurs ne travaillent pas de concert, ce n’est pas du tout l’expérience que j’en ai eue. Le légendaire supposé manque d’amabilité des développeurs en a pris aussi un coup.

Proposer un sujet sur CSP ?

Finalement, arrive le moment où je me dis que cela pourrait faire l’objet d’une conférence. Cela tombe au moment de l’appel aux sujets pour la Kiwiparty. Je le propose… et c’est un refus.

Entre temps, je décide de proposer des articles sur le sujet, qui eux par contre sont acceptés. Malheureusement, j’ai pris beaucoup de retard, mais croyez-moi sur parole, ces articles sortiront ! :)

Puis arrive l’appel à orateurs de Paris Web 2015. Je propose un sujet sur CSP sans trop y croire et un sur les plugins accessibles que je développe depuis un certain temps. Le sujet sur CSP sera retenu, pour ma plus grande joie. Le seul souci : comment faire rentrer dans un sujet de 15 minutes tout ce que j’ai en tête et tout ce qu’il y a à dire sur le sujet ?

Cela me paraît impossible.

Proposer « une expérience multi-canaux »

Comme je vais au travail en voiture, j’ai du temps inutile à rentabiliser. Du coup, j’improvise et je répète mes conférences durant les trajets. Certes j’ai l’air d’être un peu dingue à parler tout seul, mais du coup, les trajets passent bien plus vite et sont beaucoup plus utiles !

Les premiers essais que je fais atteignent les 30 minutes. Bref, c’est la catastrophe sur le timing, même si cela m’aide beaucoup à sortir un plan et voir l’essentiel.

D’un autre côté, j’ai aussi un autre souci : de quel niveau sera le public ? Souvent à Paris Web, le niveau du public est assez élevé… et plein de gens me disent qu’ils n’ont jamais entendu parler de CSP. Diantre, que choisir ?

J’ai bien pensé à faire un sondage, mais je suis plutôt réfractaire à cette approche. Bref, je me creuse la tête, et finalement, je vais appliquer mes propres propos : je suis le premier à dire qu’il ne faut pas larguer les débutants, et vu que bon nombre de gens semblent ne pas connaître, je m’en tiendrai à la base, et à quelque chose d’utilisable dans le monde réel. Exit CSP Level 2 qui n’est pas encore implémenté partout, exit les trucs trop compliqués.

Comme je trouve aussi dommage que les idées n’aillent pas plus loin que des conférences (sujets refusés ou acceptés d’ailleurs), je me dis qu’il y a peut-être la solution à mon problème : proposer « une expérience multi-canaux ».

La conférence sera destinée à expliquer les grands principes (merci Élie Sloim de m’avoir non sans peine appris à me centrer sur le principal), les avantages et montrer un exemple. Les prochains articles approfondiront, et mon dépôt Github sur CSP aura des exemples pratiques, des astuces, des ressources, etc.

La conférence proprement dite

Bref, après avoir énormément élagué mon plan, et hormis le fait que je fus stressé, la conférence ne se passa pas trop mal, j’ai juste débordé d’une grosse minute sur le timing, et bêtement oublié de mentionner que CSP sera probablement dans Opquast v3 (ayant fait des pieds et des mains pour que ce soit le cas).

Pour l’occasion, et afin de montrer le premier côté un peu aride de CSP, j’avais fait un t-shirt pour l’occasion, juste pour le plaisir de détourner le « Keep calm and… ».

Les retours furent plutôt bons, apparemment le message est bien passé : c’est une techno interessante, les bugs sont surtout de l’ordre du confort et il n’appartient qu’à nous de les faire remonter pour que cela devienne top à utiliser. De nombreuses personnes m’ont posé des questions, et mes slides sur CSP ont été beaucoup consultées et partagées sur Twitter. J’ai même eu droit à des compliments de personnes plutôt calées en sécurité. :)

Certes, j’aurais apprécié d’avoir plus de temps pour montrer toutes les possibilités de CSP (notamment la vérification d’intégrité des scripts, c’est énormissime), mais ce format court m’a forcé à être un peu « créatif » pour faire rentrer un an et demi d’essais en 15 minutes.

Aller encore plus loin ?

Gag : en discutant avec quelqu’un sur place à propos des bugs sur tous les navigateurs, il me dit : « t’en aurais pas trouvé un sur Edge des fois ? ». J’utilise ma petite page qui a servi à trouver les autres bugs… et elle me sort un bug bien énorme sur Edge. Du coup, ce fut remonté chez David Rousset, un gars super bien de chez Microsoft.

J’aimerais pousser le dépôt Github plus loin en mettant des exemples de code ainsi que d’autres ressources.

En testant d’autres choses et en discutant, je me suis aperçu que certains bookmarklets sont aussi affectés par les directives CSP d’un site. Bug reporté, je fais encore des essais pour les autres navigateurs. La réponse est éloquente :

Recently we got more complaints, which means that more pages are adopting CSP apparently:
…
Anyway, when we do our next triage I will make sure that we re-prioritize that issue and put some more resources on fixing it. Thanks for filing the bug.

En clair : beaucoup d’infos remontées, la priorité du bug va être augmentée. Si vous hésitez à remonter des bugs en vous disant que cela a déjà été fait, n’hésitez plus, faites-le. En plus, je trouve que cela crée un lien avec les navigateurs, même si c’est très modeste, j’ai l’impression d’avoir contribué à ces derniers.

En conclusion

Je crois beaucoup en CSP, comme je ne cesse de le répéter, cela gagne à être connu. D’autres conférences ont refusé le sujet, mais qu’à cela ne tienne, j’aimerais continuer à démocratiser les possibilités de cette techno. Plus elle sera utilisée, mieux elle sera implémentée.

Ne vous arrêtez pas à un premier contact qui peut être rude, cela vaut vraiment le coup. J’ai pu faire énormément de progrès grâce à cette techno. Je trouve que c’est en quelque sorte l’hygiène du front-end. Utiliser CSP force à savoir exactement ce qu’il se passe sur le front-end, et invite à diminuer l’empreinte de nos sites.

Et accessoirement, un peu de sécurité ne fait pas de mal.

Voici donc la petite histoire, ou « Comment faire rentrer un an et demi en 15 minutes ».