Comment ouvrir des fichiers locaux dans le navigateur avec file:///

Il est possible d'utiliser le navigateur comme s'il s'agissait d'un petit explorateur de fichiers et, utilisé correctement, cela peut s'avérer extrêmement utile. De l'ouverture d'un simple document local avec file:/// à l'utilisation de la puissante API d'accès au système de fichiersDe nos jours, les navigateurs modernes offrent bien plus de possibilités que celles que nous utilisons habituellement.

Tout au long de ce guide, nous verrons, étape par étape, comment ouvrir des fichiers locaux dans le navigateur Utilisation de file:/// dans Chrome, Edge et FirefoxComment transformer votre navigateur en un explorateur de fichiers basique sous Windows et Android, et comment les développeurs peuvent aller plus loin en utilisant l'API d'accès au système de fichiers pour lire, écrire et gérer des fichiers et des dossiers locaux depuis une application web.

Que signifie réellement ouvrir des fichiers locaux avec file:///

Lorsque vous écrivez un itinéraire qui commence par file:/// dans la barre d'adresse du navigateur, Vous demandez au navigateur d'accéder au système de fichiers local plutôt qu'à Internet.C’est-à-dire, ouvrir un fichier qui se trouve sur votre propre appareil : un disque dur, une mémoire interne ou une carte SD.

Ce schéma d'URL spécial (file:///) Cela fonctionne de la même manière que de taper C: sous Windows ou / dans Linux et macOSIl est simplement adapté à la logique du navigateur. Vous verrez alors une liste de dossiers et de fichiers, sans fioritures : noms, tailles, date de modification, et c’est tout.

Bien sûr, il faut garder à l'esprit que Les navigateurs appliquent de nombreuses restrictions de sécurité à ces routes locales.Par exemple, un site web que vous visitez depuis Internet ne peut pas, par défaut, lire librement vos fichiers locaux simplement parce que vous ouvrez une URL avec file:///Un geste explicite ou une autorisation de l'utilisateur est toujours requis.

Utiliser le navigateur comme explorateur de fichiers sur Android

De nombreux téléphones Android ne sont pas équipés d'un gestionnaire de fichiers performant fourni par le fabricant, ou celui préinstallé est assez limité. Dans ces cas-là, Utiliser Chrome, Edge ou un autre navigateur basé sur Chromium comme navigateur de fortune peut vous sortir d'affaire..

L'astuce est très simple: Ouvrez votre navigateur basé sur Chromium (Chrome, Edge, Brave, etc.) et saisissez l'adresse dans la barre d'adresse. fichier: /// sdcard /Android identifie le stockage interne principal comme sdcard, de manière très similaire à la façon dont Windows utilise C: pour le lecteur principal.

Lorsque vous ouvrirez cette adresse, le navigateur demandera généralement l'autorisation de lire le stockage interne. Une fois cette autorisation accordée, un index apparaîtra affichant les dossiers racine de votre mémoire interne.De là, vous pouvez entrer et sortir des dossiers exactement comme si vous naviguiez sur un site web avec des liens.

Dans chaque dossier, vous verrez à la fois des sous-dossiers et des fichiers. Les fichiers sont affichés avec leur nom complet, y compris l'extension, leur taille et la date de leur dernière modification.Les éléments suivants sont également répertoriés : dossiers cachés, qui sur Android commencent généralement par un point, comme .nomedia ou d'autres similaires.

Bien que la liste soit très spartiate, La plupart des navigateurs modernes permettent d'ouvrir directement de nombreux types de fichiers en cliquant dessus.Images, vidéos, fichiers audio, documents texte, etc. Il n'y a pas de vignettes ni d'aperçus, mais un simple clic sur le nom du fichier incitera le navigateur à tenter de l'afficher ou de le lire.

Transformez Chrome et Edge en un petit explorateur de fichiers sur votre PC.

Sur les ordinateurs de bureau, sous Windows comme sur d'autres systèmes, Vous pouvez également utiliser Chrome, Edge et d'autres navigateurs basés sur Chromium pour naviguer sur vos disques locaux avec file:///Le principe est le même que sous Android, mais le chemin est différent.

