diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md index 4c1d6deb57321e..1d9aeef4bc90d7 100644 --- a/files/fr/web/api/storage/length/index.md +++ b/files/fr/web/api/storage/length/index.md @@ -24,9 +24,9 @@ La fonction suivante ajoute trois éléments au localStorage du domaine courant ```js function populateStorage() { - localStorage.setItem('bgcolor', 'yellow'); - localStorage.setItem('font', 'Helvetica'); - localStorage.setItem('image', 'cats.png'); + localStorage.setItem("bgcolor", "yellow"); + localStorage.setItem("font", "Helvetica"); + localStorage.setItem("image", "cats.png"); localStorage.length; // retourne 3 si localStorage est vide au préalable } diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md index 3252cb31fc9316..f8a3f6ac43e6cc 100644 --- a/files/fr/web/api/storage/removeitem/index.md +++ b/files/fr/web/api/storage/removeitem/index.md @@ -31,11 +31,11 @@ La fonction suivante crée trois données dans le stockage local, puis va suppri ```js function populateStorage() { - localStorage.setItem('bgcolor', 'red'); - localStorage.setItem('font', 'Helvetica'); - localStorage.setItem('image', 'myCat.png'); + localStorage.setItem("bgcolor", "red"); + localStorage.setItem("font", "Helvetica"); + localStorage.setItem("image", "myCat.png"); - localStorage.removeItem('image'); + localStorage.removeItem("image"); } ``` @@ -43,11 +43,11 @@ Nous pouvons également faire ceci avec le stockage de session. ```js function populateStorage() { - sessionStorage.setItem('bgcolor', 'red'); - sessionStorage.setItem('font', 'Helvetica'); - sessionStorage.setItem('image', 'myCat.png'); + sessionStorage.setItem("bgcolor", "red"); + sessionStorage.setItem("font", "Helvetica"); + sessionStorage.setItem("image", "myCat.png"); - sessionStorage.removeItem('image'); + sessionStorage.removeItem("image"); } ``` diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md index 545b6175615395..c60f0938bfcd27 100644 --- a/files/fr/web/api/storage/setitem/index.md +++ b/files/fr/web/api/storage/setitem/index.md @@ -36,9 +36,9 @@ La fonction suivante crée trois éléments à l'intérieur du stockage local. ```js function remplissageStockage() { - localStorage.setItem('bgcolor', 'red'); - localStorage.setItem('font', 'Helvetica'); - localStorage.setItem('image', 'myCat.png'); + localStorage.setItem("bgcolor", "red"); + localStorage.setItem("font", "Helvetica"); + localStorage.setItem("image", "myCat.png"); } ``` diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md index 828f94d210721d..fd392242002bcd 100644 --- a/files/fr/web/api/storage_api/index.md +++ b/files/fr/web/api/storage_api/index.md @@ -67,7 +67,7 @@ Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déte Pour déterminer les valeurs de quota et d'usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : ```js -navigator.storage.estimate().then(estimate => { +navigator.storage.estimate().then((estimate) => { // estimate.quota est le quota estimé // estimate.usage est le nombre estimé d’octets utilisés }); diff --git a/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md b/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md index b7983491875639..db5d0e8bb36efb 100644 --- a/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md +++ b/files/fr/web/api/storage_api/storage_quotas_and_eviction_criteria/index.md @@ -26,11 +26,17 @@ Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : ```js -var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" }); +var request = indexedDB.open("myDatabase", { + version: 1, + storage: "persistent", +}); ``` ```js -var request = indexedDB.open("myDatabase", { version: 1, storage: "temporary" }); +var request = indexedDB.open("myDatabase", { + version: 1, + storage: "temporary", +}); ``` Dans Firefox, quand le stockage persistant est choisi, l'utilisateur reçoit une fenêtre de dialogue d'interface utilisateur pour l'avertir que ces données persisteront et lui demander s'il en est satisfait. @@ -39,7 +45,7 @@ Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue ve ### "Default storage" dans Firefox _(stockage par défaut)_ -C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. +C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. ## Où sont stockées les données ? diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index a02ea988d3ce53..9caa419d4b7b1e 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -13,7 +13,7 @@ Cette méthode est asynchrone est renvoie une [promesse](/fr/docs/Web/JavaScript ## Syntaxe ```js -estimate() +estimate(); ``` ### Paramètres @@ -47,17 +47,19 @@ Dans cet exemple, on récupère les estimations de l'espace utilisé et du quota ```html ``` ### JavaScript ```js -navigator.storage.estimate().then(function(estimate) { - document.getElementById("percent").value = - (estimate.usage / estimate.quota * 100).toFixed(2); +navigator.storage.estimate().then(function (estimate) { + document.getElementById("percent").value = ( + (estimate.usage / estimate.quota) * + 100 + ).toFixed(2); }); ``` diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md index a87d59fb82e8ac..90a5a200da1d89 100644 --- a/files/fr/web/api/storagemanager/persist/index.md +++ b/files/fr/web/api/storagemanager/persist/index.md @@ -26,11 +26,15 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persist().then(function(persistent) { + navigator.storage.persist().then(function (persistent) { if (persistent) - console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); + console.log( + "Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite", + ); else - console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); + console.log( + "Le stockage peut être nettoyé par l’UA en cas de pression de stockage.", + ); }); ``` diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md index 190f4ccb6ee103..08be77ab966e8a 100644 --- a/files/fr/web/api/storagemanager/persisted/index.md +++ b/files/fr/web/api/storagemanager/persisted/index.md @@ -26,11 +26,15 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persisted().then(function(persistent) { + navigator.storage.persisted().then(function (persistent) { if (persistent) - console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); + console.log( + "Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite", + ); else - console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); + console.log( + "Le stockage peut être nettoyé par l’UA en cas de pression de stockage.", + ); }); ``` diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md index a0e278ba15ffd2..6880faf79769f2 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.md +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -62,12 +62,13 @@ Cet algorithme est spécifié dans [FIPS 180-4](https://nvlpubs.nist.gov/nistpub Cet exemple encode un message, puis calcule le condensé avec SHA-256, enfin affiche la longueur du résultat. ```js -const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; +const text = + "Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre."; async function digestMessage(message) { const encoder = new TextEncoder(); const data = encoder.encode(message); - const hash = await crypto.subtle.digest('SHA-256', data); + const hash = await crypto.subtle.digest("SHA-256", data); return hash; } @@ -80,13 +81,16 @@ console.log(digestBuffer.byteLength); Le condensé est retourné sous forme d'un `ArrayBuffer`, mais la comparaison et l'affichage se fait souvent avec des chaînes hexadécimales. Cet exemple calcule un condensé puis converti l'`ArrayBuffer` vers une chaîne hexadécimale. ```js -const text = 'Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre.'; +const text = + "Un obscur message venant du le système S-K, votre majesté. Ses habitants le nomment la planète Terre."; async function digestMessage(message) { - const msgUint8 = new TextEncoder().encode(message); // encode comme (utf-8) Uint8Array - const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8); // fait le condensé - const hashArray = Array.from(new Uint8Array(hashBuffer)); // convertit le buffer en tableau d'octet - const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); // convertit le tableau en chaîne hexadélimale + const msgUint8 = new TextEncoder().encode(message); // encode comme (utf-8) Uint8Array + const hashBuffer = await crypto.subtle.digest("SHA-256", msgUint8); // fait le condensé + const hashArray = Array.from(new Uint8Array(hashBuffer)); // convertit le buffer en tableau d'octet + const hashHex = hashArray + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); // convertit le tableau en chaîne hexadélimale return hashHex; } diff --git a/files/fr/web/api/svgaelement/index.md b/files/fr/web/api/svgaelement/index.md index 32c0b35338da46..5a3ba81c493f67 100644 --- a/files/fr/web/api/svgaelement/index.md +++ b/files/fr/web/api/svgaelement/index.md @@ -52,8 +52,8 @@ L'interface `SVGAElement` fournit un accès aux propriétés des éléments [`foobar

diff --git a/files/fr/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md b/files/fr/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md index 7676e8aefe94fe..f720bf1de5775d 100644 --- a/files/fr/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md +++ b/files/fr/web/api/web_crypto_api/non-cryptographic_uses_of_subtle_crypto/index.md @@ -22,7 +22,7 @@ Voici la chose la plus simple qu'il est possible de faire avec [l'API Web Crypto [Le hachage](/fr/docs/Glossary/hash) est une technique permettant de convertir une longue chaîne d'octets en une chaîne plus petite et où tout changement apporté à la chaîne d'origine (y compris un petit changement) introduira de grands changements dans la plus petite chaîne. Cette technique est utile pour vérifier que deux fichiers sont identiques sans avoir à comparer soi-même chaque octet de chaque fichier. Elle permet ainsi de n'avoir à comparer que deux courtes chaînes de caractères. Le hachage est une opération **à sens unique**. Il n'est pas possible de générer la chaîne d'octets à partir de l'empreinte produit par le hachage. -Si deux empreintes sont les mêmes, mais que les fichiers utilisés pour la génération sont différents, on parle alors de *collision*. Cela peut arriver par accident de façon extrêmement improbable et pour une fonction de hachage sécurisée comme SHA256, est quasi impossible à réaliser volontairement. Aussi, si les deux empreintes (les chaînes de caractères courtes) sont les mêmes, on peut très raisonnablement penser que les deux fichiers considérés sont identiques. +Si deux empreintes sont les mêmes, mais que les fichiers utilisés pour la génération sont différents, on parle alors de _collision_. Cela peut arriver par accident de façon extrêmement improbable et pour une fonction de hachage sécurisée comme SHA256, est quasi impossible à réaliser volontairement. Aussi, si les deux empreintes (les chaînes de caractères courtes) sont les mêmes, on peut très raisonnablement penser que les deux fichiers considérés sont identiques. Au moment où nous écrivons ces lignes (décembre 2021), SHA256 est la fonction de hachage généralement utilisée pour les fichiers mais il existe [d'autres fonctions de hachage](/fr/docs/Web/API/SubtleCrypto#supported_algorithms) disponibles avec l'interface `SubtleCrypto`. Généralement, on représente une empreinte SHA256 par une chaîne de caractères composées de 64 chiffres hexadécimaux. Un chiffre hexadécimal utilise les caractères de 0 à 9 et de a à f, ce qui permet de représenter 4 bits d'information. Pour résumer, un hachage avec SHA256 convertit n'importe quelle longueur de données en une empreinte quasi unique composée de 256 bits de données. @@ -42,7 +42,10 @@ Tout d'abord ajoutons quelques éléments HTML pour charger des fichiers et affi ```html

Démonstration pour le calcul d'une empreinte SHA256 pour un fichier

- + ``` @@ -53,11 +56,11 @@ Ensuite on utilise l'interface `SubtleCrypto` pour traiter les fichiers. Pour ce - On convertit l'empreinte résultante (stockée sous la forme d'un autre `ArrayBuffer`) en une chaîne de caractères. ```js -const output = document.querySelector('output'); -const fichier = document.getElementById('fichier'); +const output = document.querySelector("output"); +const fichier = document.getElementById("fichier"); // On lance le hachage lorsqu'un ou plusieurs fichiers ont été sélectionnés -fichier.addEventListener('change', calculerEmpreinteFichiers); +fichier.addEventListener("change", calculerEmpreinteFichiers); // La fonction digest est asynchrone, elle renvoie une promesse. // On utilise la syntaxe async/await afin de simplifier le code. @@ -67,30 +70,34 @@ async function empreinteFichier(fichier) { // On utilise l'API SubtleCrypto pour calculer une empreinte SHA256 // de l'ArrayBuffer avec le contenu du fichier. // L'empreinte résultante est stockée dans un ArrayBuffer - const empreinteArrayBuffer = await crypto.subtle.digest('SHA-256', arrayBuffer); + const empreinteArrayBuffer = await crypto.subtle.digest( + "SHA-256", + arrayBuffer, + ); // Pour l'afficher comme une chaîne de caractère, on récupère la valeur // de chaque octet afin d'en afficher la valeur hexadécimale - // On obtient un tableau où chaque octet du ArrayBuffer devient un élément + // On obtient un tableau où chaque octet du ArrayBuffer devient un élément // du tableau const uint8VueEmpreinte = new Uint8Array(empreinteArrayBuffer); // On convertit ensuite ce tableau typé en un tableau classique afin // de le parcourir et de convertir les éléments en chiffres hexadécimaux // Les caractères de 0 à 9 et de a à f représentent respectivement les nombres // entre 0 et 16, dont chacun contient 4 bits d'information. Aussi, deux - // chiffres hexadécimaux stockent 8 bits (soit 1 octet). - const empreinteTexte = Array.from(uint8VueEmpreinte).map(b => b.toString(16).padStart(2, '0')).join(''); + // chiffres hexadécimaux stockent 8 bits (soit 1 octet). + const empreinteTexte = Array.from(uint8VueEmpreinte) + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); return empreinteTexte; } async function calculerEmpreinteFichiers(e) { - let resultatHTML = '' + let resultatHTML = ""; // On parcourt chaque fichier parmi ceux sélectionnés for (const fichier of this.files) { - // On calcule l'empreinte et on l'ajoute avec le nom du fichier dans // l'élément output. - resultatHTML += `${fichier.name} ${await empreinteFichier(fichier)}` + resultatHTML += `${fichier.name} ${await empreinteFichier(fichier)}`; } output.innerHTML = resultatHTML; } @@ -100,7 +107,7 @@ async function calculerEmpreinteFichiers(e) { ### Où utiliser ça ? -Jusqu'ici, vous pouvez penser : « *Je peux utiliser ceci sur mon site web afin que, lorsque les utilisateurs téléchargent un fichier, ils puissent s'assurer que les empreintes correspondent et être rassurés sur l'intégrité du téléchargement *». Toutefois, deux problèmes se posent : +Jusqu'ici, vous pouvez penser : « _Je peux utiliser ceci sur mon site web afin que, lorsque les utilisateurs téléchargent un fichier, ils puissent s'assurer que les empreintes correspondent et être rassurés sur l'intégrité du téléchargement _». Toutefois, deux problèmes se posent : - Le téléchargement d'exécutables devrait **toujours** être effectué avec HTTPS. Cela empêche tout intermédiaire de trafiquer le contenu. Une vérification pour compromission devient alors redondante. - Si un attaquant est capable de remplacer le fichier à télécharger sur le serveur original, il pourra alors également remplacer le code du site qui utilise l'interface `SubtleCrypto` et le contourner afin d'indiquer que tout est correct. Un remplacement vicieux pourra être celui [de l'égalité stricte en égalité simple](/fr/docs/Web/JavaScript/Equality_comparisons_and_sameness) qui peut être difficile à distinguer dans le code : @@ -114,13 +121,13 @@ Un cas où ceci peut être utile est la vérification d'un fichier téléchargé ## Que signifie « saler le hash » ? -Vous avez peut-être entendu l'expression *« saler le hash »*. Ce n'est pas quelque chose qui est directement pertinent ici, mais qu'il est intéressant de connaître. +Vous avez peut-être entendu l'expression _« saler le hash »_. Ce n'est pas quelque chose qui est directement pertinent ici, mais qu'il est intéressant de connaître. > **Note :** Cette section aborde la sécurité des mots de passe et les fonctions de hachage fournies par `SubtleCrypto` ne sont pas adaptées à un tel usage. Pour hacher un mot de passe, il faut des fonctions de hachage lentes et coûteuses (en complexité de calcul) comme `scrypt` et `bcrypt`. SHA est conçu pour être rapide et efficace, ce qui le rend inadapté au hachage de mots de passe. Cette section est purement informationnelle, n'utilisez pas l'API Web Crypto pour hacher des mots de passe côté client. Afin d'éviter de stocker des mots de passe en clair, on calcule leur empreinte afin que le mot de passe original ne puisse pas être reconstitué si jamais la base de données avec l'identifiant et le mot de passe était piratée. Mais on peut déterminer les mots de passe à partir des empreintes si on génère les empreintes de l'ensemble des mots de passe connu. Concaténer une chaîne de caractères aux mots de passe modifie l'empreinte. Toutefois si on utilise la même chaîne à concaténer pour tous les mots de passe, on retombe sur le même problème. -Pour résoudre ce problème, on *« sale le hash »*. Pour chaque mot de passe, on génère un « sel » (une chaîne de caractères aléatoire) qu'on concatène à la chaîne de caractères qui représente le mot de passe. On stocke alors l'empreinte et le sel dans la même base de données afin qu'on puisse effectuer la vérification lorsque la personne saisit son mot de passe. Ainsi, même si deux utilisateurs ont des mots de passe identiques, les empreintes stockées seront différentes. On voit ici qu'il est important d'avoir une fonction de hachage cryptographique coûteuse en temps afin que ça prenne beaucoup de temps de calculer les empreintes pour une grande liste de mots de passe. +Pour résoudre ce problème, on _« sale le hash »_. Pour chaque mot de passe, on génère un « sel » (une chaîne de caractères aléatoire) qu'on concatène à la chaîne de caractères qui représente le mot de passe. On stocke alors l'empreinte et le sel dans la même base de données afin qu'on puisse effectuer la vérification lorsque la personne saisit son mot de passe. Ainsi, même si deux utilisateurs ont des mots de passe identiques, les empreintes stockées seront différentes. On voit ici qu'il est important d'avoir une fonction de hachage cryptographique coûteuse en temps afin que ça prenne beaucoup de temps de calculer les empreintes pour une grande liste de mots de passe. ## Tables de hachage avec SHA @@ -128,7 +135,7 @@ On peut utiliser la fonction de hachage SHA1 afin de générer rapidement des em Ainsi, si vous avec une base de données qui stocke un blob de données binaires dans une colonne d'une table. Cela peut poser problème, car le champ devra avoir une taille variable ou être suffisamment grand pour stocker un très grand blob. Une solution alternative consiste à générer l'empreinte du blob et à le stocker dans une table annexe avec l'empreinte comme index pour accéder au blob. L'empreinte peut alors être utilisée dans les autres tables et a le bon goût d'être de taille fixe. -Les variations possibles pour une empreinte SHA1 sont incroyablement nombreuses et il est quasi impossible de produire, accidentellement, deux blobs ayant la même empreinte SHA1. Il *est* toutefois possible de produire intentionnellement deux fichiers différents et qui ont la même empreinte SHA1, car SHA1 n'est pas sûr au sens cryptographique. Ainsi, en théorie, un utilisateur malveillant pourra générer un blob de données qui pourra avoir la même empreinte qu'un autre et utiliser cette ressemblance en remplaçant le fichier. Cela peut représenter un vecteur d'attaque qu'il est intéressant de connaître. +Les variations possibles pour une empreinte SHA1 sont incroyablement nombreuses et il est quasi impossible de produire, accidentellement, deux blobs ayant la même empreinte SHA1. Il _est_ toutefois possible de produire intentionnellement deux fichiers différents et qui ont la même empreinte SHA1, car SHA1 n'est pas sûr au sens cryptographique. Ainsi, en théorie, un utilisateur malveillant pourra générer un blob de données qui pourra avoir la même empreinte qu'un autre et utiliser cette ressemblance en remplaçant le fichier. Cela peut représenter un vecteur d'attaque qu'il est intéressant de connaître. ## Le stockage des fichiers avec git @@ -141,17 +148,18 @@ Le code qui suit peut être utilisé pour générer les empreintes de fichier av ```html

Démonstration du calcul SHA1 utilisé par git pour les fichiers

-