Skip to content

Veuillez Activer Javascript.Veuillez Ressayer

Le Navigateur Tor est un navigateur web basé sur Mozilla Firefox, configuré pour protéger votre anonymat. Étant donné la popularité de Firefox, vous l'avez sans doute déjà utilisé, son interface est similaire à celle de n'importe quel autre navigateur web moderne.

Quelques questions fréquemment posées à propos du navigateur se trouvent dans la FAQ.

Voici certains détails qui doivent être mentionnés lorsqu'on utilise le Navigateur Tor avec Tails.

Confinement par AppArmor

Le Navigateur Tor dans Tails est confiné par AppArmor pour protéger le système et vos données de certains types d'attaques contre le Navigateur Tor. En conséquence, il peut seulement lire et écrire dans un nombre limité de dossiers.

C'est pour ça que vous pourrez rencontrer une erreur de accès refusé, par exemple si vous essayez de télécharger des fichiers dans le dossier Dossier personnel.

  • Vous pouvez sauvegarder les fichiers depuis le Navigateur Tor dans le dossier Tor Browser qui se situe dans le dossier Dossier personnel. Le contenu de ce dossier disparaîtra lors de l'extinction de Tails.

  • Si vous voulez uploader des fichiers avec le Navigateur Tor, copiez-les d'abord dans ce dossier.

  • Si vous avez activé la fonctionnalité Données personnelles de la persistance, alors vous pouvez également utiliser le dossier Tor Browser qui se situe dans le dossier Persistent. Dans ce cas, le contenu de ce dossier est conservé et reste disponible à travers plusieurs sessions.

Pour pouvoir télécharger des fichiers plus volumineux que la RAM disponible, vous devez activer la fonctionnalité Données personnelles de la persistance.

Chiffrement HTTPS

Utiliser le HTTPS au lieu du HTTP chiffre vos communications quand vous naviguez sur le web.

Toutes les données échangées entre votre navigateur et le serveur que vous joignez sont chiffrées. Ce qui empêche les nœuds de sortie Tor de jeter un œil à vos communications.

HTTPS contient également des méthodes d'authentification des serveurs auxquels vous communiquez. Cependant ces méthodes peuvent être compromises, comme expliqué dans les avertissements.

Par exemple, voici ce à quoi ressemble le navigateur lorsqu'on essaie de se connecter à un compte de courrier électronique chez riseup.net en utilisant leur webmail :

Remarquez l’icône de cadenas à gauche de la barre d'adresse indiquant "mail.riseup.net" et l'adresse commençant par "https://" (au lieu de "http://"). Cela indique que la connexion est chiffrée grâce au HTTPS.

Vous devriez essayer d'utiliser uniquement des services proposant HTTPS lorsque vous envoyez ou recevez des informations sensibles (comme des mots de passe), car si ce n'est pas le cas, il est très facile pour une oreille indiscrète de récupérer l'information que vous envoyez, quelle qu'elle soit, ou de modifier le contenu de la page telle qu'elle apparaît dans votre navigateur.

HTTPS Everywhere

HTTPS Everywhere est une extension Firefox livrée dans le Navigateur Tor et produite par la collaboration entre le Projet Tor et la Electronic Frontier Foundation. Elle chiffre vos communications pour un grand nombre de sites Internet majeurs. De nombreux sites offrent un certain support du chiffrement via HTTPS, mais le rendent compliqué à l'utilisation. Par exemple, ils sont par défaut en HTTP ou truffent leurs pages chiffrées de liens vers des versions HTTP du site. L'extension HTTPS Everywhere règle ces problèmes en réécrivant toutes les requêtes vers ces sites en HTTPS.

Pour en savoir plus sur HTTPS Everywhere vous pouvez consulter :

Torbutton

Tor seul n'est pas suffisant pour protéger votre anonymat et votre vie privée lorsque vous surfez sur le web. Tous les navigateurs modernes, tels que Firefox proposent JavaScript, Adobe Flash, ou des cookies qui ont montré qu'ils pouvaient briser l'anonymat assuré par le réseau Tor.

