CSP

Content Security Policy

Paris Web 2015

Nicolas Hoffmann / @Nico3333fr

CSP ?

Content Security Policy
=
« Politique de Sécurité des Contenus »

Directives de sécurité (Front-End)

Directives de sécurité des Contenus

Un constat

Devrais-je le faire ?

Contrôler ce qui se passe sur le Front

  • Failles XSS (Cross-Site-Scripting)
  • Contenus « indésirables »
  • Mais aussi un outil d’amélioration continue…

Support de CSP 1

Support de CSP Level 1
http://caniuse.com/#feat=contentsecuritypolicy

Fonctionnement

  • Entête HTTP
  • Directives pour chaque élément
<?php
header("Content-Security-Policy: <vos directives>");
?>

CSP, en pratique !

Test sur un site réel

http://rocssti.net/exemple-csp-paris-web2015

CSP, en pratique !

Une page sans CSP

Directives CSP

<?php
header("Content-Security-Policy: default-src 'self';  script-src 'self' www.google-analytics.com stats.g.doubleclick.net ; style-src 'self' data: ; img-src 'self' www.google-analytics.com stats.g.doubleclick.net data: ;  frame-src 'self' ; report-uri /csp-parser.php ;  ");
?>

default-src

Si aucune directive de définie pour un type de contenu
=> utilise cette valeur 


 default-src 'self' ;
 # self = même port, nom de domaine, protocole => OK

script-src (JavaScript)

Autoriser un nom de domaine 


 script-src 'self' www.google-analytics.com ;
 # fichiers JS sur ce domaine => OK

style-src (CSS)

Autoriser des contenus embarqués 


 style-src 'self' data: ;
 # Data-Uri dans une CSS => OK

2 remarques !

On restreint où put**** ?








Règle de CSP

Tout ce qui n’est pas expressément autorisé dans les directives CSP… sera interdit.

Interdit = Bloqué, non affiché, non exécuté.

script-src (JavaScript)

Pas autorisé le JS inline (<script>, onclick, etc.) => ✖ 


 script-src 'self' 'unsafe-inline' ;

Pareil pour CSS !

Résultat ?

Élément Autorisé ?
styles_mini.css, jquery-mini.js ☑
analytics.js (google-analytics.com) ☑
evil.js (nicolas-hoffmann.net)
styles/JS inline 		NIET

Notifications

Notifications dans la console (exemple sous Firefox)

Résultat

Une page avec CSP

Et comment on utilise CSP dans la vraie vie ?

Deux méthodes

1) Mauvaise méthode

Faut pas y craindre = bourrin

Gamelle assurée

NON NON et NON !

Non, vraiment pas

2) Meilleure méthode

  • Report-URI
  • Report Only

Report-URI


 report-uri /csp-parser.php ;
 # envoie les erreurs sur cette adresse

Parser

<?php
$data = file_get_contents('php://input');

if ($data = json_decode($data, true)) {
 $data = json_encode(
  $data,
  JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES
  );
 mail(EMAIL, SUBJECT, $data);
}
?>
Voir CSP Report URI, exemples

Report-Only

<?php
header("Content-Security-Policy-Report-Only: <vos directives>");
?>

Faire « comme si »

Report-URI + Report-Only

  • Tester des directives sans danger
  • Surveiller et monitorer

Pourquoi utiliser CSP ?

  • Pour vos utilisateurs
  • Pour vous
  • (Un peu) Pour CSP aussi

CSP pour vos utilisateurs/clients

  • Pas à souffrir de failles XSS et autres
  • Transparent pour eux
  • Sécurité

CSP pour vous

  • Maîtrise globale du front
  • Sources de contenus
  • Éradique des mauvaises pratiques
  • Compagnon idéal de l’orthogonalité
  • Devrait être indiqué pour les plugins

CSP pour aider CSP aussi

  • Technologie bonne…
  • … mais des faux-positifs (notifications) dans les navigateurs
  • Doit être encore plus utilisé/testé/déployé

Conclusion :
CSP rocks !

Ressources

Merci !

Pour votre attention.

Pour discuter :
Nicolas Hoffmann / @Nico3333fr