dimanche, 18 septembre 2016

Les onglets contextuels dans Firefox Nightly

Attention : cette fonctionnalité est encore expérimentale et peut être amenée à évoluer :)

Pourquoi faire ?

« Mais dis-moi plutôt qui tu es ? », Rafiki, Le Roi Lion

Lorsque nous naviguons sur le Web, nous utilisons différents sites pour différents besoins. Notre identité numérique se compose parfois de différentes identités selon le contexte : personnel, professionnel, consommation, etc. En revanche, il était jusqu’à présent difficile d’organiser cette compartimentation via le navigateur web (utiliser différents navigateurs, la navigation privée, différents profils, etc.).

La fonctionnalité d’« onglet contextuel », implémentée dans Firefox Nightly, a été conçue pour répondre à ce besoin de séparation. Ainsi, au sein d’une même session et d’un même profil, on pourra se connecter, simultanément, sur un compte personnel et, par exemple, sur un compte professionnel (ou autre) d’un site donné (Twitter, Google, Facebook, Trello…).

Cette séparation permet également de limiter le pistage des différents sites en isolant les données créées par chacun. Nul besoin que les publicités (disons Facebook) laissent des traces à destination des autres sites (disons Amazon). En utilisant ces sites dans des contextes séparés, les cookies, entre autres, seront compartimentés. En plus de ces aspects relatifs à la vie privée, cela permet d’obtenir une meilleure sécurité : cela améliore la protection contre le vol de cookies de session d’un site bancaire par exemple.

Note : les onglets contextuels ne sont pas la réponse à toutes les questions, les profils ou Tor Browser ont toujours leurs raisons d’être.

Les différents contextes

La compartimentation ne se limite pas nécessairement au caractère personnel/professionnel. Pour cette fonctionnalité, Mozilla a prévu un premier ensemble de contextes :

  • Personnel
    • exemple d’utilisation : le compte Twitter personnel, la page Gmail sur une adresse électronique privée,
  • Professionnel
    • exemple d’utilisation : les documents Google des clients de l’entreprise (:]]), la page Facebook de la société maintenue à jour,
  • Bancaire
    • exemple d’utilisation : suivre mon compte bancaire, accéder à des documents privés sur le portail de mon assurance,
  • Achats en ligne
    • exemple d’utilisation : RedBubble, Amazon…

Par la suite, en plus de ces catégories prédéfinies, il est prévu de pouvoir ajouter des contextes personnalisés. Enfin, il y a un contexte par défaut, le contexte « normal » (ce qui vous permet d’utiliser Firefox sans nécessairement avoir recours aux contextes).

Lorsque vous cliquez sur un lien depuis un contexte « Personnel », le nouvel onglet sera automatiquement rattaché au contexte « Personnel » (idem pour les autres).

Comment les utiliser ?

Tout est expliqué dans cette vidéo :

Et si vous préférez lire, voici la suite :

Prérequis : À l’heure actuelle, cette fonctionnalité est uniquement disponible sur le canal Nightly de Firefox. Pour l’utiliser, vous pouvez télécharger cette version sur ce site de la communauté francophone ou encore sur ce nouveau site mozilla (NB : vous pouvez tout à fait utiliser une version « classique » de Firefox en parallèle d’une « Nightly » afin de tester :) ). Si vous souhaitez désactiver cette fonctionnalité, vous pouvez utiliser la préférence privacy.userContext.enabled avec la valeur false via sur la page about:config.

Pour ouvrir un nouvel onglet contextuel, vous disposez de différentes options.

1. Avec le menu hamburger

  1. Cliquer sur l’icône en haut à droite icône menu hamburger
  2. Cliquer sur « (+) Personnaliser » en bas
  3. Ensuite, vous pouvez glisser le bouton « Onglet contextuel » dans le menu (à droite) ou dans votre barre d’outils

Aperçu du bouton dans l'écran de personnalisation

L’écran de personnalisation