Si vous utilisez Windows, le lecteur principal est généralement C:. Dans ce cas, tapez dans la barre d'adresse fichier:///C: et appuyez sur EntréeLe navigateur vous affichera le contenu de la racine de ce lecteur : des dossiers tels que Windows, Program Files, Usuarios, etc.

Si vous avez plusieurs disques ou partitions, Vous pouvez remplacer la lettre dans l'URL par la lettre correspondante.. Par exemple, file:///D: pour un autre album ou file:///E: pour un souvenir USB Il a été monté avec cette lettre. Cliquez ensuite sur les dossiers pour avancer et utilisez le bouton « Retour » de votre navigateur pour revenir en arrière.

Tout comme sur Android, Dans chaque dossier, vous verrez les fichiers et sous-dossiers avec leur taille, leur date de modification et leur extension.Il ne génère pas de vignettes ni de jolies icônes, mais il est suffisant pour localiser un fichier spécifique ou jeter un coup d'œil rapide à l'arborescence d'un répertoire.

La plupart des navigateurs Chromium Ils permettent d'ouvrir directement des fichiers multimédias et même certains formats de documents. Il suffit de cliquer dessus. Images, vidéos, fichiers audio ou fichiers texte s'affichent tout naturellement dans l'onglet.

Ouvrez les fichiers locaux dans Chrome et Firefox sans saisir manuellement file:///

En plus de saisir des itinéraires avec file:///Les navigateurs intègrent des raccourcis conçus spécifiquement pour ouvrir rapidement les fichiers locaux. Dans Chrome, par exemple, vous pouvez utiliser le raccourci clavier Ctrl + O (Ctrl + O) lorsque la fenêtre du navigateur est active.

En appuyant sur ce raccourci, La boîte de dialogue « Ouvrir un fichier » standard du système d'exploitation s'ouvre.Il vous suffit de trouver le fichier souhaité, de le sélectionner et de confirmer. Chrome l'ouvrira dans l'onglet actuel ou dans un nouvel onglet, selon le type de fichier et vos préférences.

Firefox offre plusieurs options. D'une part, Vous pouvez accéder au menu principal et choisir l'option « Ouvrir un fichier… »qui fait exactement la même chose : afficher la fenêtre de sélection de fichiers du système. Vous pouvez également saisir directement un chemin d’accès comme celui-ci dans la barre d’adresse : file:///// pour que le navigateur démarre en affichant le contenu du lecteur C: sous Windows.

Avec n'importe laquelle de ces méthodes, Concrètement, le navigateur devient une visionneuse de fichiers locaux.Cela peut vous aider lorsque le Explorateur Windows Le système se bloque lorsque vous rencontrez des problèmes avec le gestionnaire de fichiers habituel ou tout simplement lorsque vous souhaitez ouvrir un type de document que le navigateur gère particulièrement bien.

L'API d'accès au système de fichiers : le passage du mode visionneur au mode éditeur

Tout ce que nous avons vu jusqu'à présent est basé sur l'utilisation « manuelle » de file:/// et des boîtes de dialogue d'ouverture de fichier, c'est-à-dire sur des actions effectuées manuellement par l'utilisateur. Mais depuis un certain temps déjà, les navigateurs basés sur Chromium intègrent l'API d'accès au système de fichiers.ce qui permet aux applications web de gérer les fichiers locaux de manière beaucoup plus avancée.

Cette API permet à un site web, après avoir demandé votre autorisation, Lisez et enregistrez les modifications directement dans les fichiers et dossiers de votre appareil.Grâce à cela, il est possible de créer des éditeurs de texte et des environnements de développement intégrés (IDE) performants directement depuis le navigateur. programmation, des logiciels de montage photo et vidéo, des gestionnaires de projets et bien d'autres outils qui, auparavant, n'avaient de sens que sous forme d'applications de bureau.

Il est important de ne pas confondre cette API moderne avec des API plus anciennes ou obsolètes. Ce n'est pas la même chose que l'interface FileSystem ni l'API File and Directory Entries ni l'ancienne spécification « File API : Directorys and System », qui proposaient d'autres mécanismes pour la gestion des hiérarchies de fichiers et des zones de stockage sandbox.

