Как работает атрибут nonce?

68
10 февраля 2018, 23:03

Как работает атрибут nonce (для html-элемента link)? И непонятно для чего он вообще нужен?

Answer 1

Атрибут nonce с помощью CSP определяет, для каких html файлов может быть загружен тот или иной файл стилей или скриптов. По существу, аналог токена для формы.

Подробно механизм работы описан на enSO. Но есть и описание на русском:

Nonce — это генерируемая случайным образом на сервере строковая переменная. Она добавляется в CSP-заголовок:

Content-Security-Policy:    default-src 'self';
                            script-src 'self' 'nonce-Xiojd98a8jd3s9kFiDi29Uijwdu';

и в тэг инлайн-скрипта:

<script>
    console.log("Script won't run as it doesn't contain a nonce attribute");
</script>
<script nonce="Eskdikejidojdk978Ad8jf">
    console.log("Script won't run as it has an invalid nonce");
</script>
<script nonce="Xiojd98a8jd3s9kFiDi29Uijwdu">
    console.log('Script runs as the nonce matches the nonce in the HTTP header');

Если вы захотите использовать хэши, то сначала их нужно сгенерировать на сервере и включить в заголовок CSP, соответственно в директивы style-src или script-src. Перед рендерингом страницы браузер вычисляет хэш скрипта/стиля, и если он совпадает с указанным, то выполнение разрешается.

Пример хэша, сгенерированного из строковой console.log('Hello, SitePoint'); с помощью алгоритма Sha256 (base64).

Content-Security-Policy: 
                default-src 'self';
                script-src 'self' 'sha256-V8ghUBat8RY1nqMBeNQlXGceJ4GMuwYA55n3cYBxxvs=';

Во время рендеринга страницы браузер для каждого инлайн-скрипта вычисляет хэши и сравнивает с перечисленными в CSP. Приведённый выше хэш позволяет выполнить скрипт:

< sсript >console.log('Hello, SitePoint');< /sсript >

Обратите внимание, что пробелы имеют значение, так что эти скрипты выполнены не будут:

<sсript> console.log('Hello, SitePoint');</sсript>
<sсript>console.log('Hello, SitePoint'); </sсript>

Оригинал можно прочитать здесь: Улучшение сетевой безопасности с помощью Content Security Policy (Хабрахабр)

Примеры приведены для тега script, но для link смысл тот же.

READ ALSO
Как добавить атрибут с помощью jquery?

Как добавить атрибут с помощью jquery?

Метод attr добавляет значение в html кодДопустим, я хочу добавить всем элементам страницы font-size, он добавит это, но не в теге style, поэтому атрибут...

108
Google Ranking Вебсайта [требует правки]

Google Ranking Вебсайта [требует правки]

У меня есть сайт простой статический рекламного характераЯ в search engine google добавил и www версию и просто домен

53