Dans le Navigateur Tor, toutes ces fonctions sont gérées au sein même du navigateur par une extension nommée Torbutton qui met en place de multiples processus afin d'empêcher le type d'attaques évoquées précédemment. Mais cela a un prix : dès lors que l'on désactive certaines fonctionnalités, certains sites peuvent ne pas fonctionner comme d'habitude.

Se protéger contre les codes JavaScript dangereux

La désactivation totale de JavaScript par défaut désactiverait beaucoup de codes JavaScript inoffensifs et potentiellement utiles et rendrait inutilisables de nombreux sites.

C'est pourquoi JavaScript est activé par défaut dans le Navigateur Tor.

Cependant Torbutton s'occupe de désactiver tous les codes JavaScript potentiellement dangereux.

Nous considérons qu'il s'agit là d'un compromis nécessaire entre sécurité et facilité d'usage. D'autant plus que nous ne connaissons aucun code JavaScript qui pourrait compromettre l'anonymat offert par Tails.

Curseur de sécurité

Vous pouvez utiliser le curseur de sécurité du Torbutton pour désactiver des fonctionnalités du navigateur en faisant un compromis entre la sécurité et l'utilisabilité. Par exemple, vous pouvez utiliser le curseur de sécurité pour désactiver complètement JavaScript.

Le curseur de sécurité est réglé à bas par défaut. Ce réglage fournit le niveau de protection par défaut du Torbutton et l'expérience la plus accessible.

Pour changer la valeur du curseur de sécurité, cliquez sur le bouton et choisissez Paramètres de sécurité….

Fonctionnalité Vue du circuit

La fonctionnalité Vue du circuit du Torbutton vous montre les trois relais Tor utilisés pour le site web dans l'onglet courant, incluant les adresses IP correspondantes et les pays où ils sont situés. Le nœud immédiatement avant le nœud Internet est le relai de sortie ; le pays où il est situé pourrait déterminer comment le site web s'affiche pour vous. Vous pouvez utiliser Nouveau circuit Tor pour ce site pour changer de pays.

Vous pouvez utiliser Onion Circuits pour obtenir des informations plus détaillées sur les circuits que vous êtes en train d'utiliser.

Fonctionnalité Nouveau circuit Tor pour ce site

La fonctionnalité Nouveau circuit Tor pour ce site du Torbutton construit un nouveau circuit Tor pour le site web dans l'onglet courant et le recharge. C'est particulièrement utile si le relai de sortie est situé dans un pays qui a des effets négatifs sur la présentation du site web que vous êtes en train de visiter, par exemple à cause d'une censure, d'une traduction dans une langue que vous ne connaissez pas et d'autres problèmes similaires.

Pour l'utiliser, cliquez sur le bouton et sélectionnez Nouveau circuit Tor pour ce site.

Fonctionnalité Nouvelle identité

La fonctionnalité Nouvelle identité du Torbutton:

  • Ferme tous les onglets ouverts.
  • Remet à zéro le statut de la session incluant le cache, l'historique, et les cookies (sauf les cookies protégés par la fonctionnalité de Protection de Cookies).
  • Ferme toutes les connexions web en cours et créée de nouveaux circuits Tor.
  • Efface le contenu du presse-papier.

Pour utiliser cette fonctionnalité, cliquer sur le bouton et choisir Nouvelle identité.

Cette fonctionnalité ne suffit pas à correctement séparer des identités contextuelles dans le contexte de Tails du fait que les connexions en-dehors du Navigateur Tor ne sont pas redémarrées.

Redémarrer Tails à la place.

Pour plus de détails, consulter la conception et l’implémentation du Navigateur Tor.

NoScript pour encore plus de contrôle sur JavaScript

Pour permettre plus de contrôle sur JavaScript, par exemple pour désactiver JavaScript complètement sur certains sites web, le Navigateur Tor inclut l'extension NoScript.

Par défaut, NoScript est désactivé et quelques JavaScript sont autorisés par l'extension Torbutton comme expliqué précédemment.

Pour plus d'informations vous pouvez consulter le site de NoScript et plus particulièrement la page des fonctionnalités (en anglais).

Une bonne nouvelle au programme : on va vraiment commencer à coder en JS !

Vous allez créer votre premier script : à la fin de ce chapitre, vous serez capable d'afficher des boîtes de dialogue (contenant un message).
Rien d'impressionnant, certes, mais ces boîtes de dialogue vous seront fort utiles pour la suite...