L'API d'accès au système de fichiers actuelle Il a été conçu avec un soin particulier en matière de sécurité, d'autorisations et d'expérience utilisateur.L'ouverture du sélecteur de fichiers ou de répertoires nécessite toujours des actions explicites (comme cliquer sur un bouton), et l'utilisateur est toujours clairement informé des chemins d'accès exacts auxquels il accorde l'accès.

Concernant la compatibilité, L'API fonctionne dans la plupart des navigateurs basés sur Chromium sous Windows, macOS, Linux, ChromeOS et Android.Brave fait exception à la règle : il est toujours nécessaire d’activer une option pour utiliser cette fonctionnalité. D’autres navigateurs non basés sur Chromium peuvent ne pas l’implémenter ou ne l’implémenter que partiellement.

Vérifiez si le navigateur prend en charge l'API d'accès au système de fichiers

En tant que développeur, la première chose à savoir avant d'utiliser cette API est si le navigateur de l'utilisateur la prend en charge. La méthode la plus simple consiste à vérifier si les méthodes de sélection de fichiers correspondantes existent dans l'objet global.par exemple, en vérifiant si showOpenFilePicker est disponible dans window (o self (dans un travailleur).

Le schéma typique ressemble à ceci : « Si 'showOpenFilePicker' est défini sur self, alors je peux utiliser l'API ; sinon, je dois recourir à une autre méthode. »Cela permet la mise en œuvre de solutions hybrides où, si le support est disponible, les avantages de l'API sont exploités, et si le support n'est pas disponible, des techniques traditionnelles telles que les formulaires de téléchargement de fichiers sont utilisées.

C'est aussi une bonne idée Tester sur les navigateurs cibles et sur différents OSCar même si la base est Chromium, certains fabricants peuvent activer ou désactiver des fonctionnalités spécifiques pour des raisons de sécurité, de politique ou de performance.

Premier exemple : ouverture d’un fichier local depuis une application web

L'un des exemples classiques pour comprendre cette API est la création d'un un éditeur de texte à fichier unique qui vous permet d'ouvrir, de modifier et d'enregistrer un documentIl n'est pas nécessaire que ce soit spectaculaire : du moment qu'il lit et écrit du texte simple, il illustre déjà son fonctionnement.

Le point d'entrée ici est la méthode window.showOpenFilePicker(). Cette méthode, qui ne peut être appelée que dans un contexte sécurisé (HTTPS) et en réponse à une action de l'utilisateurElle affiche une boîte de dialogue native permettant à l'utilisateur de choisir un fichier. Une fois sélectionné, elle renvoie un tableau de descripteurs, généralement avec un seul FileSystemFileHandle.

Ce descripteur stocke toutes les informations et méthodes nécessaires pour travailler avec le fichier sélectionné. Il est judicieux de conserver une référence au descripteur, car c'est ce que vous utiliserez ultérieurement pour lire le fichier, enregistrer les modifications ou effectuer toute autre opération.Tant que vous conservez ce descripteur et que l'utilisateur n'a pas révoqué les autorisations, votre application pourra interagir avec le fichier.

Une fois que vous avez le FileSystemFileHandle, vous pouvez obtenir l'objet File véritable appel handle.getFile()Cet objet File Il contient les données du fichier sous forme de blob, et vous pouvez accéder à son contenu en utilisant des méthodes telles que text(), arrayBuffer(), stream() o slice() si vous avez besoin d'un accès aléatoire.

En pratique, pour un simple éditeur de texte, La chose habituelle est d'utiliser file.text() pour obtenir le contenu complet sous forme de chaîne de caractèreset mettez ce texte dans un <textarea> afin que l'utilisateur puisse le modifier. Il est important de noter que l'objet File Elle cesse d'être valable si le fichier est modifié sur le disque par un autre moyen, auquel cas il est conseillé de relancer le processus. getFile().

Enregistrer les modifications : écrire dans le système de fichiers local

