Ouvrir un fichier dans un navigateur web

Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.

Prérequis : Vous devez au préalable avoir mis en place un environnement de travail.
Objectifs : Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu.

Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :

  1. Le protocol HTTP : c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.
  2. Le protocole file : celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menu Fichier > Ouvrir un fichier…).

Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.

Pédagogie active

Il n'existe pas encore de matériau interactif pour cet article. N'hésitez pas à contribuer.

Aller plus loin

Un fichier d'exemple

Prenons un fichier index.html très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Coucou</title>
</head>
<body>
  <h1>Bonjour !</h1>
  <p>Je suis une page web toute simple avec :</p>
  <img src="/images/licorne.png" alt="une licorne !"/>
</body>
</html>

Ouvrir un fichier depuis le serveur local

Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse http://localhost dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :

Example of a page load through a local web server

Maintenant, que se passe-t-il si index.html est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple images) sont toujours sitées à la racine ?

Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (/) ce qui signifie que l'URL est relative au nom de domaine. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence localhost) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier index.html de cet exemple pourrait être placé n'importe où sur le serveur localhost).

Quel que soit le nouvel emplacement de  index.html, tant que le chemin utilisé pour l'image est /images/licorne.png, le navigateur servira http://localhost/images/licorn.png.

Par exemple, si le fichier est déplacé sous http://localhost/toto, on pourra toujours voir la licorne :

Example of a page not at the root of a local web server

Ouvrir un fichier local

Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :

  • Dans le navigateur, cliquer sur Fichier ⯈ Ouvrir un fichier…
  • Glisser-déposer un fichier dans le navigateur
  • Sélectionner un fichier HTML en double-cliquant dessus (sous réserve que le logiciel associé aux fichiers .html soit bien votre navigateur)

Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :

Example of a page open through the file protocol

Les liens absolus relatifs à un nom de domaine

Nous ne voyons plus l'image car nous avons utilisé un chemin relatif à un nom de domaine. En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant /images/licorne.png. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire images qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut alt (et affiche donc "une licorne !").

AJAX et JavaScript

Attention, JavaScript ne fonctionne pas bien avec le protocole file. Ainsi, lorsque vous voudrez lancer une requête AJAX, cela déclenchera cette procédure :

  1. Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.
  2. Récupération de cette « autre partie » à l'adresse http://localhost/ajax/remplacement.html.
  3. Remplacement de la première partie avec la seconde.

Pour que la deuxième étapes fonctionne, AJAX a besoin d'utiliser le protocole HTTP. Or, le protocole pour accéder à un fichier local n'est pas http:// mais file://. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.

Ce que nous avons appris

Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec file://). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.

  • Lorsqu'on utilise le protocole file pour visualiser une page web, il est nécessaire d'utiliser des URL absolues avec des noms de domaine.
  • Le protocole file est restreint quant à l'utilisation de JavaScript.

À l'opposé, le protocole file protocol est une méthode simple et efficace pour :

  • Vérifier l'allure d'un document sans sa mise en forme.
  • Vérifier l'accessibilité du site lorsque les images ne sont pas disponibles (les images sont alors remplacées par le texte contenu dans l'attribut alt).

Prochaines étapes

Maintenant que nous avons vu les différences entre le protocole http et le protcole file, vous pouvez continuer :