Mise en œuvre Content Security Policy en conservant des css inline

Bonjour,

J'espère être dans le bon forum.

Pour un site grand public il me semble utile de mettre en œuvre Content Security Policy

C'est assez facile avec le .htaccess.

Par contre sur le site qui m'intéresse il reste des css inline (dans le head sous balise <style>).
Ce sont des css dynamiques générés côté serveur.
Cela me semble affreusement lourd de créer ces css dynamiques sous forme de feuilles de style externes, surtout en termes de maintenance car l'ajout d'un produit dans la base peut avoir un impact sur ces css.

Ma question est donc de savoir comment tout interdire avec CSP sauf les css inline.

J'ai cherché sur le Web, CSP ne manque pas de ressources mais pas toujours très claires sur le sujet évoqué.

Bonjour,

Pour commencer voilà de bonnes ressources en français :

Content Security Policy : sécurité pour votre site, mais pas seulement

Comment implémenter Content Security Policy

Déployer CSP : une approche en 5 étapes

"Démarrez votre déploiement avec Content-Security-Policy-Report-Only pour éviter que les directives bloquent des éléments à tort et à travers. Et utilisez report-uri pour récupérer les infractions."

Comment mettre en œuvre ces deux machins ?
Je vais chercher.

Hi,

Ce que tu cherches :

style-src 'self' 'unsafe-inline';

Après le truc de base pour un semblant de sécurité :

content-security-policy: 
default-src 'self'; 
form-action 'self' ; 
script-src 'self'  https://tondomaine/js/;  
img-src 'self'  https://tondomaine/images/;
 
style-src 'self' 'unsafe-inline';
worker-src 'none';
frame-src 'none';
frame-ancestors 'none';
object-src 'none';
connect-src 'self';

En gros :
self : le domaine.
unsafe-inline : balise (style, ou event js dans le html)
none : interdit

default-src : permet de définir la règle par défaut à appliquer à chaque champ (idéal ça permet d'en oublier). Je te conseille de le mettre à self si tu n'es pas très familier. (Après avec l'expérience et suivant l'architecture où tu interviens, tu le passe à none, et tu autorise uniquement ce dont tu as besoin).

form-action : le domaine autorisé pour les "action" des formulaires.
script-src : les scripts js + event dans le html
style-src : les src css + les balises inline dans t'es css .
img-src : les emplacements des images
connect-src : pour tes contrôleurs XHR (entre autre).
Modifié par gray_magic (19 Dec 2020 - 17:30)

Bonjour gray_magic,

Merci de ton aide.

Je potasse un peu le truc et je publierai ce que je fais.

J'utilise une Google font, cela nécessite-t-il une déclaration ?

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,700" />

j'ai des <script type="application/ld+json"> dynamiques inline dans les pages html, cela nécessite-t-il une déclaration ?

<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"offers":
{
etc...
etc...
etc...
}
</script>

De mémoire j'avais déjà eu le cas :

style-src 'self'  https://fonts.googleapis.com;
 
font-src 'self'  https://fonts.gstatic.com;

Pour le ld+json, non car ce n'est pas lié à un script exécutable comme c'est le cas pour du JS mais juste un modèle de données structurés pour google bot.

Bonjour gray_magic,

Merci de ta réponse.

J'essaye d'avancer pendant le week-end.

Tu dois rajouter ça :
report-uri: https://tonsite.fr/write_report.php

Tu vas recevoir ça :

{
  "csp-report": {
    "document-uri": "https://tonsite.fr/pagesourcedurapport.php",
    "referrer": "la page d'avant",
    "blocked-uri": "http://tonsite.fr/letrucbloque.css ou .js etc",
    "violated-directive": "la directive qui à déclenché le rapport",
    "original-policy": "le fragment de règle CSP conserné",
    "disposition": "report"
  }
}

dans la variable $_POST['csp-report'], tu devras juste faire un json_encode pour manipuler les données et faire ce que tu as envie avec.

Bonjour,

Je me suis créé un petit site de test.

Dans le .htaccess :

Header always set Content-Security-Policy: "default-src 'none'; style-src 'self'"
Header always set Content-Security-Policy-Report-Only: "default-src 'none'; report-uri 'https://www.monsite.fr/csp_rapport.php'"

Logiquement la feuille de style externe ne doit pas être chargée selon la directive Content-Security-Policy-Report-Only: et je suppose que je devrais récupérer une alerte dans csp_rapport.php.

Il ne se passe rien.

Le code de csp_rapport.php est le suivant :

<?php

$file = fopen ('partners/csp_rapport.txt', 'a+');

$tabtext = $_POST['csp-report'];

if (filesize ('partners/csp_rapport.txt.txt') > 0) $tabtext = "\r" . $tabtext;

fwrite ($file, $tabtext);

fclose ($file);

?>

Vois-tu où est l'erreur ?

Bonjour,

En combinant tes conseils et cette ressource chez MDN j'en arrive à cette déclaration.

Header always set Content-Security-Policy: 
"
// Self par défaut
default-src 'self';

// Correction pour css inline et google font
style-src 'self' 'unsafe-inline'  https://fonts.googleapis.com;
 
font-src 'self'  https://fonts.gstatic.com;
 

// Interdiction de ce dont on est sûr de ne pas vouloir
frame-src 'none'; frame-ancestors 'none'; manifest-src 'none'; connect-src 'none'; media-src 'none'; object-src 'none'; worker-src 'none'
"

Je bute toujours sur report-uri...

Bonjour,

Pour le code PHP de rapport j'ai trouvé à cette adresse un code qui fonctionne.

Je me prends une alerte :

{
"csp-report": {
"document-uri": "https://www.monsite.com/bb/index.php?action=vthread&forum=4&topic=66",
"referrer": "https://www.google.fr/",
"violated-directive": "script-src-elem",
"effective-directive": "script-src-elem",
"original-policy": "default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src 'none'; frame-ancestors 'none'; manifest-src 'none'; connect-src 'none'; media-src 'none'; object-src 'none'; worker-src 'none'; ; report-uri https://www.monsite.com/csp_rapport.php",
"disposition": "report",
"blocked-uri": "inline",
"line-number": 34,
"source-file": "https://www.monsite.com/bb/index.php",
"status-code": 0,
"script-sample": ""
}
}

Corrigé comme suit :

script-src-elem https://www.touslescables.com/bb/

Dans le dossier bb il y a un forum type minibb.

Bonjour,

Au passage j'ai un problème pour intégrer Report-to au htaccess.

Header always set Report-To: { "group": "endpoint-1",
             "max_age": 10886400,
             "endpoints": [
               { "url": "https://example.com/reports" },
               { "url": "https://backup.com/reports" }
             ] }

Déclenche une erreur 500.

Voyez-vous où est l'erreur ?

Merci d'avance.
Modifié par boteha_2 (27 Dec 2020 - 15:18)

Bonjour,

"original-policy": "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; frame-src 'none'; frame-ancestors 'none'; manifest-src 'none'; connect-src 'none'; media-src 'none'; object-src 'none'; worker-src 'none'; report-uri https://www.monsite.com/csp_rapport.php",

J'ai quelques problèmes à interpréter ces alertes.

1)
"violated-directive": "img-src",
"effective-directive": "img-src",
"blocked-uri": "data",
"status-code": 0,
"script-sample": ""