Pour enregistrer les modifications apportées par l'utilisateur, l'API propose deux méthodes typiques : une sauvegarde « simple » qui écrase le fichier d'origine et une sauvegarde « sous » qui crée un nouveau fichierLa différence fondamentale réside dans le fait que vous ayez déjà une référence au fichier de destination ou que vous ayez besoin que l'utilisateur choisisse un nouveau chemin et un nouveau nom.

Lorsque vous souhaitez créer un nouveau fichier ou enregistrer une copie sous un nom différent, Tu devrais utiliser showSaveFilePicker()Cette méthode ouvre le sélecteur de fichiers en mode enregistré, permettant à l'utilisateur de spécifier le nom, le dossier et l'extension. Vous pouvez proposer des options pour suggérer des types de fichiers, par exemple en indiquant qu'il s'agit d'un document texte et que l'extension préférée est .txt. .txt.

Un détail important est que Vous devriez appeler showSaveFilePicker() directement en réponse au geste de l'utilisateur (Par exemple, en cliquant sur le bouton « Enregistrer ») et ne tardez pas pendant un traitement important. Si vous effectuez toutes les opérations préliminaires puis, après un délai, tentez d'ouvrir la boîte de dialogue, le navigateur risque de générer une erreur de sécurité car il ne considérera plus qu'il s'agit d'une interaction de l'utilisateur.

Une fois que vous avez un FileSystemFileHandle en indiquant l'emplacement du fichier dans lequel vous souhaitez enregistrer, L'étape suivante consiste à créer un FileSystemWritableFileStream à l'aide fileHandle.createWritable()C'est ce flux que vous utiliserez pour écrire les données. Si le navigateur détecte que vous ne disposez pas encore des autorisations d'écriture, il affichera une boîte de dialogue de demande d'autorisation ; si l'utilisateur refuse, l'appel générera une exception.

Avec le ruisseau en main, Il vous suffit d'appeler writable.write(contenido) avec une chaîne de caractères, un Blob ou un BufferSourceVous pouvez même rediriger directement le corps d'une réponse HTTP vers le flux avec response.body.pipeTo(writable)Lorsque vous avez terminé de saisir du texte, vous fermez la transmission avec writable.close(), c'est-à-dire le moment où les modifications sont consolidées sur le disque.

Pendant que le flux est ouvert, vous pouvez également utiliser des méthodes telles que seek() o truncate() pour déplacer le pointeur d'écriture à une position spécifique ou modifier la taille du fichierMais il est important de se rappeler que les modifications ne sont appliquées définitivement que lorsque le flux est fermé.

Suggérer un nom de fichier et un dossier personnel à l'utilisateur

L'API gère également l'expérience utilisateur dans les boîtes de dialogue système. Par exemple, Vous pouvez spécifier un nom de fichier suggéré lorsque vous appelez showSaveFilePicker()Cela permet à l'utilisateur de voir quelque chose de plus descriptif, comme « Nouveau document.txt », au lieu d'un générique « Aucun titre ».

De même, Il est possible de suggérer un dossier initial dans lequel le sélecteur de fichiers démarre.Cela se fait en passant une propriété startIn lorsque vous appelez showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Les valeurs peuvent être des chaînes de caractères comme desktop, documents, downloads, music, pictures o videos, qui correspondent aux emplacements système standard.

Aussi, vous avez la possibilité de utiliser comme valeur de startIn un gestionnaire de fichiers ou de répertoires que vous possédez déjàDans ce cas, la boîte de dialogue s'ouvre directement dans le dossier où se trouve ce descripteur, ce qui est très pratique pour reprendre le contexte de travail de la dernière session.

Si votre application gère différents types de fichiers (par exemple, des documents texte et des images intégrées), Vous pouvez définir des identifiants différents pour chaque type de boîte de dialogue.Ainsi, le navigateur se souviendra du dernier dossier utilisé indépendamment pour chaque identifiant, et vous ne confondrez pas les chemins d'accès aux documents avec les chemins d'accès aux images.

Mémorisez les fichiers et dossiers récents grâce à IndexedDB.

