diff options
Diffstat (limited to 'files/fr/web/http/headers/content-security-policy/style-src/index.md')
| -rw-r--r-- | files/fr/web/http/headers/content-security-policy/style-src/index.md | 232 |
1 files changed, 115 insertions, 117 deletions
diff --git a/files/fr/web/http/headers/content-security-policy/style-src/index.md b/files/fr/web/http/headers/content-security-policy/style-src/index.md index a8fa19ef1c..60d4956741 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src/index.md +++ b/files/fr/web/http/headers/content-security-policy/style-src/index.md @@ -15,167 +15,165 @@ tags: - style-src translation_of: Web/HTTP/Headers/Content-Security-Policy/style-src --- -<div>{{HTTPSidebar}}</div> +{{HTTPSidebar}} -<p>La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) <strong><code>style-src</code></strong> spécifie les sources valides pour des feuilles de style.</p> +La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`style-src`** spécifie les sources valides pour des feuilles de style. <table class="properties"> - <tbody> - <tr> - <th scope="row">Version de CSP</th> - <td>1</td> - </tr> - <tr> - <th scope="row">Type de directive</th> - <td>{{Glossary("Fetch directive")}}</td> - </tr> - <tr> - <th scope="row">{{CSP("default-src")}} fallback</th> - <td>Oui, si cette directive est absente, l'agent utilisateur consultera la directive <code>default-src</code></td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Version de CSP</th> + <td>1</td> + </tr> + <tr> + <th scope="row">Type de directive</th> + <td>{{Glossary("Fetch directive")}}</td> + </tr> + <tr> + <th scope="row">{{CSP("default-src")}} fallback</th> + <td> + Oui, si cette directive est absente, l'agent utilisateur consultera la + directive <code>default-src</code> + </td> + </tr> + </tbody> </table> -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<p>Une ou plusieurs sources peuvent être autorisées pour cette directive :</p> +Une ou plusieurs sources peuvent être autorisées pour cette directive : -<pre class="syntaxbox">Content-Security-Policy: style-src <source>; -Content-Security-Policy: style-src <source> <source>; -</pre> + Content-Security-Policy: style-src <source>; + Content-Security-Policy: style-src <source> <source>; -<h3 id="Sources">Sources</h3> +### Sources -<p>{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}}</p> +{{page("fr/Web/HTTP/Headers/Content-Security-Policy/connect-src", "Sources")}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Cas_de_violation">Cas de violation</h3> +### Cas de violation -<p>Soit cet en-tête CSP :</p> +Soit cet en-tête CSP : -<pre class="brush: bash">Content-Security-Policy: style-src https://example.com/</pre> +```bash +Content-Security-Policy: style-src https://example.com/ +``` -<p>Ces feuilles de style seront bloquées et ne se chargeront pas :</p> +Ces feuilles de style seront bloquées et ne se chargeront pas : -<pre class="brush: html"><link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> +```html +<link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> -<style> +<style> #inline-style { background: red; } -</style> +</style> -<style> +<style> @import url("https://not-example.com/styles/print.css") print; -</style></pre> +</style> +``` -<p>De même que les styles chargés avec l'en-tête {{HTTPHeader("Link")}} :</p> +De même que les styles chargés avec l'en-tête {{HTTPHeader("Link")}} : -<pre class="brush: bash">Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet -</pre> +```bash +Link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet +``` -<p>Les attributes de style seront aussi bloqués :</p> +Les attributes de style seront aussi bloqués : -<pre class="brush: html"><div style="display:none">Foo</div></pre> +```html +<div style="display:none">Foo</div> +``` -<p>De même que les styles ajoutés par JavaScript en définissant l'attribut <code>style</code> directement, ou en définissant la propriété {{domxref("CSSStyleDeclaration.cssText", "cssText")}} :</p> +De même que les styles ajoutés par JavaScript en définissant l'attribut `style` directement, ou en définissant la propriété {{domxref("CSSStyleDeclaration.cssText", "cssText")}} : -<pre class="brush: js">document.querySelector('div').setAttribute('style', 'display:none;'); -document.querySelector('div').style.cssText = 'display:none;';</pre> +```js +document.querySelector('div').setAttribute('style', 'display:none;'); +document.querySelector('div').style.cssText = 'display:none;'; +``` -<p>Toutefois, les propriétés de styles qui sont définies directement dans l'attribut {{domxref("HTMLElement.style", "style")}} ne seront pas bloquées, permettant aux utilisateurs de manipuler sainement les styles avec JavaScript :</p> +Toutefois, les propriétés de styles qui sont définies directement dans l'attribut {{domxref("HTMLElement.style", "style")}} ne seront pas bloquées, permettant aux utilisateurs de manipuler sainement les styles avec JavaScript : -<pre class="brush: js">document.querySelector('div').style.display = 'none';</pre> +```js +document.querySelector('div').style.display = 'none'; +``` -<p>Ce genre de manipulations peut être bloqué en désactivant JavaScript au moyen de la directive CSP {{CSP("script-src")}}.</p> +Ce genre de manipulations peut être bloqué en désactivant JavaScript au moyen de la directive CSP {{CSP("script-src")}}. -<h3 id="Styles_embarqués_non_fiables">Styles embarqués non fiables</h3> +### Styles embarqués non fiables -<div class="note"> -<p><strong>Note :</strong> Bloquer les styles et scripts embarqués est l'une des stratégies de sécurité majeures que CSP propose. Toutefois, si vous en avez absolument besoin, il existe des mécanismes qui vous permettront de les autoriser.</p> -</div> +> **Note :** Bloquer les styles et scripts embarqués est l'une des stratégies de sécurité majeures que CSP propose. Toutefois, si vous en avez absolument besoin, il existe des mécanismes qui vous permettront de les autoriser. -<p>Vous pouvez autoriser les styles embarqués en spécifiant la valeur <code>'unsafe-inline'</code>, des nonces ou des hashs correspondant à la feuille de style.</p> +Vous pouvez autoriser les styles embarqués en spécifiant la valeur `'unsafe-inline'`, des nonces ou des hashs correspondant à la feuille de style. -<pre class="brush: bash">Content-Security-Policy: style-src 'unsafe-inline'; -</pre> +```bash +Content-Security-Policy: style-src 'unsafe-inline'; +``` -<p>Cette directive CSP autorisera toutes les feuilles de styles embarquées telles que l'élément {{HTMLElement("style")}} et l'attribut <code>style</code> sur tous les éléments :</p> +Cette directive CSP autorisera toutes les feuilles de styles embarquées telles que l'élément {{HTMLElement("style")}} et l'attribut `style` sur tous les éléments : -<pre class="brush: html"><style> +```html +<style> #inline-style { background: red; } -</style> +</style> -<div style="display:none">Foo</div> -</pre> +<div style="display:none">Foo</div> +``` -<p>Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} :</p> +Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} : -<pre class="brush: bash">Content-Security-Policy: style-src 'nonce-2726c7f26c'</pre> +```bash +Content-Security-Policy: style-src 'nonce-2726c7f26c' +``` -<p>Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("style")}} :</p> +Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("style")}} : -<pre class="brush: html"><style nonce="2726c7f26c"> +```html +<style nonce="2726c7f26c"> #inline-style { background: red; } -</style></pre> - -<p>Autrement, vous pourrez créer des hashs à partir de vos feuilles de styles. CSP accepte les algorithmes sha256, sha384 et sha512.</p> - -<pre class="brush: bash">Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f'</pre> - -<p>Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.).</p> - -<pre class="brush: html"><style>#inline-style { background: red; }</style></pre> - -<h3 id="Style_non_fiables">Style non fiables</h3> - -<p>La valeur <code>'unsafe-eval'</code> contrôle différente méthodes de mise en page qui créent des déclarations de style à partir de chaines de caractères. Si <code>'unsafe-eval'</code> n'est pas spécifiée avec la directive <code>style-src</code>, ces méthodes seront bloquées et n'auront aucun effet :</p> - -<ul> - <li>{{domxref("CSSStyleSheet.insertRule()")}}</li> - <li>{{domxref("CSSGroupingRule.insertRule()")}}</li> - <li>{{domxref("CSSStyleDeclaration.cssText")}}</li> -</ul> - -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{specName("CSP 3.0", "#directive-style-src", "style-src")}}</td> - <td>{{Spec2('CSP 3.0')}}</td> - <td>Inchangé.</td> - </tr> - <tr> - <td>{{specName("CSP 1.1", "#directive-style-src", "style-src")}}</td> - <td>{{Spec2('CSP 1.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +</style> +``` + +Autrement, vous pourrez créer des hashs à partir de vos feuilles de styles. CSP accepte les algorithmes sha256, sha384 et sha512. + +```bash +Content-Security-Policy: style-src 'sha256-a330698cbe9dc4ef1fb12e2ee9fc06d5d14300262fa4dc5878103ab7347e158f' +``` + +Lors de la génération du hash, vous ne devez pas inclure les balises et tenir compte de la casse et des caractères blancs (espaces, retours à la ligne, etc.). + +```html +<style>#inline-style { background: red; }</style> +``` + +### Style non fiables + +La valeur `'unsafe-eval'` contrôle différente méthodes de mise en page qui créent des déclarations de style à partir de chaines de caractères. Si `'unsafe-eval'` n'est pas spécifiée avec la directive `style-src`, ces méthodes seront bloquées et n'auront aucun effet : + +- {{domxref("CSSStyleSheet.insertRule()")}} +- {{domxref("CSSGroupingRule.insertRule()")}} +- {{domxref("CSSStyleDeclaration.cssText")}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Spécifications +| Specification | Status | Comment | +| -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | +| {{specName("CSP 3.0", "#directive-style-src", "style-src")}} | {{Spec2('CSP 3.0')}} | Inchangé. | +| {{specName("CSP 1.1", "#directive-style-src", "style-src")}} | {{Spec2('CSP 1.1')}} | Définition initiale. | +## Compatibilité des navigateurs -<p>{{Compat("http.headers.csp.Content-Security-Policy.style-src")}}</p> +{{Compat("http.headers.csp.Content-Security-Policy.style-src")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTTPHeader("Content-Security-Policy")}}</li> - <li>{{CSP("style-src-elem")}}</li> - <li>{{CSP("style-src-attr")}}</li> - <li>{{HTTPHeader("Link")}} header</li> - <li>{{HTMLElement("style")}}, {{HTMLElement("link")}}</li> - <li>{{cssxref("@import")}}</li> - <li>{{domxref("CSSStyleSheet.insertRule()")}}</li> - <li>{{domxref("CSSGroupingRule.insertRule()")}}</li> - <li>{{domxref("CSSStyleDeclaration.cssText")}}</li> -</ul> +- {{HTTPHeader("Content-Security-Policy")}} +- {{CSP("style-src-elem")}} +- {{CSP("style-src-attr")}} +- {{HTTPHeader("Link")}} header +- {{HTMLElement("style")}}, {{HTMLElement("link")}} +- {{cssxref("@import")}} +- {{domxref("CSSStyleSheet.insertRule()")}} +- {{domxref("CSSGroupingRule.insertRule()")}} +- {{domxref("CSSStyleDeclaration.cssText")}} |