Modernizr вызывает ошибки нарушения политики безопасности контента (CSP)

Я пытаюсь использовать новые HTTP-заголовки Content Security Policy (CSP) на тестовом сайте. Когда я использую CSP вместе с Modernizr, я получаю ошибки нарушения CSP. Я использую эту политику CSP:

Content-Security-Policy: default-src 'self'; script-src 'self' ajax.googleapis.com ajax.aspnetcdn.com; style-src 'сам'; img-src 'сам'; font-src 'сам'; report-uri /WebResource.axd?cspReport=true

Это ошибки из консоли браузера Chrome:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'". 
Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

window.Modernizr.injectElementWithStyles   - modernizr-2.7.2.js:134
window.Modernizr.tests.touch               - modernizr-2.7.2.js:457(anonymous function)
modernizr-2.7.2.js:949(anonymous function) - modernizr-2.7.2.js:1406

Я обнаружил следующий обходной путь на сайте Github Modernizr. Тем не менее, обходной путь был впервые предложен в марте, и, немного погуглив, я не могу найти никаких исправлений или обходных путей для этой проблемы.

Я знаю, что могу включить директиву unsafe-inline, которая может обойти эту ошибку, но это также позволяет запускать небезопасный код и в первую очередь исключает использование CSP. У кого-нибудь есть решения?

Обновление - что такое CSP

CSP - это HTTP-заголовок, поддерживаемый всеми основными браузерами (включая Edge). По сути, это белый список контента, который браузеру разрешено использовать для отображения страницы. Узнайте больше здесь или прочтите документацию Mozilla для CSP здесь и здесь.

Обновление - выделите CSP

CSP теперь доступен во всех браузерах (Edge добавил поддержку, ура!), И это огромный шаг вперед в веб-безопасность. Для тех, кто заинтересован в получении дополнительной поддержки CSP от третьих лиц, см. Эти материалы:

  1. Поддержка Modernizr для CSP
  2. Поддержка Visual Studio для CSP. Обратите внимание, что ссылка в браузере не работает, если у вас включен CSP, поскольку он использует встроенный JavaScript.
  3. Расширение Visual Studio Web Essentials поддержка CSP. Web Essentials - это надстройка Visual Studio, функции которой часто попадают в следующую версию Visual Studio.

javascript content-security-policy modernizr
person Muhammad Rehan Saeed    schedule 23.10.2014    source источник
comment
Зачем соглашаться на блокировку функции, а затем возникать проблема с библиотекой, использующей эту функцию?   -  person dandavis    schedule 13.01.2015
comment
Блокируемая функциональность - это встроенный CSS и JavaScript, которые могут вызвать уязвимости системы безопасности. Совершенно нормально использовать отдельные файлы CSS и JavaScript. Modernizr использует технологию in-lining для проведения своих испытаний. Он также мог бы работать, если бы он предоставлял отдельные файлы. Для более глубокого понимания CSP я рекомендую прочитать developer.mozilla. org / en-US / docs / Web / Security / CSP / и developer.mozilla.org/en-US/docs/Web/Security/CSP   -  person Muhammad Rehan Saeed    schedule 13.01.2015
comment
Вау, это полный отказ от Modenizr в безопасных средах.   -  person Keith    schedule 12.02.2015
comment
@Keith Если вы так считаете (как и я), тогда проголосуйте или прокомментируйте перечисленные статьи, чтобы повысить осведомленность о CSP.   -  person Muhammad Rehan Saeed    schedule 12.02.2015
comment
Удивительно, как мы сейчас находимся в 2020 году (6 ЛЕТ спустя), и modernizr не встроил соглашения для работы с растущим числом производственных площадок, использующих CSP. unsafe-inline НЕ является решением. Ужасно, что заставляет нас полностью исключить modernizr из рабочего процесса. Мы не можем беспокоиться о том, чтобы все время чинить чужое дерьмо.   -  person IncredibleHat    schedule 12.06.2020

Ответы (2)


arrow_upward
5
arrow_downward

Я подозреваю, что нет другого решения, кроме как переписать те части Modernizr, которые используют встроенный код или динамически оцениваемый код (который применяется как к JS, так и к CSS). Здесь может быть полезен опыт использования AngularJS ngCsp.

person kravietz    schedule 24.10.2014

arrow_upward
-1
arrow_downward

Я нашел исправление без использования unsafe-inline.

Вы можете изменить неминимизированный Modernizr в одной строке:

fakeBody = body || document.createElement('body');

преобразовать в

fakeBody = document.createElement('body');

работает в IE9, Firefox и Chrome.

person hotfingers    schedule 31.03.2015