Logiciels nécessaires

Comme j'ai pu vous le dire dans le premier chapitre, le JavaScript est un langage facile à mettre en oeuvre.
De même que pour créer une page (x)HTML, il vous suffit :

  • d'un éditeur de texte : Bloc-notes est suffisant, mais d'autres logiciels offrent plus d'options, comme la coloration syntaxique, qui est très appréciable.
    Notepad++ (que vous possédez peut-être déjà... ) en est un bon exemple.

  • d'un navigateur : FireFox, avec le plugin Web Developer, est parfaitement approprié pour cela.
    Cependant, pour vérifier la compatibilité de vos scripts, il peut être utile de les tester sur plusieurs des navigateurs les plus courants (Internet Explorer 6, Opera et Firefox étant les références pour les PC).

Liens vers les sites de Notepad++, FireFox et Web Developer.

Vos débuts en JavaScript

Les commentaires

Si vous êtes un bon utilisateur du (x)HTML et du CSS (et je suis sûr que c'est le cas ^^ ), vous devriez savoir vous servir des commentaires.

Je vous rappelle que les commentaires sont des phrases qu'on utilise justement... pour commenter le code ! Elles n'ont aucune conséquence sur celui-ci.
Cela permet d'avoir un code clair et compréhensible par toute personne qui le lirait :) .
Ils seront très utilisés dans la suite de ce cours.

Les commentaires, c'est comme tout, il ne faut pas en abuser : il n'est pas nécessaire de commenter chaque ligne, ça rendrait votre code lourd.
Mieux faut commenter le code par portion, en ne mettant des commentaires que lorsque vous les jugez utiles.

En (x)HTML

Les commentaires, en (x)HTML, s'écrivent de cette manière :

Vous pouvez donc y écrire plus ou moins ce que vous voulez, évitez cependant les caractères spéciaux (particulièrement les crochets < et >, le dernier pouvant être interprété par le navigateur comme la fin du commentaire).

Voici un exemple d'utilisation d'un commentaire (au milieu d'une page (x)HTML) :

En JavaScript

En JS, c'est tout à fait différent.
Il y a deux manières d'écrire un commentaire.

  • Les commentaires sur une seule ligne : ils se placent sur la fin de la ligne, après // (deux slashs).
    Évitez cependant d'écrire trop de choses de cette manière. Fixez-vous une limite (généralement, on prend 80 caractères maximum par ligne, code compris, mais il n'y a aucune obligation).

  • Les commentaires sur plusieurs lignes : exactement comme en CSS :) ,
    ils se placent entre /* et */ : il n'y a ici aucune limitation sur la longueur du commentaire. Vous pouvez donc en écrire autant que vous voulez.
    Notez que vous pouvez parfaitement utiliser cette notation pour les commentaires courts (certaines personnes n'utilisent que celle-ci).

Un petit exemple pour vous montrer :

Afficher une boîte de dialogue

C'est quoi, une boîte de dialogue ? o_O

C'est une petite fenêtre (une boîte) qui sert à communiquer (dialoguer) avec l'utilisateur (lui afficher ou lui demander quelque chose).
Celle que nous allons créer sert à afficher un message.

Notre boîte de dialogue

Voici le code qui permet de créer un tel message :

Ceci est du code JavaScript.
Si vous l'écrivez tel quel dans votre page HTML, il ne marchera pas.
Nous allons voir quelques lignes plus bas comment exécuter ce code ; lisez donc la suite avant de vous précipiter sur Notepad++ ;) .

Vous pouvez remplacer le classique "Hello world" par le texte de votre choix, en laissant les apostrophes de part et d'autre de votre message (qui doit lui-même ne pas contenir d'apostrophe).

Nous étudierons plus en détail ce code, une fois que vous saurez insérer du JS sur une page Web, autrement dit un peu plus bas sur cette page.

Où se place le code JavaScript ?

Insérer du JavaScript dans une page xHTML

On écrit le JS dans notre page HTML, et c'est le navigateur qui lit et exécute ce code.
Mais comment fait-il pour différencier les deux ?