Aperçu du bouton d'onglet contextuel dans le menu

Accéder au bouton lorsqu’il est dans le menu

Aperçu du bouton dans la barre principale

Accéder au bouton lorsqu’il est dans la barre d’outils

2. Avec le menu « Fichier » de la barre de menus

Si vous utilisez la barre de menu, cette option est disponible dans le menu « Fichier » : Aperçu du menu via la barre de menus

2. Grâce à la liste d’onglets

Si vous naviguez avec de nombreux onglets, vous pourrez utiliser la liste d’onglets pour ajouter un nouvel onglet contextuel : Aperçu du menu via la liste d'onglets

Note : Cette option apparaît uniquement lorsque le navigateur n’a plus suffisamment d’espace pour afficher chacun des onglets.

3. Via les hyperliens

Une fois que vous avez ouvert un nouvel onglet contextuel, tout lien sur lequel vous cliquerez ouvrira un onglet rattaché (ex. je suis sur mon Twitter avec le contexte « Personnel », si je clique sur un lien vers lesjours.fr, celui-ci sera ouvert dans le contexte « Personnel »). Mais que se passe-t-il si je suis sur Twitter (perso) et que je vois un lien vers Amazon (achats) ? Lorsqu’on clique droit sur un lien, on dispose d’une nouvelle option permettant de choisir le contexte dans lequel on veut ouvrir le nouvel onglet :

Nouvelle option du menu contextuel via les liens

Quelques illustrations

Pour s’y retrouver, on dispose de deux indicateurs :

  • Une ligne colorée au-dessus de l’onglet
    • Bleue : contexte personnel
    • Orange : contexte professionnel
    • Verte : contexte bancaire
    • Rose : contexte pour les achats en ligne
    • Rien : le contexte par défaut Aperçu des indicateurs visuels
  • Pour l’onglet actif, un symbole à la fin de la barre d’adresse

Sous le capot

La technique

Les onglets contextuels ne sont pas des profils séparés. D’ailleurs, ils fonctionnent au sein d’un même profil (autrement dit, chaque profil embarque son propre ensemble de contextes).

Note : Pour en savoir plus, comme pour chaque fonctionnalité de Firefox, vous pouvez consulter Bugzilla. Les onglets contextuels sont poétiquement décrits dans le bug 1191418.

À l’origine

En fait, les contextes reposent principalement sur la notion d’origine. Une origine se définit par un schéma (ex. http/https), un hôte (le domaine) et le port. Cette origine est déjà employée par le navigateur pour décider si telle ressource provenant de telle origine est sécurisée et peut être chargée (cf. MDN). En ajoutant des informations à l’origine d’une page, on peut enrichir cette fonctionnalité (c’est ce que font déjà la navigation privée, le Tor Browser, etc.). Gecko utilise donc des informations complémentaires, appelées OriginAttributes pour déterminer si deux origines sont équivalentes.

Pour les onglets contextuels, un nouvel attribut : userContextId a été ajouté à ces informations. Chaque contexte aura son propre userContextId et les informations stockées par les sites seront compartimentées en tenant compte de cette information.

Les onglets contextuels ajoutent ainsi un nouvel élément de sécurité contre les attaques de type XSS et CSRF.

Pas touche à mes cookies

On vient de le voir, lorsque je navigue sur Twitter via un onglet contextuel « personnel », Firefox utilise l’origine combinée avec l’attribut userContextId afin de déterminer les informations auxquelles cet onglet Twitter aura accès. Il ne pourra pas, par exemple, accéder aux informations d’un autre onglet supersecurebanking.net, qui, elles, sont stockées avec un autre attribut userContextId. Ouf.

Mais qu’entend-on par donnée personnelle ? Qu’est-ce qui est compartimenté ? Qu’est-ce qui ne l’est pas ?

Ce qui est isolé :

