{"title":"Protection contre le détournement de clic (clickjacking)","version":"2.2","locale":"fr","docname":"ref/clickjacking","url":"/fr/2.2/ref/clickjacking/","canonical":"https://djangodocs.dev/fr/2.2/ref/clickjacking/","summary":"L’intergiciel et les décorateurs de protection contre le détournement de clic fournissent une protection facile à utiliser contre le « clickjacking ». Ce type…","html":"<span id=\"clickjacking-protection\"></span><h1>Protection contre le détournement de clic (clickjacking)<a class=\"heading-anchor\" href=\"#module-django.middleware.clickjacking\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h1>\n<p>L’intergiciel et les décorateurs de protection contre le détournement de clic fournissent une protection facile à utiliser contre le « <a class=\"reference external\" href=\"https://en.wikipedia.org/wiki/Clickjacking\">clickjacking</a> ». Ce type d’attaque se produit lorsqu’un site malveillant piège un utilisateur pour qu’il clique sur un élément caché d’un autre site que le site malveillant a chargé dans un cadre caché ou dans un iframe.</p>\n<section id=\"an-example-of-clickjacking\">\n<h2>Un exemple de détournement de clic<a class=\"heading-anchor\" href=\"#an-example-of-clickjacking\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Supposons qu’une boutique en ligne dispose d’une page où un utilisateur connecté peut cliquer sur « Acheter » pour acheter un article. Un utilisateur a choisi de rester connecté dans le magasin en permanence pour des raisons pratiques. Un site attaquant peut créer un bouton « J’aime les poneys » sur une de ses propres pages, et charger la page de la boutique dans un cadre iframe transparent de façon à ce que le bouton « Acheter » soit superposé et invisible au-dessus du bouton « J’aime les poneys ». Si l’utilisateur visite le site de l’attaquant, un clic sur « J’aime les poneys », va engendrer un clic inopiné sur le bouton « Acheter » de la boutique en ligne et l’article va être acheté sans que l’utilisateur ne le sache.</p>\n</section>\n<section id=\"preventing-clickjacking\">\n<span id=\"clickjacking-prevention\"></span><h2>Prévention du détournement de clic<a class=\"heading-anchor\" href=\"#preventing-clickjacking\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>Les navigateurs modernes honorent l’en-tête HTTP <a class=\"reference external\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options\">X-Frame-Options</a> qui indique si une ressource est autorisée à être chargée dans un cadre ou un iframe. Si la réponse contient dans cet en-tête une valeur <code class=\"docutils literal notranslate\"><span class=\"pre\">SAMEORIGIN</span></code>, le navigateur ne chargera la ressource dans un cadre que si la demande provient du même site. Si l’en-tête contient <code class=\"docutils literal notranslate\"><span class=\"pre\">DENY</span></code>, le navigateur bloque alors le chargement de la ressource dans un cadre quel que soit le site qui en fait la demande.</p>\n<p>Django fournit quelques moyens simples pour inclure cet en-tête dans les réponses de votre site :</p>\n<ol class=\"arabic simple\">\n<li><p>Un intergiciel simple qui définit l’en-tête dans toutes les réponses.</p></li>\n<li><p>Un ensemble de décorateurs de vue qui peuvent être utilisés pour remplacer l’intergiciel ou pour ne renseigner l’en-tête que pour certaines vues.</p></li>\n</ol>\n<p>L’en-tête HTTP <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> ne sera défini par l’intergiciel ou les décorateurs de vue que s’il n’est pas déjà présent dans la réponse.</p>\n</section>\n<section id=\"how-to-use-it\">\n<h2>Comment l’utiliser<a class=\"heading-anchor\" href=\"#how-to-use-it\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h2>\n<section id=\"setting-x-frame-options-for-all-responses\">\n<h3>Définition de <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> pour toutes les réponses<a class=\"heading-anchor\" href=\"#setting-x-frame-options-for-all-responses\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Pour définir la même valeur <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> pour toutes les réponses de votre site, ajoutez <code class=\"docutils literal notranslate\"><span class=\"pre\">'django.middleware.clickjacking.XFrameOptionsMiddleware'</span></code> dans le réglage <a class=\"reference internal\" href=\"/fr/2.2/ref/settings/#std-setting-MIDDLEWARE\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">MIDDLEWARE</span></code></a>:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"n\">MIDDLEWARE</span> <span class=\"o\">=</span> <span class=\"p\">[</span>\n    <span class=\"o\">...</span>\n    <span class=\"s1\">&#39;django.middleware.clickjacking.XFrameOptionsMiddleware&#39;</span><span class=\"p\">,</span>\n    <span class=\"o\">...</span>\n<span class=\"p\">]</span>\n</code></pre></div>\n<p>Cet intergiciel est activé dans le fichier des réglages généré par <a class=\"reference internal\" href=\"/fr/2.2/ref/django-admin/#django-admin-startproject\"><code class=\"xref std std-djadmin docutils literal notranslate\"><span class=\"pre\">startproject</span></code></a>.</p>\n<p>Par défaut, l’intergiciel définit l’en-tête <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> à <code class=\"docutils literal notranslate\"><span class=\"pre\">SAMEORIGIN</span></code> pour chaque réponse <code class=\"docutils literal notranslate\"><span class=\"pre\">HttpResponse</span></code> sortante. Si vous préférez la valeur <code class=\"docutils literal notranslate\"><span class=\"pre\">DENY</span></code>, définissez le réglage <a class=\"reference internal\" href=\"/fr/2.2/ref/settings/#std-setting-X_FRAME_OPTIONS\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">X_FRAME_OPTIONS</span></code></a>:</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"n\">X_FRAME_OPTIONS</span> <span class=\"o\">=</span> <span class=\"s1\">&#39;DENY&#39;</span>\n</code></pre></div>\n<p>Lors de l’utilisation de l’intergiciel, il peut y avoir des vues pour lesquelles vous ne souhaitez <strong>pas</strong> définir l’en-tête <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code>. Pour ces cas-là, vous pouvez utiliser un décorateur de vue qui indique à l’intergiciel de ne pas définir l’en-tête :</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">django.http</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">HttpResponse</span>\n<span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">django.views.decorators.clickjacking</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">xframe_options_exempt</span>\n\n<span class=\"nd\">@xframe_options_exempt</span>\n<span class=\"k\">def</span><span class=\"w\"> </span><span class=\"nf\">ok_to_load_in_a_frame</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"p\">):</span>\n    <span class=\"k\">return</span> <span class=\"n\">HttpResponse</span><span class=\"p\">(</span><span class=\"s2\">&quot;This page is safe to load in a frame on any site.&quot;</span><span class=\"p\">)</span>\n</code></pre></div>\n<aside class=\"admonition admonition-note\" role=\"note\">\n<p class=\"admonition-title\">Note</p>\n<p>Si vous avez besoin de soumettre un formulaire ou d’accéder à un cookie de session depuis un cadre (frame ou iframe), il peut être nécessaire de modifier les réglages <a class=\"reference internal\" href=\"/fr/2.2/ref/settings/#std-setting-CSRF_COOKIE_SAMESITE\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">CSRF_COOKIE_SAMESITE</span></code></a> ou <a class=\"reference internal\" href=\"/fr/2.2/ref/settings/#std-setting-SESSION_COOKIE_SAMESITE\"><code class=\"xref std std-setting docutils literal notranslate\"><span class=\"pre\">SESSION_COOKIE_SAMESITE</span></code></a>.</p>\n</aside>\n</section>\n<section id=\"setting-x-frame-options-per-view\">\n<h3>Définition de <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> par vue<a class=\"heading-anchor\" href=\"#setting-x-frame-options-per-view\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Pour définir l’en-tête <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> vue par vue, Django fournit ces décorateurs :</p>\n<div class=\"code-block\" data-language=\"default\"><div class=\"code-block-toolbar\"><span class=\"code-block-language\">Code</span><button type=\"button\" class=\"copy-button\" data-copy hidden><span class=\"copy-button-label\">Copy</span></button></div><pre role=\"group\" tabindex=\"0\" aria-label=\"Code code\"><code><span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">django.http</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">HttpResponse</span>\n<span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">django.views.decorators.clickjacking</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">xframe_options_deny</span>\n<span class=\"kn\">from</span><span class=\"w\"> </span><span class=\"nn\">django.views.decorators.clickjacking</span><span class=\"w\"> </span><span class=\"kn\">import</span> <span class=\"n\">xframe_options_sameorigin</span>\n\n<span class=\"nd\">@xframe_options_deny</span>\n<span class=\"k\">def</span><span class=\"w\"> </span><span class=\"nf\">view_one</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"p\">):</span>\n    <span class=\"k\">return</span> <span class=\"n\">HttpResponse</span><span class=\"p\">(</span><span class=\"s2\">&quot;I won&#39;t display in any frame!&quot;</span><span class=\"p\">)</span>\n\n<span class=\"nd\">@xframe_options_sameorigin</span>\n<span class=\"k\">def</span><span class=\"w\"> </span><span class=\"nf\">view_two</span><span class=\"p\">(</span><span class=\"n\">request</span><span class=\"p\">):</span>\n    <span class=\"k\">return</span> <span class=\"n\">HttpResponse</span><span class=\"p\">(</span><span class=\"s2\">&quot;Display in a frame if it&#39;s from the same origin as me.&quot;</span><span class=\"p\">)</span>\n</code></pre></div>\n<p>Notez que vous pouvez utiliser les décorateurs en plus de l’intergiciel. L’utilisation d’un décorateur remplace le comportement de l’intergiciel.</p>\n</section>\n</section>\n<section id=\"limitations\">\n<h2>Limitations<a class=\"heading-anchor\" href=\"#limitations\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h2>\n<p>L’en-tête <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code> protège uniquement des détournements de clic dans les navigateurs modernes. Les anciens navigateurs ignorent silencieusement cet en-tête et ont besoin d”<a class=\"reference external\" href=\"https://en.wikipedia.org/wiki/Clickjacking#Prevention\">autres techniques de prévention du détournement de clic</a>.</p>\n<section id=\"browsers-that-support-x-frame-options\">\n<h3>Navigateurs qui prennent en charge <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code><a class=\"heading-anchor\" href=\"#browsers-that-support-x-frame-options\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h3>\n<ul class=\"simple\">\n<li><p>Internet Explorer 8+</p></li>\n<li><p>Firefox 3.6.9+</p></li>\n<li><p>Opera 10.5+</p></li>\n<li><p>Safari 4+</p></li>\n<li><p>Chrome 4.1+</p></li>\n</ul>\n</section>\n<section id=\"see-also\">\n<h3>Voir aussi<a class=\"heading-anchor\" href=\"#see-also\"><span class=\"visually-hidden\">Lien vers cette rubrique</span><span aria-hidden=\"true\">#</span></a></h3>\n<p>Une <a class=\"reference external\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options#Browser_compatibility\">liste complète</a> de navigateurs prenant en charge <code class=\"docutils literal notranslate\"><span class=\"pre\">X-Frame-Options</span></code>.</p>\n</section>\n</section>","rootId":"module-django.middleware.clickjacking","toc":[{"title":"Un exemple de détournement de clic","anchor":"an-example-of-clickjacking","children":[]},{"title":"Prévention du détournement de clic","anchor":"preventing-clickjacking","children":[]},{"title":"Comment l’utiliser","anchor":"how-to-use-it","children":[{"title":"Définition de X-Frame-Options pour toutes les réponses","anchor":"setting-x-frame-options-for-all-responses","children":[]},{"title":"Définition de X-Frame-Options par vue","anchor":"setting-x-frame-options-per-view","children":[]}]},{"title":"Limitations","anchor":"limitations","children":[{"title":"Navigateurs qui prennent en charge X-Frame-Options","anchor":"browsers-that-support-x-frame-options","children":[]},{"title":"Voir aussi","anchor":"see-also","children":[]}]}],"breadcrumbs":[{"docname":"ref/index","title":"Référence de l’API","url":"/fr/2.2/ref/"}],"prev":{"docname":"ref/class-based-views/flattened-index","title":"Vues génériques fondées sur les classes - index général","url":"/fr/2.2/ref/class-based-views/flattened-index/"},"next":{"docname":"ref/contrib/index","title":"Paquets contrib","url":"/fr/2.2/ref/contrib/"},"formats":{"html":"/fr/2.2/ref/clickjacking/","markdown":"/fr/2.2/ref/clickjacking.md","json":"/fr/2.2/ref/clickjacking.json"},"source":"https://github.com/django/django/blob/stable/2.2.x/docs/ref/clickjacking.txt","official":"https://docs.djangoproject.com/fr/2.2/ref/clickjacking/","inVersions":["6.1","6.0","5.2","5.1","5.0","4.2","4.1","4.0","3.2","3.1","3.0","2.2","2.1","2.0","1.11","1.10","1.9"],"inLocales":["en","zh-hans","fr","ja","id","pt-br","ko","es","el","pl"]}