Vous le savez sûrement déjà, un ordinateur, c'est bête : il faut lui dire tout ce qu'il doit faire.
Eh bien c'est ce que nous allons devoir faire : si on ne précise pas à notre navigateur que notre code est du JS, il ne le devinera pas tout seul.
Voyons donc comment le lui dire...

Avant de continuer, je vous rappelle juste quelques informations essentielles concernant le xHTML :

Structure de la page (code minimal) :

Formation des balises et vocabulaire :

Revenons à notre JavaScript :
Il y a deux méthodes différentes pour insérer du JavaScript dans une page Web.

Directement dans les balises

La première méthode consiste à écrire le code directement à l'intérieur de la balise qui va être concernée par le script.

Comment ça marche ?

Pour insérer le code dans une balise, une nouvelle propriété est nécessaire. Il s'agit du gestionnaire d'événements (en anglais : event handler).

  • Cette propriété est caractéristique du JS : elle suffit à dire au navigateur : "attention, ce qui suit est du JS".

  • Elle porte le nom de l'événement qui doit déclencher le script (c'est pour cela qu'on parle de "gestionnaire d'événements").

  • Elle contient comme valeur le script à exécuter lors de cet événement.

Pour résumer, la balise en question aura cette forme-là (ici il s'agit d'une balise seule, c'est le même principe pour les balises fonctionnant par paires) :

Examinons tout de suite un exemple.

  • Nous allons utiliser un lien.
    On ne veut pas qu'il nous envoie sur une autre page : c'est pourquoi nous utiliserons le symbole # en guise d'adresse.
    On part donc de ceci :

  • L'événement déclenchant le script sera un clic de souris sur ce lien.
    Le nom de cet événement est : onclick.

  • Le script à exécuter sera l'ouverture d'une boîte de dialogue. Le code sera donc :

Ça nous donne ceci :

Vous pouvez tester ce code (c'est même conseillé : réécrivez-le, vous le retiendrez beaucoup mieux qu'en faisant un copier-coller).

Résultat : notre boîte de dialogue devrait apparaître lorsque vous cliquez sur le lien :magicien: !

Après le on, le C de click doit être en minuscule ! Ceci est valable pour tous les gestionnaires d'événements.
S'ils sont écrits avec une majuscule, la page est invalide !

Si, même après le changement de la majuscule, rien ne se passe, votre navigateur a peut-être empêché le JS de s'exécuter.
Dans ce cas, référez-vous à l'aide de celui-ci.

Vous venez de créer votre premier script ! :soleil:

Maintenant, un petit exercice :
essayez de faire la même chose, mais avec une image, cette fois...

Solution :

Cas d'un lien :
Il est possible d'écrire du JavaScript directement à la place de l'adresse d'un lien, en le faisant précéder de javascript:, comme dans cet exemple :

Cette méthode a l'avantage de ne pas faire remonter le visiteur en haut de la page, comme l'aurait fait un lien portant le petit dièse (#) ; c'est ce que vous avez sûrement dû voir si vous avez testé le code.

Autres gestionnaires d'événements

Il existe d'autres événements que le clic de souris, rassurez-vous ^^ .
Leur syntaxe est la même : onevent, event étant le nom de l'événement (en minuscule dans le tuto, pour respecter la validité du SdZ).
Les événements s'appliquent à la plupart des balises (sauf événements particuliers, relatifs à des balises précises).

En voici quelques-uns :

  • onclick : au clic (gauche) de la souris

  • ondblclick : lors d'un double clic

  • onmouseover : au passage de la souris

  • onmouseout : lorsque la souris "sort" de cet élément (en quelque sorte, le contraire de onmouseover).

Gestionnaires d'événements de la balise <body> :

  • onload : au chargement de la page

  • onunload : lorsqu'on quitte la page (ou qu'on change de page).

Le mieux est de les essayer, vous verrez par vous-mêmes à quoi correspond chaque événement.
Voici une image contenant plusieurs gestionnaires d'événements :

Et voici la balise <body> pour créer une page disant "Bonjour" et "Au revoir" :

Ce dernier exemple est typique de ce qu'il ne faut pas faire !
Une page contenant trop de JavaScript devient vite énervante, surtout dans ce type d'utilisation.

Entre les balises <script> et </script>

Une nouvelle paire de balises

Et si notre script est très long, on ne va quand même pas tout mettre dans notre gestionnaire d'événements ? :waw:

Rassurez-vous, s'il existe plusieurs manières différentes d'insérer du JavaScript, ce n'est pas pour rien.
La seconde solution consiste à écrire le script entre deux balises spécifiques, <script> et </script>.

Il faut commencer par préciser au navigateur que notre script est... du JavaScript.
Pour cela, on rajoute la propriété type="text/javascript", ce qui nous donne ceci :

Mais il y a un problème !
Imaginez un vieux navigateur qui ne connaît pas le JS : s'il tombe sur cette balise, il va tout simplement l'ignorer, car elle lui sera inconnue. Mais tout le code qui suit sera considéré comme du texte, il va donc l'afficher sur votre page !
Pas très élégant :( .
Il existe heureusement une solution...

Pour faire ignorer ce texte à ce vieux navigateur, on lui fait tout simplement croire qu'il s'agit d'un commentaire en (x)HTML.

Pour un navigateur qui connaît le JavaScript, il saura qu'il n'a plus affaire à du (x)HTML, et passera donc la balise du commentaire (<!--) sans en tenir compte.
Mais pour éviter qu'il soit déboussolé en rencontrant la balise de fin de commentaire (-->), nous allons lui dire, en JS, qu'il s'agit d'un commentaire, grâce à //.

Pour résumer, voici comment placer du JS dans une page en utilisant la balise <script> :

Dans l'en-tête ou dans le corps de la page (x)HTML

Ces balises, elles sont à mettre dans l'en-tête, ou dans le corps de la page ?

On peut les placer soit dans l'en-tête (<head> ... </head>), soit dans le corps (<body> ... </body>) de la page (x)HTML :

  • dans le corps de la page, sont à placer les scripts à exécuter au chargement de cette dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).
    C'est ce que nous allons utiliser pour cet exemple, il suffit d'écrire le code à exécuter entre les balises ;

  • en revanche, sont à placer dans l'en-tête les éléments qui doivent être exécutés plus tard (lors d'un événement particulier, par exemple).
    Dans ce cas, le code n'est pas écrit "en vrac", nous apprendrons plus loin comment l'organiser.

