Связанный скрипт jQuery из CDN Cloudflare выдает ошибку CSP в консоли при «подключении» underscore-min.js

Для тех, кто не может найти решение, я выделил проблему, связанную с тем, как FireFox в настоящее время обрабатывает атрибут rel = "preload". Мягко говоря, это не очень хорошо, и я полагаю, что то же самое с Edge.

TL;DR: Не используйте rel = "preload" до тех пор, пока он не будет унифицирован во всех основных браузерах. Кроме того, мой вопрос касался использования jQuery из CDN CloudFlare, а цель CDN состоит в том, чтобы посетители не могли (бессмысленно) загружать один и тот же контент снова и снова. Другими словами, rel = "preload" не только ведет себя по-разному между флагманскими браузерами, но и является излишним, поскольку суть CDN заключается в том, что посетитель будет иметь уже скачал данный файл(ы) при посещении предыдущих веб-сайтов, которые также используют тот же файл из той же CDN.

кликните сюда, чтобы просмотреть обзор текущей поддержки браузерами rel = "preload".

Результаты

Chrome и, возможно, другие браузеры обрабатывают ресурсы для предварительной загрузки (более) правильно, хотя в целом нам не хватает инструментов и документации о том, как приступить к работе с CSP правильно, и, надеюсь, этот ответ даст некоторое представление другим, которые относительно новичок в CSP, как и я.

При устранении неполадок в правилах CSP я обнаружил ряд проблем. Одним из них является то, что соединение атрибута as с подсказкой типа может работать против вас с текущими реализациями браузера CSP. Например, я пытался загрузить шрифт Google с as = "font", который, если я правильно помню, вызывал дополнительные головные боли, пока вместо него не был установлен as = "style". Что я понял (пожалуйста, отредактируйте этот ответ, если вы можете подтвердить обратное), так это то, что связанный ресурс действительно является таблицей стилей, а не файлом шрифта.

Еще один странный момент, с которым я столкнулся, заключается в том, что когда вы предварительно загружаете ресурс, вы должны фактически «инициализировать» данный ресурс после его загрузки. Таким образом, вы можете либо клонировать элемент <link> с желаемым rel = "stylesheet/script/etc" (что прямо противоречит принципу DRY), либо прикрепить событие загрузки к элементу <link> (что не противоречит DRY, но делает кажется довольно архаичным). .На дворе 2019 год! Почему наш браузер не может сделать это за нас? Или, возможно, мы могли бы добавить в браузер поддержку чего-то вроде атрибута append = "true", который бы автоматически и изящно обрабатывал это за нас).

Я уберу следующий абзац и фрагмент кода из следующий проект GitHub, чтобы лучше объяснить «решение» onload (которое нет работает в FireFox из-за ошибок CSP, которые я задокументировал в этом вопросе):

In browsers that support it, the rel=preload attribute will cause the browser to fetch the stylesheet, but it will not apply the CSS once it is loaded (it merely fetches it). To address this, we recommend using an onload attribute on the link that will apply the CSS when it finishes loading.

<link rel = "preload" href = "path/to/mystylesheet.css" as = "style" onload = "this.rel='stylesheet'">

Как уже говорилось, это кажется очень архаичным. Нам не нужно выбирать между избыточным и архаичным кодом.

Я упомянул, что Chrome, похоже, имеет лучшую производственную реализацию CSP, но есть еще над чем поработать. Кроме того, причина, по которой я оказался в этой дикой охоте на ведьм, заключалась (естественно) в том, что я работал над улучшением скорости и производительности веб-сайта, поэтому я использовал инструмент Lightouse / Audit Chrome Inspector. Что ж, из всех проведенных мной тестов выяснилось, что ресурсы, которые, как мы должны ожидать, уже кэшированы на клиентском компьютере (Bootstrap, jQuery, Google Fonts и т. д.), очищаются перед выполнением аудита и повторно загружаются для учета. в сформированном отчете. Это нормально (я понимаю, что это желаемое поведение); однако, если бы у нас в качестве разработчиков был радиобокс для отменить очистки общих ресурсов через CDN при выполнении наших аудитов, я полагаю, что разработчик получил бы дополнительный уровень понимания производительности своего веб-сайта. Или хотя бы дифференцировать в отчете, чтобы точно показать, сколько времени было потрачено на загрузку и инициализацию связанных ресурсов.

Эти зависимости не ограничиваются rel = "preload". При устранении неполадок я в некоторых случаях пробовал использовать альтернативные значения, такие как rel = "connect", для первого ресурса, на который я ссылался через CDN CloudFlare. При проведении исследований по теме я нашел следующая статья с такой информацией:

The final resource hint we want to talk about is preconnect. Preconnect allows the browser to setup early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for users.

“Preconnect is an important tool in your optimization toolbox… it can eliminate many costly roundtrips from your request path - in some cases reducing the request latency by hundreds and even thousands of milliseconds. - Ilya Grigorik”

Но, что неудивительно, preconnect работает так же в браузерах, которые не поддерживают preload. И легко все это перепутать, если вы думаете, что проблема связана с вашими правилами CSP, а не с вашей разметкой.

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