L'un des points forts de File System Access est que ses gestionnaires sont sérialisables. Cela signifie que vous pouvez stocker FileSystemFileHandle y FileSystemDirectoryHandle dans IndexedDB et les récupérer lors des sessions suivantes, en respectant toujours la politique d'autorisations.

Grâce à cela, les applications web peuvent offrir des fonctionnalités typiques des ordinateurs de bureau, telles que : listes de fichiers récents, réouverture du dernier projet ou récupération du dossier de travail précédentIl suffit d'enregistrer les identifiants dans la base de données du navigateur et de les lire au démarrage de l'application.

Lorsque vous récupérez un descripteur enregistré, Ne présumez pas que les permis resteront valides.Le navigateur peut décider qu'une nouvelle autorisation est nécessaire, par exemple si un certain temps s'est écoulé ou si le dernier onglet de cette source a été fermé. Il est donc recommandé que votre code vérifie cette situation.

Pour ce contrôle, L'API inclut les méthodes queryPermission() y requestPermission() aussi bien dans les gestionnaires de fichiers que dans les gestionnaires de répertoiresVous commencez par demander quel est le statut de l'autorisation, et si elle n'est pas « accordée », vous pouvez la redemander à l'utilisateur, en indiquant dans les options si vous avez besoin d'une autorisation en lecture seule ou en lecture et écriture.

Une bonne pratique est combiner les deux étapes en une seule fonction d'aide Étant donné un descripteur et un mode (lecture seule ou lecture/écriture), le programme doit vérifier si l'autorisation est déjà accordée et, le cas échéant, afficher le message correspondant. Cela réduit le nombre de boîtes de dialogue et améliore l'expérience utilisateur.

Ouvrir et parcourir des répertoires entiers depuis le navigateur

Outre les fichiers individuels, l'API permet de travailler avec des dossiers entiers. Avec showDirectoryPicker() L'utilisateur peut sélectionner un répertoire completet l'application reçoit un FileSystemDirectoryHandle qui donne accès à tous ses éléments.

Par défaut, vous disposerez des droits de lecture sur les fichiers de ce répertoire, mais si vous avez également besoin d'y écrire… Vous pouvez demander un accès en lecture et en écriture en passant { mode: 'readwrite' } lors de l'appel showDirectoryPicker()À partir de ce moment, votre application peut lister et manipuler le contenu en fonction des autorisations accordées.

Pour naviguer dans le dossier, Vous pouvez itérer de manière asynchrone sur dirHandle.values()qui renvoie, un par un, les éléments qu'il contient : fichiers et sous-répertoires. Chaque entrée possède une propriété kind qui vous indique s'il s'agit d'un "file" ou "directory".

Si vous avez besoin d'accéder à des informations sur chaque fichier, telles que sa taille, vous pouvez appeler entry.getFile(). Dans ces cas, il est recommandé d'effectuer les lectures en parallèle en utilisant Promise.all() ou des techniques similaires, au lieu de procéder un par un de manière strictement séquentielle, ce qui peut être plus lent.

Vous pouvez également le faire à partir d'un répertoire créer de nouveaux dossiers ou fichiers avec getDirectoryHandle() y getFileHandle()Vous pouvez spécifier dans les options si vous souhaitez que ces fichiers soient créés s'ils n'existent pas déjà. Par exemple, vous pouvez configurer une structure de projet comme « Mon projet / Code / Notes.txt » directement depuis l'application web.

Gérer les fichiers : supprimer, renommer et déplacer

L'API ne se limite pas à la lecture et à l'écriture. Il vous permet également de supprimer des fichiers et des dossiers d'un répertoire en utilisant removeEntry() sur un FileSystemDirectoryHandleS'il s'agit d'un dossier, vous pouvez rendre la suppression récursive, afin qu'elle inclue tous ses sous-dossiers et fichiers.

Si, au lieu de parcourir le répertoire, vous souhaitez agir directement sur un descripteur de fichier ou de dossier, Certains navigateurs proposent cette méthode remove() en FileSystemFileHandle y FileSystemDirectoryHandleVous pouvez ainsi supprimer cet élément sans avoir besoin de faire référence à son nom dans le répertoire parent.