Ce qui nous fait donc deux manières d'insérer le code grâce à ces balises.

Exemple d'application

Essayez de réaliser cet exemple : dans notre page web, on veut :

  • une boîte de dialogue indiquant le début du chargement de la page (donc, le code est à placer au début du corps de la page),

  • une autre indiquant la fin du chargement de celle-ci (donc, à la fin du corps).

Voici le code complet de la page :

Vous remarquez que tant que la première boîte de dialogue est ouverte, la page n'est pas chargée.
En effet, le navigateur exécute le JS au fur et à mesure du chargement de la page : il attend donc que le script soit terminé avant de charger la suite.

Placer le code dans un fichier séparé

Importer un fichier externe

Comme pour le CSS, on peut très bien placer notre code dans un fichier indépendant. On dit que le code est importé depuis un fichier externe. En CSS, l'extension de ce fichier (les deux à quatre lettres précédées d'un point à la fin d'un fichier) était .css.
Vous l'avez peut être deviné, l'extension du fichier externe contenant du code JavaScript est .js.

On va indiquer aux balises le nom et l'emplacement du fichier contenant notre (ou nos) script(s), grâce à la propriété src (comme pour les images).

Comme il n'y a plus de code entre les balises, la technique pour masquer le code aux anciens navigateurs n'a plus lieu d'être.

Et voici ce que cela nous donne :

Ce même fichier qui contiendra par exemple ceci :

Créer le fichier

Si vous ne savez pas créer un fichier ayant l'extension .js, voici comment faire.

Avec Notepad++

  • Créez un nouveau fichier avec le menu Fichier, puis Nouveau.

  • Dans le menu Langage, sélectionnez... Javascript ! ^^

  • Enregistrez votre fichier, en lui donnant le nom que vous voulez, suivi de .js.

  • Pour ouvrir à nouveau ce fichier, clic droit, puis Open in Notepad++.

