Включение COUP / COES, не касаясь сервера

Или как изменять закладки безопасности клиента.

С момента довольно впечатляющего Расплавление и призрак Атаки, поставщики браузера должны были зажим на общей памяти и таймерам высокого разрешения. Хотя это удобно означает, что случайный пользователь не должен работать о Phantom Trolleys Это может быть раздражающее ограничение для разработчика. Некоторые API получили ограниченный , в то время как другие были полностью отключены, если не делает немного танца, чтобы успокоить веб-браузер.

Это означает, что определенные веб-приложения имеют дополнительное препятствие для преодоления.

Несколько примеров веб-приложений, которые имеют эту проблему, в браузерах видео преобразователи, используя ffmpeg.wasm , на основе веб-сайта Ноутбук, поддерживающий Python и многопоточные приложения Emscripten .

Эта проблема

Следующие API недоступны по умолчанию

SharedArrayBuffer
Атома

Чтобы повторно включить их, сайт должен быть подан через HTTPS ^[1] и два заголовки должны быть установлены. Заголовки, которые должны быть установлены на стороне сервера ^[2] , являются

Политика перекрестных происхождений: однородное происхождение
Политика в субтериале с перекрестным происхождением: требуется-корпус

Это может быть довольно вызовом по ряду причин. Не всегда прогулка в парке для разработчика Frontend контролирует заголовки, которые отправляет бэкэнда. Приложения статического интерфейса становятся все более распространенными. Довольно распространено, что используется CDN, который просто не поддерживает настройки пользовательских заголовков HTTP. Я лично нужно было решение, как я развернул Интернет-система компьютерной алгебры на страницах GitHub.

Наконец, отметить, что эти заголовки налагают некоторые дополнительные ограничения. Основной это то, что Политика с перекрестным происхождением-политикой Заголовок затрудняет загрузку ресурсов перекрестного происхождения.

[1] или быть на localhost, поскольку требование заключается в том, что документ должен быть в Безопасный контекст

[2] Эти заголовки не могут быть установлены с использованием , как они не включены в белый .

Что, если я не могу настроить заголовки себя?

Сервисники на спасение!

Оказывается, что между сервером есть то, что находится между сервером, обслуживающим веб-страницу и Frontend JavaScript. Работники обслуживания могут перехватывать все запросы, изменить ответы и даже установить произвольные заголовки HTTP.

Во-первых, мы регистрируем наш сервисный работник в файле JavaScript, который загружается, как только на сайт загружается сайт. Чтобы убедиться, что сервисный работник может перехватить все запросы, мы должны перезагрузить страницу.

// main.js
if ("serviceWorker" in navigator) {
  // Register service worker
  navigator.serviceWorker.register(new URL("./sw.js", import.meta.url)).then(
    function (registration) {
      console.log("COOP/COEP Service Worker registered", registration.scope);
      // If the registration is active, but it's not controlling the page
      if (registration.active && !navigator.serviceWorker.controller) {
          window.location.reload();
      }
    },
    function (err) {
      console.log("COOP/COEP Service Worker failed to register", err);
    }
  );
} else {
  console.warn("Cannot register a service worker");
}

Затем поместите сервисный работник прямо рядом со скриптом выше и назовите его SW.JS Отказ Важная часть заключается в том, что каждый раз извлекать Слушатель событий вызывается, мы заменяем ответ с одним, где настроены заголовки Coop/Cue. Все остальные части являются необязательными.

Убедитесь, что сервисный работник подается из самого верхнего каталога, прямо там, где index.html сайта есть. Это гарантирует, что объем сервисного работника включает в себя все файлы на вашем сайте.

// sw.js
self.addEventListener("install", function () {
  self.skipWaiting();
});

self.addEventListener("activate", (event) => {
  event.waitUntil(self.clients.claim());
});

self.addEventListener("fetch", function (event) {
  if (event.request.cache === "only-if-cached" && event.request.mode !== "same-origin") {
    return;
  }

  event.respondWith(
    fetch(event.request)
      .then(function (response) {
        // It seems like we only need to set the headers for index.html
        // If you want to be on the safe side, comment this out
        // if (!response.url.includes("index.html")) return response;

        const newHeaders = new Headers(response.headers);
        newHeaders.set("Cross-Origin-Embedder-Policy", "require-corp");
        newHeaders.set("Cross-Origin-Opener-Policy", "same-origin");

        const moddedResponse = new Response(response.body, {
          status: response.status,
          statusText: response.statusText,
          headers: newHeaders,
        });

        return moddedResponse;
      })
      .catch(function (e) {
        console.error(e);
      })
  );
});

Что это заканчивается, это

Когда страница впервые загружается, мы регистрируем работник
Затем мы перезагружаем страницу
и, наконец, теперь, когда работник контролирует все, каждый запрос теперь будет иметь соответствующие заголовки

Я вполне могу рекомендовать использовать COI-ServiceWorker Библиотека , который основан на этом посте и делает именно то, что нужно.

Конечно, идеальное решение все равно для установки сторон сервера заголовков.

Проблема безопасности?

Нет, я сомневаюсь в этом. Есть Test W3C за это. Это способ выбора в дополнительные ограничения безопасности на вашем сайте.

Выбирая с тем же подходом не работает.

После добавления заголовка CueP вы не сможете обойти ограничение с использованием работников обслуживания. Если документ защищен заголовком CEEP, политика уважается до того, как ответ вступает в процесс документа, или до того, как он поступает в сервисный работник, который контролирует документ.

— https://web.dev/why-coop-coep/

Оригинал: “https://dev.to/stefnotch/enabling-coop-coep-without-touching-the-server-2d3n”

Эта проблема

Что, если я не могу настроить заголовки себя?

Проблема безопасности?

Читайте ещё по теме: