Безопасность - это сложно, но оно того стоит!

Я работаю над переносом личного расширения Chrome на React, и мне не понравилось, что браузер поддерживает политику безопасности контента. По умолчанию Webpack генерирует то, что он называет «фрагментом времени выполнения», во встроенном элементе script в файле index.html. Однако Chrome применяет политику безопасности содержимого по умолчанию script-src ‘self', запрещающую встроенные скрипты.

Пытаясь исправить это, я прочитал о Политике безопасности контента и различных вариантах, включая unsafe-inline, что было действительно заманчиво! К сожалению (но на самом деле, вероятно, к лучшему), однако, оказывается, что Chrome не допускает небезопасных встроенных скриптов в расширениях.

Итак, у меня осталось несколько вариантов:

  1. Обновите политику безопасности контента, чтобы разрешить хешированные встроенные скрипты, или
  2. Удалите фрагмент времени выполнения из index.html и вместо этого загрузите его с <script src="" ....

Оба выглядят интересно. Я обнаружил эту проблему относительно №1 и пошел по кроличьей норе, ища способы добавить в Webpack обработчик после сборки, чтобы удалить или добавить хэш к элементу скрипта. (Этот кладж, вероятно, лучшая версия, которую я видел.) И какое-то время команда Create React App использовала развлекательные возможности, чтобы упростить такую ​​модификацию после сборки. Но все это выглядело немного болезненно, поэтому я продолжал читать, надеясь на лучшее.

Прочитав # 5144 немного более внимательно, я увидел, что теперь они также выделяют фрагмент времени выполнения в отдельный файл, так что вы можете заменить встроенную версию исходным сценарием. И на этот вопрос ссылались из №5309, где есть более подробное обсуждение вопроса. И, наконец, внизу этой проблемы есть ссылка на PR # 5354, где есть решение! На сборку потребовалось немного больше времени, но оказывается, что вы можете добавить файл .env в каталог вашего проекта с назначением переменных среды, и Webpack будет учитывать их во время сборки. А если вы установите в этом файле переменную INLINE_RUNTIME_CHUNK=false, она заменит встроенный блок времени выполнения на элемент <script src="..."></script>, удобный для политик безопасности контента.

И теперь мое расширение работает - и это не XSS-уязвимость, ожидающая своего часа!