Pour les opérations d'organisation telles que le renommage ou le déplacement d'éléments vers un autre dossier, Il existe une méthode move() dans l'interface FileSystemHandleVous pouvez lui transmettre directement un nouveau nom, un répertoire de destination, ou un répertoire ainsi que le nouveau nom pour déplacer et renommer simultanément.

Il existe toutefois des nuances en matière de compatibilité : le soutien de move() Il est plus mature pour les fichiers au sein du système de fichiers privé source (OPFS).et peuvent encore être masquées par des options ou ne pas être implémentées dans tous les cas de figure ou pour certains répertoires dans certains navigateurs.

Glissez-déposez des fichiers et des dossiers sur le web

L'API d'accès au système de fichiers s'intègre parfaitement au système de glisser-déposer HTML. Lorsque l'utilisateur fait glisser des fichiers ou des dossiers du système d'exploitation vers une page Weble navigateur crée des éléments DataTransferItem associés.

Par la méthode DataTransferItem.getAsFileSystemHandle(), vous pouvez obtenir un FileSystemFileHandle que l'élément soit un fichier ou un FileSystemDirectoryHandle s'il s'agit d'un répertoireAinsi, une application peut permettre à l'utilisateur de glisser-déposer un dossier entier de photos et de travailler directement sur son contenu.

Il convient de garder à l'esprit que, dans le contexte du glisser-déposer, DataTransferItem.kind Le terme « fichier » sera toujours utilisé pour désigner à la fois les fichiers et les dossiers.Vous obtiendrez la distinction entre fichier et répertoire en consultant la propriété kind de FileSystemHandle qui vous rend getAsFileSystemHandle()qui permettra de faire la distinction entre "file" y "directory".

Système de fichiers source privé (OPFS) et accès optimisé

En plus de l'accès aux fichiers et dossiers de l'utilisateur, les navigateurs Chromium offrent un système de fichiers privé d'origine (OPFS)Il s'agit d'un espace de stockage dédié à chaque site web, non directement accessible par l'utilisateur depuis le système d'exploitation.

En pratique, cela signifie que Bien que le navigateur stocke ces données en interne sur le disque, l'utilisateur ne les trouvera pas sous forme de fichiers « normaux » dans un dossier quelconque.Il peut s'agir d'une base de données, de fichiers compressés ou de toute structure interne que le navigateur juge appropriée.

Depuis l'API, vous pouvez accéder à la racine de ce système privé en utilisant navigator.storage.getDirectory(), qui renvoie un FileSystemDirectoryHandle. À partir de là, vous pouvez créer des fichiers et des répertoires, les lire, y écrire, les renommer ou les supprimer comme s'il s'agissait d'éléments du système de fichiers local.Mais sachant qu'ils sont isolés et dédiés exclusivement à votre application web.

Pour des besoins de performance plus avancés, Chromium intègre un type de fichier spécial avec un accès synchrone optimisé. À travers de fileHandle.createSyncAccessHandle() (disponible dans les workers), vous pouvez obtenir un handle qui permet une lecture et une écriture synchrones et exclusives, ce qui est utile pour les cas d'utilisation très intensifs ou sensibles à la latence.

L'obtention du descripteur reste asynchrone, mais une fois que vous l'avez, Les opérations de lecture et d'écriture sont effectuées sous forme d'appels directs, en manipulant des tampons d'octets.Cela permet d'obtenir des performances très proches de celles d'une application native, sans quitter l'environnement web et en maintenant l'isolation par rapport au système source privé.

Polyfills et alternatives en l'absence de prise en charge native

Bien que l'API d'accès au système de fichiers offre de nombreuses possibilités, Tous les navigateurs ne le prennent pas encore en charge.Il n'est pas possible de créer un polyfill complet qui reproduise toutes ses fonctionnalités, principalement parce qu'il n'existe aucun moyen de simuler de manière fiable l'accès au système de fichiers natif sans la coopération du navigateur lui-même.

Cependant, certaines parties peuvent être approximatives. Pour imiter showOpenFilePicker() un simple <input type="file">, qui affiche la boîte de sélection de fichiers et permet à l'utilisateur de choisir un ou plusieurs fichiers.