Ce qui n’est pas isolé :

  • L’historique
  • Les marque-pages
  • Les mots de passe enregistrés
  • L’historique des recherches et des formulaires
  • Les permissions accordées aux sites web
  • Les exceptions de certificats de sécurité
  • Des trucs ésotériques comme les marqueurs HSTS et les réponses OCSP

Les limites

Les onglets contextuels augmentent la sécurité des données via cette compartimentation. Mais celle-ci n’est pas absolue, votre ordinateur aura toujours la même IP, le même agent utilisateur, le même système d’exploitation, etc. Si la séparation des cookies protège contre un pistage basique, il faut être conscient que le fingerprinting avancé est toujours possible, même avec les onglets contextuels. Selon les cas d’usage, le navigateur [Tor Browser] peut être une alternative pertinente. Ce dernier maximise l’anonymat en ligne quitte à casser certaines fonctionnalités des sites visités, les onglets contextuels visent à améliorer la vie privée tout en conservant les fonctionnalités des différents sites.

La suite

Voici quelques pistes pour l’avenir de cette fonctionnalité :

  • L’amélioration de l’ergonomie et de l’interface utilisateur : ce n’est pas parce que cette fonctionnalité concerne la sécurité et la vie privée, qu’elle ne doit pas être claire, accessible et attirante. Elle doit pouvoir bénéficier aux personnes qui ne maîtrisent pas ces enjeux.
  • Le nettoyage des données relatives à chaque contexte (qui a dit qu’il fallait passer en navigation privée pour acheter un cadeau ?)
  • Ouvrir un onglet contextuel en appuyant longtemps sur (+) lorsqu’on veut ouvrir un nouvel onglet
  • Les contextes personnalisés ou limités à un site
  • Régler quelques bugs relatifs
  • Recevoir votre avis grâce à ce sondage ou via containers@mozilla.com

Liens & sources

mercredi, 8 juin 2016

Aider les développeurs web à propos des erreurs JavaScript

Ce billet est une traduction de Helping web developers with JavaScript errors, écrit par Florian Scholz et Morgan Phillips.

Lire la suite

vendredi, 20 mai 2016

Techniques de développement CSS

La cascade CSS via l'inspecteur

Cet article est une traduction de CSS coding techniques écrit par Belén Albeza. Belén travaille au sein de l’équipe DevRel de Mozilla et explique ici sa méthode de travail pour le code CSS afin d’obtenir des feuilles de style claires et qui puissent être maintenues facilement. Comme les autres articles de ce blog, celui-ci est placé en licence CC-BY-SA.

Merci beaucoup à Marine, Ilphrin, Banban, Sandlayth, au traducteur anonyme ainsi qu’à goofy pour sa relecture utile :)


Lire la suite

dimanche, 17 avril 2016

Ma méthode de travail avec Git et GitHub

Schéma du workflow

Cet article est une traduction de Documenting my git/GitHub worklow écrit par Karl Dubost. Karl participe au projet WebCompat pour veiller à ce que les sites web fonctionnent de façon égale sur les différents navigateurs et ce billet est l’occasion de présenter la méthode de travail qu’il utilise avec Git et GitHub. Les méthodes vues ici pourront être utile pour contribuer à d’autres projets, n’hésitez pas à guetter les fichiers CONTRIBUTING.md des différents dépôts. ;)


Lire la suite

mardi, 29 mars 2016

Aide aux développeurs pour les changements à venir dans le développement de modules

Cet article est une traduction de la communauté Mozfr de Developer support for changes in add-on development. Comme vous en avez peut-être entendu parler, de nombreux changements surviennent dans le développement des modules complémentaires. Fin 2017, les WebExtensions seront utilisées par Firefox  […]

Lire la suite

samedi, 5 mars 2016

Proposition de spécification pour l'API WebVR 1.0

WebVR Showcase

Cet article est une traduction de Introducing the WebVR 1.0 API Proposal écrit par Casey Yee et publié sur Hacks.

Merci beaucoup à Ilphrin et Thegennok pour la traduction ! Merci goofy pour la relecture :)


Lire la suite

