Внешний файл JavaScript продолжает нарушать Content-Security-Policy и обрабатывать внешний JS как встроенный скрипт

Question

Я пытаюсь смягчить атаки XSS, устанавливая заголовок Content-Security-Policy, но Chrome продолжает выдавать ошибку:

Отказался выполнять встроенный обработчик событий, поскольку он нарушает следующую политику безопасности содержимогоДиректива: "script-src 'self' 'Для включения встроенного выполнения требуется ключевое слово unsafe-inline, хеш (sha256 -...) или одноразовый номер (nonce -... ').

Iпопытался установить одноразовый номер в <script nonce="Njg3MGUxNzkyMjViNDZkN2I3YTM3MDAzY2M0MjUxZGEzZmFhNDU0OGZjNDExMWU5OTVmMmMwMTg4NTA3ZmY4OQ==" href="main.js"></script>, но это не сработало.

Вот мой заголовок Content-Security-Policy:

default-src 'none'; 
script-src 'self' 'nonce-NjJjN2E5YjA0ZDJhNDlhZjlhMDFmZjQzMjE4YzhmMTAzOWNjZjVjMGZjNDIxMWU5YWIyNGMwMTg4NTA3ZmY4OQ=='; 
connect-src 'self' https://vimeo.com; 
img-src 'self'; 
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; 
font-src 'self' https://fonts.gstatic.com; 
media-src 'self' http://player.vimeo.com; 
frame-src 'self' http://player.vimeo.com;

Мне не нравится устанавливать script-src как unsafe-inline, поскольку он отменяет использование Content-Security-Policy

Answer 1

Ваш CSP блокирует встроенный обработчик событий в вашем HTML-коде, например <button onclick="myFunction()">Click me</button>.

Встроенные обработчики событий являются плохой практикой (в основном потому, что они встроенные). См. этот ответ для понимания.

Nonce , похоже, не работает со встроенными обработчиками событий . Поэтому лучше всего заменить этот обработчик события на соответствующий, записанный в вашем файле JS. Если вы не можете этого сделать, попробуйте добавить 'unsafe-hashes' к вашим script-src.

Престижность за отклонение 'unsafe-inline', это ярлык, который мы видим слишком часто, в том числе в производстве.