Un phénomène similaire se produit avec l'épargne. Imiter showSaveFilePicker() un lien est souvent utilisé <a download="nombre"> Cliquer dessus lance le téléchargement d'un fichier Blob généré par JavaScript. Cela permet de sauvegarder les données générées par le site web, mais ne propose pas l'option d'écraser les fichiers existants.

Concernant la sélection de répertoires entiers, l'attribut non standard a traditionnellement été utilisé webkitdirectory en <input type="file">qui vous permet de choisir un dossier et d'obtenir la liste des fichiers qu'il contient. Ce n'est pas une solution universelle ni aussi puissante que showDirectoryPicker()mais cela couvre certains cas.

Pour unifier ces approches, Il y a des librairies comme accès au système de fichiers du navigateur Ils essaient d'utiliser l'API moderne chaque fois qu'elle est disponible, et sinon, ils se rabattent automatiquement sur ces meilleures alternatives.De cette manière, le développeur écrit un code relativement uniforme et la bibliothèque se charge de l'adaptation à l'environnement.

Sécurité, autorisations et contrôle des utilisateurs

Ce pouvoir s'accompagne de responsabilités, et les équipes de développement des navigateurs en sont parfaitement conscientes. La conception de l'API d'accès au système de fichiers s'articule autour de deux principes : le contrôle par l'utilisateur et la transparence.Il est impossible qu'un site web puisse lire secrètement la moitié d'un disque dur.

Lorsque l'utilisateur ouvre un fichier à l'aide des cases de sélection (pour lire ou pour en enregistrer un nouveau), C'est ce geste qui accorde l'autorisation de lecture ou d'écriture sur le fichier ou le dossier spécifique.Si l'utilisateur change d'avis et annule le dialogue, le site web ne reçoit rien et n'obtient donc aucun accès.

Pour enregistrer un nouveau fichier, cliquez sur la case « Enregistrer ». Cela vous permet non seulement de choisir un nom et un chemin d'accès, mais sert également d'autorisation d'écriture sur le fichier nouvellement créé.La logique est la même que celle utilisée depuis des années dans des éléments tels que <input type="file">mais dotée de fonctionnalités supplémentaires.

Lorsqu'une application web souhaite modifier un fichier qui existe déjà, Il ne peut pas simplement le faire ; le navigateur peut afficher un message spécifique demandant l'autorisation d'écrire dans son système.Cette boîte de dialogue ne peut s'ouvrir qu'en réponse à une action de l'utilisateur, comme par exemple en cliquant sur le bouton « Enregistrer les modifications ».

Si l'utilisateur décide de ne pas accorder cette autorisation d'écriture, Le site web doit proposer une alternative : télécharger une copie, enregistrer dans le cloud, travailler sous OPFS, ou un autre mécanisme similaire.L'idée est que l'utilisateur ait toujours le dernier mot sur ce qui est modifié sur son système local.

En matière de transparence, Les navigateurs affichent une icône dans la barre d'adresse lorsqu'un site web a accès aux fichiers locaux.Si l'utilisateur clique sur cette icône, il verra la liste des fichiers ou dossiers auxquels la page a accès à ce moment-là et pourra révoquer les autorisations à tout moment.

Les permis ne sont pas permanents. En règle générale, une page conserve la possibilité de continuer à enregistrer des fichiers uniquement tant qu'au moins un onglet de cette source est ouvert.Une fois tous ces fichiers ou répertoires fermés, le navigateur peut considérer que la session est terminée et, lors de la prochaine utilisation, il sera nécessaire de demander à nouveau l'autorisation pour ces fichiers ou répertoires.

En combinant le schéma file:/// pour ouvrir des ressources spécifiques, le raccourcis clavier pour télécharger des fichiers locaux et l'API d'accès au système de fichiers pour des intégrations poussées Cela fait du navigateur un outil beaucoup plus polyvalent, tant pour les utilisateurs que pour les développeurs.vous permettant de visionner rapidement une vidéo enregistrée sur disque ou de modifier des projets entiers sans quitter l'environnement web.