Добавление шрифтов google (fonts.googleapis.com) в заголовок CSP

Question

Я размещаю персональный проект на страницах gitHub и используя cloudflare для принудительного использования https. Теперь я хотел бы реализовать политику CSP.

Я пытался добавить мета-тег в голове моей страницы:

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

Но я получаю следующее сообщение об ошибке:

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.

Это скрипты, которые я в том числе:

<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"> 

не будет устанавливать *.fonts.googleapis.com/* разрешить все со страницы?

Поскольку это первый раз, когда я устанавливаю CSP, это правильный способ установить его для страниц github? Пока я не читал об этом.

Answer 1

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

Хотя это было бы интуитивно, ответ нет.

Смотрите довольно хорошо HTML5rocks introduction to Content Security Policy на тему масок (раздел 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.

Так рабочий ПСУ для двух шрифтов может выглядеть примерно так:

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

---

Примечание 1: Рекомендуется использовать соответствующий CSP directives. В вашем случае вы должны использовать font-src и style-src так:

<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';"> 

Преимущества использования соответствующих директив в том, что ваш СНТ получает довольно ограничительным Теперь. F.E. вы больше не разрешаете 'unsafe-inline' для источников сценариев. Это означает, что встроенный javascript теперь запрещен. Также запрещено загружать скрипты с https://fonts.gstatic.com/, что было разрешено ранее. И так далее ...

---

Примечание 2: Вы можете избавиться от 'unsafe-inline' ключевого слова на всех, используя хэш или временное значение. Я не смог сделать эту работу для этого примера, но если вам интересно, просто взгляните на HTML5rocks intro.