Avec Bloc-notes

  • Ouvrez Bloc-notes.

  • Dans le menu Fichier, choisissez Enregistrer sous...

  • Dans le menu déroulant Type de la nouvelle fenêtre, choisissez Tous les fichiers (ou All types en anglais).

  • Entrez le nom que vous voulez, suivi de .js.

  • Pour rouvrir ce fichier, faites un clic droit dessus, Ouvrir avec... puis choisissez Bloc-notes.

Enregistrer sous... avec Bloc-notes

De quoi se compose le "code" ?

Reprenons le "code" affichant une boîte de dialogue :

Voyons voir de quoi il se compose...

Des instructions

Qu'est-ce que c'est ?

Voici un mot important en programmation ; une petite explication s'impose donc...
Une instruction est un "ordre" que l'on donne à l'ordinateur, comme on pourrait taper "format C:" dans sa console (les joies de Win pour les adeptes du grand nettoyage de printemps :D ).
alert('Hello world'); est donc une instruction : on ordonne au script de créer une boîte de dialogue.
Un autre exemple : un calcul est une instruction.

Une grande partie de ce que vous écrirez en JS sont des instructions, mais pas tout.
Difficile de vous donner des exemples maintenant, je vous indiquerai au fur à mesure ce qui est ou n'est pas une instruction.

Séparer des instructions

Quand on donne une instruction à l'ordinateur, il faut également lui dire où est la fin de cette instruction...
Pour cela, en JS, il y a deux solutions :

  • revenir à la ligne (avec la touche Entrée ou Enter) : l'ordinateur comprendra qu'il aura ensuite affaire à une autre instruction.

  • utiliser un point-virgule (;) à la fin de l'instruction, comme je l'ai fait dans les exemples jusqu'ici.
    Il est bien sûr parfaitement possible d'utiliser un point-virgule et un (ou plusieurs) retour(s) à la ligne...

Dans de nombreux langages de programmation (le JavaScript étant une exception), le point-virgule est obligatoire à la fin d'une instruction.
Je vous recommande donc fortement de prendre l'habitude d'en mettre un après chaque instruction.

Les fonctions

Explication

Une fonction est une suite d'instructions ayant un rôle précis. ( o_O )
Un exemple :

Cette fonction affiche, lorsqu'on l'appelle (terme à retenir), une boîte de dialogue contenant le texte entre les apostrophes (ici : 'Hello world').

Si vous êtes un peu matheux (ou si vous avez simplement suivi en cours au collège et au lycée :p ), le terme fonction ne doit pas vous être inconnu... On a dit tout à l'heure qu'un calcul est une instruction. La fonction f telle que f(x) = 15x - 4 est une suite de calculs, donc en quelque sorte une suite "d'instructions" (par analogie avec le JavaScript, car instruction est un terme purement informatique).

Eh bien en JS, on a, parmi beaucoup d'autres, la fonction alert().

Rôle des parenthèses

À quoi servent les parenthèses vides que tu mets en écrivant alert() ?

Excellente question !

Revenons à notre exemple mathématique : entre les parenthèses, on précise la valeur de l'argument x.
Avec x = 5, on aura f(5) = 15*5 - 4 = 71.

C'est le même principe en JavaScript : par exemple, avec alert(), l'argument est le texte à afficher. S'il y a plusieurs arguments, ils sont séparés par des virgules.
On doit obligatoirement mettre ces parenthèses, même s'il n'y a aucun argument (elles seront alors vides).

Normalement, le nom de la fonction est alert, ou f pour la fonction mathématique citée plus haut.
Employer le nom alert() est un abus de langage, mais cela permet de repérer facilement qu'on parle d'une fonction.

De nouvelles fonctions

Il y a des fonctions déjà définies en JavaScript.
On peut aussi créer nos propres fonctions ?

Bien sûr !

Il existe en effet des fonctions déjà définies (retenez également ce terme) en JS, qu'on va donc pouvoir utiliser directement, comme notre fonction alert(). Le navigateur va alors chercher la définition de cette fonction et l'exécuter, ce qui aura pour effet de faire apparaître notre message.

Mais il est également possible de créer nos propres fonctions (par exemple, une fonction qui convertit des euros en francs), ce sera l'objet d'un chapitre.

Vous savez désormais exécuter du code JavaScript ; attaquons donc sans plus tarder le chapitre suivant !

Le chapitre qui va suivre est capital !
Lisez-le avec attention car il introduit des notions assez complexes.