Как использовать React без небезопасного встроенного кода JavaScript / CSS? - PullRequest
3 голосов
/ 14 марта 2019

Фон

Я должен использовать Политика безопасности контента для реагирующего приложения.

Причина, которая, однако, здесь не имеет большого значения, заключается в том, что я создаю расширение / расширение для WebExtension / Browser, и у них действительно есть такая политика безопасности содержимого ,и такие вещи, как 'unsafe-eval' и 'unsafe-inline', строго запрещены :

с расширениями unsafe-eval, unsafe-inline, удаленным сценарием, BLOB-объектами илиудаленные источники в их CSP не допускаются для расширений, перечисленных на addons.mozilla.org из-за серьезных проблем с безопасностью.

Я создал приложение с create-react-app, следуя этому руководству .Цель состоит в том, чтобы иметь возможность использовать реакцию там со стандартным CSP WebExtensions или, по крайней мере, только незначительные корректировки.

Однако обратите внимание, что (такие строгие) На самом деле CSP также следует использовать на «обычных» веб-сайтах из соображений безопасности, поэтому этот вопрос не * * для разработчиков дополнений.

Проблема

Нокогда я запускаю npm run build, сгенерированный index.html содержит более чем достаточно встроенного кода JS .

Вопрос

Так как я могу настроить / использовать реагировать, чтобы не делатьэто и ...

  1. либо вместо этого поместить весь код JS / CSS в отдельные файлы?
  2. , либо добавить существительные или что-то еще, что позволяют CSP?
  3. или решитьэта проблема похожим образом?

Edit

На самом деле, похоже, что версия для разработки (созданная при запуске npm start) не имеет таких сокращений.Поэтому я задал отдельный вопрос о том, как получить файлы оттуда: Как создать рабочую версию React без минификации?

1 Ответ

3 голосов
/ 20 марта 2019

На самом деле благодаря @ heyimalex Я нашел очень простой ответ на мою проблему.Просто запустите скрипт сборки следующим образом:

INLINE_RUNTIME_CHUNK=false npm run build

После этого он должен быть CSP-совместимым.

...