samedi, 27 février 2016

La propriété background-clip et ses cas d'utilisation

Le modèle de boites

Cet article est une traduction de The background-clip Property and its Use Cases, écrit par Ana Tudor et publié sur CSS Tricks. Ana Tudor réalise de nombreuses démos sur CSS sur CodePen et via Twitter et cet article est l’occasion d’en dire un peu plus sur la propriété background-clip. Merci beaucoup à marine, Banban, Thegennok et Ilphrin pour la traduction et à Théo et goofy pour la relecture.

Lire la suite

samedi, 23 janvier 2016

Firefox et l'API Web Speech

Page about:Webspeech dans la vie conjugale

Ce billet est une traduction de l’article de Chris David Mills : Firefox and the WebSpeech API. Bien que la reconnaissance vocale ne soit pas encore tout à fait opérationnelle dans Firefox, n’hésitez pas à décortiquer les démos ! Merci à goofy pour la relecture :)

Lire la suite

samedi, 16 janvier 2016

Du nouveau pour les outils de développement dans Firefox

venkman-opt.png

Ce billet est une traduction du billet de Patrick Brosset : Revisiting Firefox’s DevTools. Merci à marine et Banban pour la traduction et à Maxime pour celle des articles MDN sur les outils de développement !

Lire la suite

samedi, 26 décembre 2015

Hors ligne et plus encore

Ce billet est une traduction du billet de Salva, Beyond Offline. Cet article est la suite du billet précédent sur les service workers. Merci à marine et Thegennok pour la traduction et à goofy pour la relecture !

Lire la suite

Recettes hors connexion pour les service workers

Page about:serviceworkers dans Firefox Developer Edition

Ce billet est une traduction du billet de David Walsh, Offline Recipes for Service Workers. Un grand merci à marine, Banban, Thegennok, LaPalice pour la traduction et à goofy pour la relecture. Bonne lecture et bonnes fêtes !

Lire la suite

jeudi, 17 décembre 2015

Enfin, on peut compiler en WebAssembly !

mamie fait du webAssembly

Ce billet est une traduction du billet publié par Alon Zakai sur hacks.mozilla.org.

Lire la suite

Les utilisateurs de Firefox sur Windows peuvent désormais regarder Netflix en HTML5

Ce billet est une traduction du billet en anglais paru sur le blog de Mozilla.

Lire la suite

lundi, 24 août 2015

ES6 en détails : l'avenir

typedarrays.png

Suite et fin de la la traduction, qui clôture la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à goofy pour la relecture :) !


Lire la suite

samedi, 22 août 2015

ES6 en détails : les modules

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Banban et Ilphrin pour la traduction et merci à goofy pour la relecture :) !


Lire la suite

jeudi, 13 août 2015

ES6 en détails : les sous-classes et l'héritage

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Banban et Marine pour la traduction et merci à goofy pour la relecture :) !


Lire la suite

vendredi, 7 août 2015

ES6 en détails : let et const

bogue.jpg

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Banban et goofy pour la traduction et la relecture :) !


Lire la suite

vendredi, 31 juillet 2015

ES6 en détails : les classes

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Jérémie et Banban pour la traduction et à goofy pour la relecture :) !


Lire la suite

dimanche, 26 juillet 2015

MDN : dix ans d'évolution

MDN-10years_twitter-avatar_400x400px.png

MDN fête ses 10 ans cette semaine. Ce billet, traduction du billet de Janet Swisher, est l’occasion de retracer l’historique de MDN et d’expliquer l’orientation du projet aujourd’hui.


Lire la suite

vendredi, 24 juillet 2015

ES6 en détails : les proxies

power-plant.jpg

Suite de la traduction, qui continue la série d’articles de Jason Orendorff. L’article original se trouve ici. Vous pouvez retrouver les différents articles de la série grâce aux mots-clefs.

Merci à Ilphrin et Banban pour la traduction et la relecture !


Lire la suite

- page 1 de 3