1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: Content Security Policy
slug: Mozilla/Add-ons/WebExtensions/Content_Security_Policy
tags:
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions/Content_Security_Policy
---
<div>{{AddonSidebar}}</div>
<p>Les extensions développées avec les API WebExtension ont une politique de sécurité du contenu (CSP) qui leur est appliquée par défaut. Cela limite les sources à partir desquelles les extensions peuvent charger les ressources provenant d'élément {{HTMLElement("script")}} et {{HTMLElement("object")}} et interdit les pratiques potentiellement dangereuses comme l'utilisation de {{jsxref("Objets_globaux/eval","eval()")}}.</p>
<p>Cet article explique brièvement ce qu'est une CSP, quelle est la politique par défaut, ce que cela signifie pour une extension et comment une extension peut changer la CSP par défaut.</p>
<p>La <a href="/fr/docs/Web/HTTP/CSP">Politique de sécurité de contenu</a> (ou <em>Content Security Policy</em> en anglais, abrégé en CSP) est un mécanisme permettant d'empêcher les sites Web d'exécuter involontairement du contenu malveillant. Un site web définit une CSP via un en-tête HTTP envoyé par le serveur. Le rôle de la CSP consiste principalement à indiquer les sources légitimes pour les différents types de contenu (tels que les scripts ou les plugins). Par exemple, un site web peut utiliser une CSP pour indiquer que le navigateur ne doit exécuter que du JavaScript provenant du site web lui-même et non d'autres sources. Une CSP peut également ordonner au navigateur d'interdire les pratiques potentiellement dangereuses telles que l'utilisation de {{jsxref("Objets_globaux/eval","eval()")}}.</p>
<p>Comme les sites web, les extensions peuvent charger du contenu provenant de différentes sources. Ainsi, une popup sera définie comme un document HTML et pourra inclure du code JavaScript et CSS provenant de différentes sources, comme une page web normale :</p>
<pre class="brush: html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!--Du contenu HTML-->
<!--
On intègre ici un script provenant d'une source tierce
Voir aussi https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity.
-->
<script>
src="https://code.jquery.com/jquery-2.2.4.js"
integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous">
</script>
<!-- On ajoute le script pour la pop-up-->
<script src="popup.js"></script>
</body>
</html></pre>
<p>À la différence d'un site web, les extensions accèdent à certains API privilégiées supplémentaires. Par conséquent, si elles sont compromises par du code malveillant, les risques sont plus grands. Pour cette raison :</p>
<ul>
<li>Une politique de sécurité du contenu par défaut assez stricte est appliquée aux extensions. Voir la <a href="#Default">politique de sécurité du contenu par défaut</a>.</li>
<li>L'auteur de l'extension peut modifier la stratégie par défaut à l'aide de la clé <code>content_security_policy</code> du fichier de manifeste (<code>manifest.json</code>) mais il existe certaines restrictions sur les règles autorisées. Voir <code><a href="/fr/Add-ons/WebExtensions/manifest.json/content_security_policy">content_security_policy</a></code>.</li>
</ul>
<h2 id="Politique_de_sécurité_du_contenu_par_défaut">Politique de sécurité du contenu par défaut</h2>
<p>La politique de sécurité du contenu par défaut pour les extensions est la suivante :</p>
<pre>"script-src 'self'; object-src 'self';"</pre>
<p>Celle-ci sera appliquée à toute extension qui n'a pas explicitement défini sa propre politique via la clé <code><a href="/fr/Add-ons/WebExtensions/manifest.json/content_security_policy">content_security_policy</a></code> du manifeste. Cela a les conséquences suivantes :</p>
<ul>
<li><a href="#script_ressources">Seules les ressources <code><script></code> et <code><object></code> locales à l'extension peuvent être chargées</a></li>
<li><a href="#eval">L'extension n'est pas autorisée à évaluer les chaines en JavaScript.</a></li>
<li><a href="/fr/Add-ons/WebExtensions/Content_Security_Policy#Inline_JavaScript">Le code JavaScript « <em>inline</em> » (écrit au sein du document HTML) n'est pas éxécuté.</a></li>
</ul>
<h3 id="Emplacement_des_ressources_pour_<script>_et_<objet>">Emplacement des ressources pour <code><script></code> et <code><objet></code></h3>
<p>Avec la CSP par défaut, les éléments {{HTMLElement("script")}} et {{HTMLElement("object")}} peuvent uniquement charger des ressources qui sont locales à l'extension. Aussi, si on considère cette ligne dans un document HTML d'une extension :</p>
<pre class="brush: html"> <script src="https://code.jquery.com/jquery-2.2.4.js"></script></pre>
<p>La ressource jQuery demandée ne sera pas récupérée et la récupération échouera silencieusement. Deux méthodes permettent de résoudre ce problème :</p>
<ul>
<li>Téléchargez la ressource cible puis empaquetez-la dans votre extension et faites ensuite référence à cette version locale.</li>
<li>Utilisez la clé <code><a href="/fr/Add-ons/WebExtensions/manifest.json/content_security_policy">content_security_policy</a></code> afin d'autoriser l'origine distante dont vous avez besoin.</li>
</ul>
<h3 id="eval_et_autres_équivalents"><code>eval()</code> et autres équivalents</h3>
<p>Avec la CSP par défaut, il n'est pas possible d'évaluer les chaînes de caractères représentant du code JavaScript. Cela signifie que les formes suivantes ne sont pas autorisés :</p>
<pre class="brush: js">eval("console.log('un résultat');");</pre>
<pre class="brush: js">window.setTimeout("alert('Coucou monde!');", 500);</pre>
<pre class="brush: js">var f = new Function("console.log('toto');");</pre>
<h3 id="JavaScript_écrit_dans_le_HTML_inline">JavaScript écrit dans le HTML (<em>inline</em>)</h3>
<p>Avec la CSP par défaut, le code JavaScript écrit au sein d'un document HTML n'est pas exécuté. Cela concerne le JavaScript écrit dans les balises <code><script></code> ainsi que les gestionnaires d'évènement intégrés dans les attributs. Autrement dit, les formes suivantes ne sont pas autorisées :</p>
<pre class="brush: html"><script>console.log("toto");</script></pre>
<pre class="brush: html"><div onclick="console.log('clic')">Cliquez sur ce texte !</div></pre>
<p>Si votre document HTML utilise une forme comme <code><body onload="main()"></code>, privilégiez plutôt l'ajout d'un gestionnaire d'évènement sur <code><a href="/fr/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> ou <code><a href="/fr/docs/Web/Events/load">load</a></code>.</p>
|
