diff options
| author | Stebenwolf <51078231+stebenwolf@users.noreply.github.com> | 2021-04-30 02:05:26 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-30 02:05:26 +0200 |
| commit | 9a993adc4a00de2859989dc5fb7f501b7f189589 (patch) | |
| tree | 3dc888f5a032119f4d34133d5b92932684ac47bf /files/fr/learn | |
| parent | 95aca4b4d8fa62815d4bd412fff1a364f842814a (diff) | |
| download | translated-content-9a993adc4a00de2859989dc5fb7f501b7f189589.tar.gz translated-content-9a993adc4a00de2859989dc5fb7f501b7f189589.tar.bz2 translated-content-9a993adc4a00de2859989dc5fb7f501b7f189589.zip | |
Fix typo on link and update page (#698)
* Update index.html - typo dans un lien
- ligne 351: remplacer "sérité" par "sécurité"
* UPDT: Update of sentences, tags, format, examples
- Fix of examples
- Clean of the page
- Update of h<x> ids
- Update of links
- Update and removing of KS macros
Co-authored-by: tristantheb <tristantheb@users.noreply.github.com>
Diffstat (limited to 'files/fr/learn')
| -rw-r--r-- | files/fr/learn/forms/sending_and_retrieving_form_data/index.html | 344 |
1 files changed, 162 insertions, 182 deletions
diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html index a1664fe4a5..9585d26c64 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.html +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.html @@ -2,56 +2,56 @@ title: Envoyer et extraire les données des formulaires slug: Learn/Forms/Sending_and_retrieving_form_data tags: - - Débutant - - En-têtes - - Fichier - - Formulaire + - Beginner + - CodingScripting + - Files + - Forms - Guide - HTML - HTTP - - Sécurité + - Headers + - Security - Web translation_of: Learn/Forms/Sending_and_retrieving_form_data original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires --- -<div>{{learnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div> +<div>{{LearnSidebar}}{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</div> <p class="summary">Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire.</p> <table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis :</th> - <td>Notions concernant les ordinateurs, <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow">compréhension du HTML</a>, et<a class="new" href="https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML" rel="nofollow"> </a>connaissances de base de <a class="new" href="https://developer.mozilla.org/fr/docs/Web/HTTP/Basics_of_HTTP" rel="nofollow">HTTP </a>et <a class="new" href="https://developer.mozilla.org/fr/docs/Learn/Server-side/First_steps" rel="nofollow">programmation côté serveur.</a></td> - </tr> - <tr> - <th scope="row">Objectif :</th> - <td>Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Notions concernant les ordinateurs, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">compréhension du HTML</a>, et<a href="/fr/docs/Learn/HTML/Introduction_to_HTML"> </a>connaissances de base de <a href="/fr/docs/Web/HTTP/Basics_of_HTTP">HTTP </a>et <a href="/fr/docs/Learn/Server-side/First_steps">programmation côté serveur.</a></td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont traitées sur le serveur.</td> + </tr> + </tbody> </table> -<h2 id="Où_vont_les_données">Où vont les données ?</h2> - <p>Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumission d'un formulaire.</p> -<h3 id="A_propos_de_l'architecture_client_serveur">A propos de l'architecture client / serveur</h3> +<h2 id="clientserver_architecture">A propos de l'architecture client / serveur</h2> -<p>Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme <a href="http://httpd.apache.org/" rel="external" title="http://www.apache.org/">Apache</a>, <a href="http://nginx.com/" rel="external" title="http://nginx.com/">Nginx</a>, <a href="http://www.iis.net/" rel="external" title="http://www.iis.net/">IIS</a>, <a href="http://tomcat.apache.org/" rel="external" title="http://tomcat.apache.org/">Tomcat</a>...), en utilisant le <a href="/fr/docs/HTTP">protocole HTTP</a>. Le serveur répond à la requête en utilisant le même protocole.</p> +<p>Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme <a href="https://httpd.apache.org/">Apache</a>, <a href="https://nginx.com/">Nginx</a>, <a href="https://www.iis.net/">IIS</a>, <a href="https://tomcat.apache.org/">Tomcat</a>...), en utilisant le <a href="/fr/docs/Web/HTTP">protocole HTTP</a>. Le serveur répond à la requête en utilisant le même protocole.</p> -<p><img alt="Un schéma élémentaire d'architecture client/serveur sur le Web " src="https://mdn.mozillademos.org/files/16000/client-serveur.png" style="height: 141px; width: 400px;"></p> +<p><img alt="Un schéma élémentaire d'architecture client/serveur sur le Web " src="client-server.png"></p> <p>Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP.</p> -<div class="note"> -<p><strong>Note</strong>: Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module <a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a>.</p> </div> -<h3 id="Côté_client_définition_de_la_méthode_d'envoi_des_données">Côté client : définition de la méthode d'envoi des données</h3> +<h2 id="on_the_client_side_defining_how_to_send_the_data">Côté client : définition de la méthode d'envoi des données</h2> -<p>L'élément {{HTMLElement("form")}} définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont {{htmlattrxref("action","form")}} et {{htmlattrxref("method","form")}}.</p> +<p>L'élément <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> définit la méthode d'envoi des données. Tous ses attributs sont conçus pour vous permettre de configurer la requête à envoyer quand un utilisateur presse le bouton d'envoi. Les deux attributs les plus importants sont <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> et <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a>.</p> -<h4 id="L'attribut_htmlattrxref(actionform)">L'attribut {{htmlattrxref("action","form")}}</h4> +<h3 id="the_action_attribute">L'attribut action</h3> <p>Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire.</p> @@ -59,87 +59,89 @@ original_slug: Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_f <pre class="brush: html"><form action="http://foo.com"></pre> -<p class="brush: html">Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :</p> +<p>Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur :</p> <pre class="brush: html"><form action="/somewhere_else"></pre> -<p class="brush: html">Sans attribut, comme ci-dessous, les données de {{HTMLElement("form")}} sont envoyées à la même page que celle du formulaire :</p> +<p>Sans attribut, comme ci-dessous, les données de <a href="/fr/docs/Web/HTML/Element/Form"><code><form></code></a> sont envoyées à la même page que celle du formulaire :</p> <pre class="brush: html"><form></pre> -<p class="brush: html">De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut {{htmlattrxref("action", "form")}} était requis. Il n'y en a donc plus besoin.</p> +<p>De nombreuses pages anciennes utilisent la notation suivante pour indiquer que les données doivent être envoyées à la page qui contient le formulaire. C'était nécessaire car jusqu'à HTML5, l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a> était requis. Il n'y en a donc plus besoin.</p> <pre class="brush: html"><form action="#"></pre> -<div class="note"> -<p><strong>Note :</strong> Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifique une URL non sécurisée avec l'attribut {{htmlattrxref("action","form")}}, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Il est possible de spécifier une URL qui utilise le protocole HTTPS (HTTP sécurisé). Quand vous faites ceci, les données sont chiffrées avec le reste de la requête, même si le formulaire lui-même est hébergé dans une page non sécurisée à laquelle on accède via HTTP. D'autre part, si le formulaire est hébergé sur une page sécurisée mais qu'on spécifie une URL non sécurisée avec l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-action"><code>action</code></a>, tous les navigateurs affichent une alerte de sécurité pour l'utilisateur chaque fois qu'il envoie des données car celles-ci ne sont pas chiffrées.</p> </div> -<h4 id="L'attribut_htmlattrxref(methodform)">L'attribut {{htmlattrxref("method","form")}}</h4> +<h3 id="the_method_attribute">L'attribut method</h3> -<p>Cet attribut définit comment les données sont envoyées. Le <a href="/fr/docs/HTTP">Protocole HTTP </a>fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode <code>GET</code> et la méthode <code>POST</code>.</p> +<p>Cet attribut définit comment les données sont envoyées. Le <a href="/fr/docs/Web/HTTP">Protocole HTTP </a>fournit plusieurs façons d'envoyer une requête. Les données des formulaires HTML peuvent être envoyées via au moins deux méthodes : la méthode <code>GET</code> et la méthode <code>POST</code>.</p> <p>Pour bien comprendre la différence entre ces deux méthodes, il convient d'examiner comment le protocole HTTP marche. Chaque fois qu'on veut atteindre une ressource sur Internet, le navigateur envoie une requête à une URL. Une requête HTTP consiste en deux parties : un en-tête (header) qui contient les métadonnées sur les capacités du navigateur, et un corps (body) qui contient les informations nécessaires au serveur pour effectuer la requête.</p> -<h5 id="La_méthode_GET">La méthode GET</h5> +<h4 id="the_get_method">La méthode GET</h4> <p>La méthode <code>GET</code> est utilisée par le navigateur pour demander au serveur de renvoyer une certaine ressource. "Hé le serveur, je veux cette ressource." Dans ce cas, le navigateur envoie un corps vide. Du coup, si un formulaire est envoyé avec cette méthode, les données envoyées au serveur sont ajoutées à l'URL.</p> <p>Considérons le formulaire suivant :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><form action="http://foo.com" method="get"> +<pre class="brush: html"><form action="http://foo.com" method="get"> <div> - <label for="say">Quel salut voulez-vous adresser ?</label> - <input name="say" id="say" value="Hi"> + <label for="say">Quelle salutation voulez-vous adresser ?</label> + <input name="say" id="say" value="Salut"> </div> <div> <label for="to">À qui voulez‑vous l'adresser ?</label> - <input name="to" value="Mom"> + <input name="to" value="Maman"> </div> <div> - <button>Send my greetings</button> + <button>Envoyer mes salutations</button> </div> -</form></code></pre> +</form></pre> <p>Comme nous avons utilisé la méthode <code>GET</code>, vous verrez l'URL <code>www.foo.com/?say=Hi&to=Mom</code> apparaître dans la barre du navigateur quand vous soumettez le formulaire.</p> -<p><img alt="Message d'erreur: le serveur est introuvable" src="https://mdn.mozillademos.org/files/16002/fr-introuvable.png" style="display: block; height: 575px; margin: 0px auto; width: 748px;"></p> +<p><img src="url-parameters.png"></p> <p>Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur :</p> <ul> - <li><code>say</code>, dont la valeur est <code>Hi</code></li> - <li><code>to</code>, qui a la valeur <code>Mom</code></li> + <li><code>say</code>, dont la valeur est <code>Salut</code></li> + <li><code>to</code>, qui a la valeur <code>Maman</code></li> </ul> <p>La requête HTTP ressemble à quelque chose comme :</p> -<pre class="line-numbers language-html"><code class="language-html">GET /?say=Hi&to=Mom HTTP/1.1 -Host: foo.com</code></pre> +<pre>GET /?say=Hi&to=Mom HTTP/1.1 +Host: foo.com</pre> -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> -<h5 id="La_méthode_POST">La méthode POST</h5> +<h4 id="the_post_method">La méthode POST</h4> <p>La méthode <code>POST</code> est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP.</p> -<p>Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec <code>post</code> comme valeur de l'attribut {{htmlattrxref("method","form")}}.</p> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>http://foo.com<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Quel salut voulez‑vous adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>say<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Hi<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>À qui voulez‑vous l'adresser ?<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>to<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Mom<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Send my greetings<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> +<p>Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec <code>post</code> comme valeur de l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a>.</p> + +<pre class="brush: html"><form action="http://www.foo.com" method="POST"> + <div> + <label for="say">Quelle salutation voulez-vous dire ?</label> + <input name="say" id="say" value="Salut"> + </div> + <div> + <label for="to">A qui voulez-vous le dire ?</label> + <input name="to" id="to" value="Maman"> + </div> + <div> + <button>Envoyer mes salutations</button> + </div> +</form></pre> <p>Quand le formulaire est soumis avec la méthode <code>POST</code>, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête :</p> @@ -150,46 +152,43 @@ Content-Length: 13 say=Hi&to=Mom</pre> -<p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p> +<p>L'en-tête <code>Content-Length </code>indique la taille du corps, et l'en-tête <code>Content-Type</code> indique le type de ressources envoyées au serveur. Nous discuterons de ces en-têtes dans un moment.</p> -<div class="note"> -<p><strong>Note </strong>: Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Vous trouverez cet exemple sur GitHub — voyez <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">post-method.html</a> (à voir <a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">directement aussi</a>).</p> </div> -<h4 id="Voir_les_requêtes_HTTP">Voir les requêtes HTTP</h4> +<h3 id="viewing_http_requests">Voir les requêtes HTTP</h3> -<p>Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Console Web</a> de Firefox ou les <a href="https://developers.google.com/chrome-developer-tools/" title="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :</p> +<p>Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la <a href="/fr/docs/Tools/Web_Console">Console Web</a> de Firefox ou les <a href="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire :</p> <ol> - <li>Pressez F12</li> - <li>Selectionnez « Réseau »</li> - <li>Selectionnez « Tout »</li> - <li>Selectionnez « foo.com » dans l'onglet « Nom »</li> - <li>Selectionnez « En‑tête »</li> + <li>Pressez F12</li> + <li>Selectionnez « Réseau »</li> + <li>Selectionnez « Tout »</li> + <li>Selectionnez « foo.com » dans l'onglet « Nom »</li> + <li>Selectionnez « En‑tête »</li> </ol> <p>Vous obtiendrez les données du formulaire, comme l'image suivante le montre.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/14691/network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img src="network-monitor.png"></p> <p>La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête <code>GET</code> l'utilisateur verra les données dans la barre de l'URL, mais avec une requête <code>POST</code> il ne verra rien. Cela peut être important pour deux raisons :</p> <ol> - <li> - <p>Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.</p> - </li> - <li> - <p>Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.</p> - </li> + <li>Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr.</li> + <li>Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent.</li> </ol> -<h3 id="Côté_serveur_récupérer_les_données">Côté serveur : récupérer les données</h3> +<h2 id="on_the_server_side_retrieving_the_data">Côté serveur : récupérer les données</h2> <p>Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente.</p> -<h4 id="Exemple_PHP_brut">Exemple : PHP brut</h4> +<h3 id="example_raw_php">Exemple : PHP brut</h3> -<p>Le PHP met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode <code>POST</code>, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.</p> +<p>Le <a href="https://php.net/">PHP</a> met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode <code>POST</code>, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement.</p> <pre class="brush: php"><?php // La variable globale $_POST vous donne accès aux données envoyées avec la méthode POST par leur nom @@ -199,17 +198,21 @@ say=Hi&to=Mom</pre> echo $say, ' ', $to;</pre> -<p>Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — il contient le même formulaire exemple que celui vu précédemment avec la méthode <code>post</code> avec <code>php-example.php</code> en action. À la soumission du formulaire, il envoie les données de ce dernier à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est <code>Bonjour, M'an</code>.<img alt="L'exécution du code PHP déclenche l'affichage de Bonjour, M'an" src="https://mdn.mozillademos.org/files/16008/bonjour_man.png" style="display: block; height: 191px; margin: 0px auto; width: 474px;"></p> +<p>Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci opérer avec notre fichier exemple <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — il contient le même formulaire exemple que celui vu précédemment avec la méthode <code>post</code> avec <code>php-example.php</code> en action. À la soumission du formulaire, il envoie les données de ce dernier à <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, contenant le code ci‑dessus. Quand le code est exécuté, la sortie dans le navigateur est <code>Hi Mom</code> « Bonjour maman ».</p> + +<p><img alt="L'exécution du code PHP déclenche l'affichage de Hi Mom" src="php-result.png"></p> -<div class="note"> -<p><strong>Note </strong>: Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac et Windows) et <a href="https://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p> + <p></p>Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu <em>MAMP</em> > <em>Préférences</em> > <em>PHP</em>, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée).</p> </div> -<h4 id="Exemple_Python">Exemple: Python</h4> +<h3 id="example_python">Exemple: Python</h3> -<p>Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise <a href="http://flask.pocoo.org/">Flask framework</a> pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> +<p>Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise <a href="https://flask.pocoo.org/">Flask framework</a> pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p> -<pre class="line-numbers language-html"><code class="language-html">from flask import Flask, render_template, request +<pre class="brush: python">from flask import Flask, render_template, request app = Flask(__name__) @app.route('/', methods=['GET', 'POST']) @@ -221,152 +224,129 @@ def hello(): return render_template('greeting.html', say=request.form['say'], to=request.form['to']) if __name__ == "__main__": - app.run()</code></pre> + app.run()</pre> -<p>Les deux prototypes référencés dans le code ci‑dessus sont les suivants :</p> +<p>Les deux prototypes référencés dans le code ci‑dessus sont les suivants :</p> <ul> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html </a>: Le même formulaire que celui vu plus haut dans la section {{anch("La méthode POST")}} mais avec l'attribut <code>action</code> défini à la valeur <code>\{{url_for('hello')}}</code>. (C'est un modèle <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a>, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. <code>url_for('hello')</code> dit en gros « à rediriger sur <code>/hello</code> quand le formulaire est soumis ».)</li> - <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html </a>: Le même formulaire que celui vu plus haut dans la section <a href="#the_post_method">La méthode POST</a> mais avec l'attribut <code>action</code> défini à la valeur <code>\{{url_for('hello')}}</code>. (C'est un modèle <a href="https://jinja.pocoo.org/docs/2.9/">Jinja2</a>, qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. <code>url_for('hello')</code> dit en gros « à rediriger sur <code>/hello</code> quand le formulaire est soumis ».)</li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a> : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction <code>hello()</code> vue plus haut qui s'exécute quand l'URL <code>/hello</code> est chargée dans le navigateur.</li> </ul> -<div class="note"> -<p><strong>Note </strong>: À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'<a href="/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3">installer Python/PIP</a>, puis Flask avec « <code>pip3 install flask</code> ». À ce moment‑là vous pourrez exécuter l'exemple avec « <code>python3 python-example.py</code> », puis en allant sur « <code>localhost:5000</code> » dans votre navigateur.</p> </div> -<h4 id="Autres_langages_et_canevas_de_structures">Autres langages et canevas de structures</h4> +<h3 id="other_languages_and_frameworks">Autres langages et canevas de structures</h3> -<p>Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme <a href="/fr/docs/" title="/en-US/docs/">Perl</a>, <a href="/fr/docs/" title="/en-US/docs/">Java</a>, <a href="http://www.microsoft.com/net" title="http://www.microsoft.com/net">.Net</a>, <a href="/fr/docs/" title="/en-US/docs/">Ruby</a>... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :</p> +<p>Il y a de nombreuses autres techniques côté serveur utilisables pour gérer des formulaires, comme Perl, Java, .Net, Ruby... retenez juste votre préférée. Cela dit, il faut noter qu'il n'est pas très courant d'utiliser ces techniques directement car cela peut être délicat. Il est plus fréquent d'utiliser l'un des jolis canevas qui permettent de gérer des formulaires plus facilement, comme :</p> <ul> - <li><a href="http://symfony.com/" rel="external" title="http://symfony.com/">Symfony</a> pour PHP</li> - <li><a href="https://www.djangoproject.com/" rel="external" title="https://www.djangoproject.com/">Django</a> pour Python</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> pour Node.js</li> - <li><a href="http://rubyonrails.org/" rel="external" title="http://rubyonrails.org/">Ruby On Rails</a> pour Ruby</li> - <li><a href="http://grails.org/" rel="external" title="http://grails.org/">Grails</a> pour Java</li> + <li><a href="https://symfony.com/">Symfony</a> pour PHP</li> + <li><a href="https://www.djangoproject.com/">Django</a> pour Python</li> + <li><a href="/fr/docs/Learn/Server-side/Express_Nodejs">Express</a> pour Node.js</li> + <li><a href="https://rubyonrails.org/">Ruby On Rails</a> pour Ruby</li> + <li><a href="https://grails.org/">Grails</a> pour Java</li> <li>etc.</li> </ul> <p>Enfin il faut noter que même en utilisant ces canevas, travailler avec des formulaires n'est pas toujours <em>facile</em>. Mais c'est quand même bien plus facile que d'essayer d'en écrire vous‑même les fonctionnalités et cela vous économisera pas mal de temps.</p> -<div class="note"> -<p><strong>Note </strong>: Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Nous déborderions du cadre de cet article en vous initiant aux langages côté serveur ou aux canevas. Les liens ci‑dessus vous donneront des informations si vous souhaitez en apprendre plus.</p> </div> -<h2 id="Cas_particulier_envoyer_des_fichiers">Cas particulier : envoyer des fichiers</h2> +<h2 id="a_special_case_sending_files">Cas particulier : envoyer des fichiers</h2> -<p>L'envoi de fichiers avec une formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.</p> +<p>L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires.</p> -<h3 id="L'attribut_htmlattrxref(enctypeform)">L'attribut {{htmlattrxref("enctype","form")}}</h3> +<h3 id="the_enctype_attribute">L'attribut enctype</h3> -<p>Cet attribut vous permet de préciser la valeur de l'en-tête HTTP <code>Content-Type</code> incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important car il indique au serveur le type de données envoyées. Par défaut, sa valeur est <code>application/x-www-form-urlencoded</code>. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».</p> +<p>Cet attribut vous permet de préciser la valeur de l'en-tête HTTP <code>Content-Type</code> incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est <code>application/x-www-form-urlencoded</code>. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ».</p> <p>Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus :</p> <ul> - <li>régler l'attribut {{htmlattrxref("method","form")}} à <code>POST</code> car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.</li> - <li>régler la valeur de {{htmlattrxref("enctype","form")}} <code>à multipart/form-data</code> car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).</li> - <li>incorporer un ou plusieurs widgets de <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#File_picker">sélection de fichiers</a> pour permettre aux utilisateurs de choisir les fichiers à téléverser.</li> + <li>régler l'attribut <a href="/fr/docs/Web/HTML/Element/Form#attr-method"><code>method</code></a> à <code>POST</code>, car un contenu de fichier ne peut pas être mis dans des paramètres d'URL.</li> + <li>régler la valeur de <a href="/fr/docs/Web/HTML/Element/Form#attr-enctype"><code>enctype</code></a> <code>à multipart/form-data</code>, car les données seront coupées en plusieurs parties, une pour chaque fichier plus une pour les données dans le corps du formulaire (si du texte a aussi été entré dans le formulaire).</li> + <li>incorporer un ou plusieurs widgets de <a href="/fr/docs/Web/HTML/Element/Input/file"><code><input type="file"></code></a> pour permettre aux utilisateurs de choisir les fichiers à téléverser.</li> </ul> -<p> Par exemple :</p> +<p>Par exemple :</p> -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>form</span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span> <span class="attr-name token">enctype</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>multipart/form-data<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>label</span> <span class="attr-name token">for</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Choose a file<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>label</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>file<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>myFile<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>button</span><span class="punctuation token">></span></span>Send the file<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>button</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>form</span><span class="punctuation token">></span></span></code></pre> - -<div class="note"> -<p><strong>Note :</strong> Certains navigateurs prennent en charge l'attribut {{htmlattrxref("multiple","input")}} de l'élément {{HTMLElement("input")}}pour envoyer plus d'un fichier avec seulement un élément d'entrée. La façon dont le serveur gère ces fichiers dépend de la technologie du serveur. Comme évoqué précédemment, utiliser un modèle rendra les choses plus faciles.</p> -</div> +<pre class="brush: html"><form method="post" action="https://www.foo.com" enctype="multipart/form-data"> + <div> + <label for="file">Choisir un fichier</label> + <input type="file" id="file" name="myFile"> + </div> + <div> + <button>Envoyer le fichier</button> + </div> +</form></pre> -<div class="warning"> -<p><strong>Attention :</strong> De nombreux serveurs sont configurés avec une limite de taille pour les fichiers et les requêtes HTTP pour éviter les abus. Il est important de vérifier cette limite avec l'administrateur du serveur avant d'envoyer un fichier.</p> +<div class="notecard note"> + <p><b>Note :</b></p> + <p>Les serveurs peuvent être configurés avec une limite de taille pour les fichiers et les requêtes HTTP afin d'éviter les abus.</p> </div> -<h2 id="Problèmes_courants_de_sécurité">Problèmes courants de sécurité</h2> +<h2 id="security_issues">Problèmes courants de sécurité</h2> <p>Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données.</p> -<p>Selon ce que vous faites, il y a quelques problèmes de sécurité bien connus que vous pouvez aisément contrer :</p> - -<h3 id="XSS_et_CSRF">XSS et CSRF</h3> - -<p>Les attaques Cross-Site Scripting (XSS) et Cross-Site Request Forgery (CSRF) sont des attaques fréquentes qui surviennent quand vous affichez des données renvoyées par un utilisateur à celui-ci ou à un autre utilisateur. </p> +<p>L'article <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> de notre sujet d'apprentissage <a href="/fr/docs/Learn/Server-side">server-side</a> aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible.</p> -<p>XSS permet aux attaquants d'injecter des scripts côté‑client dans les pages Web vues par d'autres utilisateurs. La vulnérabilité au XSS peut être utilisée par les attaquants pour contourner les contrôles d'accès comme la<a href="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript" title="/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript"> </a><span class="st"><a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">same-origin policy</a> (ou politique de même origine)</span>. Les effets de ces attaques peuvent aller d'une nuisance mineure à un risque significatif de sécurité.</p> +<h3 id="be_paranoid_never_trust_your_users">Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs</h3> -<p>Les attaques CSRF sont similaires aux attaques XSS en ce qu'elles commencent de la même façon — en injectant des scripts côté‑client sur des pages Web — mais leur cible est différente. Les attaquants CSRF essaient d'accroître leurs privilèges pour atteindre ceux d'un utilisateur privilégié (par exemple l'administrateur du site) pour effectuer une action qu'ils ne devraient pas pouvoir faire (par exemple, envoyer des données à un utilisateur non habilité).</p> - -<p>Les attaques XSS exploitent la confiance qu'un utilisateur a pour un site, alors que les attaques CSRF exploitent la confiance qu'un site a pour ses utilisateurs.</p> - -<p>Pour éviter ces attaques, vous devez toujours vérifier les données qu'un utilisateur envoie à votre serveur et (si vous avez besoin de les afficher) essayez de ne pas afficher le contenu HTML tel que fourni par l'utilisateur. A la place, vous devez traiter les données fournies par l'utilisateur afin de ne pas les afficher verbatim. La quasi totalité des modèles du marché implémentent un filtre minimum qui enlève les éléments <span style="line-height: 1.5;">{{HTMLElement("script")}}, {{HTMLElement("iframe")}} et {{HTMLElement("object")}} des données envoyées par les utilisateurs. Cela permet d'atténuer les risques sans toutefois les éradiquer.</span></p> - -<h3 id="Injection_SQL">Injection SQL</h3> - -<p>L'injection SQL est un type d'attaque qui essaie d'effectuer certaines actions sur les bases de données utilisées par le site web cible. Cela consiste d'ordinaire à envoyer une requête SQL en espérant que le serveur l'exécutera (généralement quand le serveur essaie de ranger les informations envoyées par un utilisateur). C'est assurément l'un des <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external" title="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">vecteurs d'attaque les plus fréquents contre les sites web</a>.</p> - -<p>Les conséquences peuvent être terribles, de la perte de données à l'accès à l'infrastructure en utilisant l'augmentation des privilèges. C'est une menace sérieuse et vous ne devez jamais ranger des données envoyées par un utilisateur sans asepsie préalable (par exemple en utilisant <code><a href="http://www.php.net/manual/en/function.mysql-real-escape-string.php" rel="external" title="http://www.php.net/manual/en/function.mysql-real-escape-string.php">mysql_real_escape_string()</a></code> sur une infrastructure PHP/MySQL).</p> - -<h3 id="Injection_d'en-tête_HTTP_et_injection_d'email">Injection d'en-tête HTTP et injection d'email</h3> - -<p>Ces attaques peuvent arrivent quand votre application construit des en-têtes HTTP ou des emails basés sur les données entrées par un utilisateur sur un formulaire. Elles ne vont pas directement endommager votre serveur ou affecter vos utilisateurs mais elles sont la porte ouverte à des problèmes plus graves comme le piratage de session ou les attaques par hameçonnage (phishing).</p> - -<p>Ces attaques sont généralement silencieuses et peuvent transformer votre serveur en <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal" title="http://en.wikipedia.org/wiki/Zombie_(computer_science)">zombie</a>.</p> - -<h3 id="Soyez_paranoïaque_ne_faites_jamais_confiances_à_vos_utilisateurs">Soyez paranoïaque : ne faites jamais confiances à vos utilisateurs</h3> - -<p>Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.</p> +<p>Alors, comment combattre ces menaces ? Ce sujet va bien au-delà de ce guide, mais il y a quelques règles à garder en tête. La principale est de ne jamais faire confiance à ses utilisateurs, vous-même compris : même un utilisateur de confiance peut s'être fait pirater.</p> <p>Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujours. Sans exception.</p> <ul> - <li>Échappez les caractères putativement dangereux. <span id="result_box" lang="fr"><span>Les caractères spécifiques avec lesquels vous devez être prudent varient selon le contexte dans lequel les données sont utilisées et de la plate-forme serveur que vous utilisez, mais tous les languages côté serveur ont des fonctions pour cela.</span></span></li> - <li><span id="result_box" lang="fr"><span>Limitez le volume des données entrantes pour n'autoriser que ce qui est nécessaire.</span></span></li> - <li><span id="result_box" lang="fr"><span>Faites passer par le bac à sable les fichiers téléversés (stockez‑les sur un serveur différent et n'autorisez l'accès au fichier que dans un sous-domaine différent, ou mieux, par un nom de domaine complètement différent).</span></span></li> + <li><strong>Échappez les caractères potentiellement dangereux</strong>. Les caractères spécifiques dont vous devez vous méfier varient en fonction du contexte dans lequel les données sont utilisées et de la plateforme serveur que vous employez, mais tous les langages côté serveur disposent de fonctions à cet effet. Les choses à surveiller sont les séquences de caractères qui ressemblent à du code exécutable (comme <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ou des <a href="https://en.wikipedia.org/wiki/SQL">Commandes SQL</a>).</li> + <li><strong>Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire</strong>.</li> + <li><strong>Sandbox des fichiers téléchargés</strong>. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent.</li> </ul> <p>Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité !</p> -<div class="note"> -<p><strong>Note </strong>: L'article « <a href="/fr/docs/Learn/Server-side/First_steps/Website_security">Sécurité des sites Web</a> » de notre sujet d'apprentissage « <a href="/fr/docs/Learn/Server-side">côté‑serveur</a> » discute les problèmes ci‑dessus et leurs solutions possibles plus en détail.</p> -</div> - <h2 id="Conclusion">Conclusion</h2> -<p>Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. <span id="result_box" lang="fr"><span>N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.</span> <span>Comme nous allons le voir, il est possible d'effectuer la <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">validation des données côté client</a>, mais le serveur ne peut pas faire confiance à cette validation car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.</span></span></p> +<p>Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son application peut s'avérer plus délicat. N'oubliez pas qu'un développeur n'est pas celui qui doit définir le modèle de sécurité des données.Comme nous allons le voir, il est possible d'effectuer la <a href="/fr/docs/Learn/Forms/Form_validation">validation des données côté client</a>, mais le serveur ne peut pas faire confiance à cette validation, car il n'a aucun moyen de savoir ce qui se passe réellement du côté client.</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="see_also">Voir aussi</h2> <p>Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources :</p> <ul> - <li><a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a></li> - <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external" title="https://www.owasp.org/index.php/Main_Page">Open Web Application Security Project (OWASP)</a> (Projet pour la sécurité des applications dans un Web ouvert)</li> - <li><a href="http://shiflett.org/" rel="external" title="http://shiflett.org/">Blog de Chris Shiflett à propos de la sérité avec PHP</a></li> + <li><a href="/fr/docs/Learn/Server-side/First_steps">Programmation d'un site web côté‑serveur : premiers pas</a></li> + <li><a href="https://www.owasp.org/index.php/Main_Page">Open Web Application Security Project (OWASP)</a> (Projet pour la sécurité des applications dans un Web ouvert)</li> + <li><a href="https://shiflett.org/">Blog de Chris Shiflett à propos de la sécurité avec PHP</a></li> </ul> -<div> -<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs", "Web/Guide/HTML/Formulaires/Validation_donnees_formulaire", "Web/Guide/HTML/Formulaires")}}</div> -</div> +<p>{{PreviousMenu("Learn/Forms/Form_validation", "Learn/Forms")}}</p> + +<h2 id="in_this_module">Dans ce module</h2> + +<ul> + <li><a href="/fr/docs/Learn/Forms/Your_first_form">Mon premier formulaire HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_structure_a_web_form"><span>Comment structurer un formulaire HTML</span></a></li> + <li><a href="/fr/docs/Learn/Forms/Basic_native_form_controls">Les widgets natifs pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/HTML5_input_types">Les types de saisie HTML5</a></li> + <li><a href="/fr/docs/Learn/Forms/Other_form_controls">Autres contrôles de formulaires</a></li> + <li><a href="/fr/docs/Learn/Forms/Styling_web_forms">Mise en forme des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/Advanced_form_styling">Mise en forme avancée des formulaires HTML</a></li> + <li><a href="/fr/docs/Learn/Forms/UI_pseudo-classes">Pseudo-classes d'interface utilisateur</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Form_validation">Validation des données de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_and_retrieving_form_data">Envoi de données de formulaire</a></li> +</ul> -<h2 id="Dans_ce_module">Dans ce module</h2> +<h3 id="advanced_topics">Sujets avancés</h3> <ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/How_to_build_custom_form_controls">Comment construire des widgets personnalisés pour formulaire</a></li> + <li><a href="/fr/docs/Learn/Forms/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li> + <li><a href="/fr/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Table de compatibilité des propriétés pour les widgets de formulaire</a></li> </ul> |