2)
"violated-directive": "script-src"

"violated-directive": "font-src",
"blocked-uri": "https://github.com/google/fonts/blob/master/apache/opensans/OpenSans-Light.ttf?raw=true",

3)
"blocked-uri": "data",
"referrer": "",
"violated-directive": "default-src"

Et le Scan de Mozilla met des croix rouges sur les points suivants :

Blocks execution of inline JavaScript by not allowing 'unsafe-inline' inside script-src
Blocks execution of JavaScript's eval() function by not allowing 'unsafe-eval' inside script-src
Blocks inline styles by not allowing 'unsafe-inline' inside style-src
Clickjacking protection, using frame-ancestors
Deny by default, using default-src 'none'
Restricts use of the <base> tag by using base-uri 'none', base-uri 'self', or specific origins
Restricts where <form> contents may be submitted by using form-action 'none', form-action 'self', or specific URIs

Bonjour,

Je déterre.

default-src 'none';
frame-ancestors 'none';
base-uri 'self';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline';
font-src 'self';
img-src 'self'
form-action 'self'  https://paiement.systempay.fr;
 
report-uri /csp_rapport.php;

Je prends des alertes avec :
font-src
"blocked-uri": "https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fBBc4.woff2",

font-src
"blocked-uri": "https://static3.avast.com/1000947/web/o/f/700/proximanova-bold-webfont.woff2",

font-src
"blocked-uri": "https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTegdm0LZdjqr5-oayXSOefg.woff2",
"blocked-uri": "https://github.com/google/fonts/blob/master/apache/opensans/OpenSans-Light.ttf?raw=true",

font-src
"source-file": "resource://gre/modules/Readerable.jsm",

font-src
"blocked-uri": "chrome-extension",

img-src
"blocked-uri": "data",

img-src
"blocked-uri": "https://translate.google.com/gen204?nca=te_li&client=te_lib&logld=vTE_20201130_00",

img-src
"blocked-uri": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",

"blocked-uri": "data",
"blocked-uri": "https://monsite.com/favicon.ico",
Je n'ai pas de favicon...

style-src-elem
"blocked-uri": "https://translate.googleapis.com/translate_static/css/translateelement.css",

C'est assez fastidieux...

Visiblement rien ne vient de chez moi et la consultation du site n'est pas affectée.

Est-ce que je peux m'assoir sur ces alertes ?

Bonjour,

"violated-directive": "script-src",
        "effective-directive": "script-src",
        "original-policy": "default-src 'none'; frame-ancestors 'none'; base-uri 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self'; manifest-src 'self'; form-action 'self'  https://paiement.systempay.fr;  report-uri /csp_rapport.php",

 "disposition": "enforce",
        "blocked-uri": "wasm-eval",
        "line-number": 2,
        "column-number": 170590,
        "source-file": "chrome-extension",
        "status-code": 200,
        "script-sample": ""

Si j'ai compris script-src bloque chrome-extension

Est-ce ennuyeux pour les utilisateurs, je suppose que non ?
Si oui comment corriger ?

Ou encore :

"violated-directive": "font-src",
        "effective-directive": "font-src",
        "original-policy": "default-src 'none'; frame-ancestors 'none'; base-uri 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self'; manifest-src 'self'; form-action 'self'  https://paiement.systempay.fr;  report-uri /csp_rapport.php",
        "disposition": "enforce",
        "blocked-uri": "https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2",
        "line-number": 2,
        "column-number": 19290,
        "source-file": "chrome-extension",
        "status-code": 0,
        "script-sample": ""

Merci d'avance.