Ajout de polices google (fonts.googleapis.com) à l'en-tête CSP

Question

J'héberge un projet personnel sur des pages gitHub, et j'utilise cloudflare pour appliquer https. Maintenant, je voudrais mettre en œuvre une politique CSP.

J'ai essayé d'ajouter la balise meta à la tête de ma page:

<meta HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' *.fonts.googleapis.com/* *.cloudflare.com/* *.fonts.googleapis.com/*;"> 

Mais je reçois l'erreur suivante:

Refused to load the stylesheet ' https://fonts.googleapis.com/icon?family=Material+Icons ' because it violates the following Content Security Policy directive: "default-src 'self' .fonts.googleapis.com/.cloudflare.com/ .fonts.googleapis.com/". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

Ce sont les scripts que je suis notamment:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
     rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Noto+Sans|Roboto" rel="stylesheet"> 

ne paramètre pas *.fonts.googleapis.com/* autoriser tout à partir de la page?

Puisqu'il s'agit de la première fois que je configure un CSP, est-ce la bonne façon de le définir pour les pages github? Je n'ai encore trouvé aucune lecture à ce sujet.

Answer 1

Won't setting *.fonts.googleapis.com/* allow everything from the page?

Bien que ce serait intuitive, la réponse est pas.

Voir la jolie bonne HTML5rocks introduction to Content Security Policy sur le thème de wildcards (section Implementation details):

Wildcards are accepted, but only as a scheme, a port, or in the leftmost position of the hostname: *://*.example.com:* would match all subdomains of example.com (but not example.com itself), using any scheme, on any port.

Ainsi, un CSP travaillant pour les deux polices pourrait ressembler à ceci:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.googleapis.com/ https://fonts.gstatic.com/ 'unsafe-inline';"> 

---

Note 1: C'est une bonne pratique d'utiliser le CSP directives correspondant. Dans votre cas, vous devez utiliser le font-src et style-src comme ceci:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; font-src 'self' https://fonts.gstatic.com/; style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';"> 

L'avantage d'utiliser les directives correspondantes est que votre CSP maintenant devient assez restrictive. F.e. vous n'autorisez plus 'unsafe-inline' pour les sources de script. Cela signifie que le javascript en ligne est maintenant interdit. Il est également interdit de charger des scripts à partir de https://fonts.gstatic.com/, ce qui était autorisé auparavant. Et ainsi de suite ...

---

Note 2: Vous pouvez vous débarrasser du mot-clé 'unsafe-inline' tout en utilisant un hachage ou un nonce. Je n'ai pas été en mesure de faire ce travail pour cet exemple, mais si vous êtes intéressé, jetez un oeil à la HTML5rocks intro à nouveau.