Пробная версия Origin для поддержки HTTP-заголовков в Storage Access

Natalia Markoborodova

Chrome начинает пробное добавление HTTP-заголовков к API доступа к хранилищу (SAA) в версии 130: Заголовки доступа к хранилищу . Новые заголовки запроса Sec-Fetch-Storage-Access и ответа Activate-Storage-Access призваны поддерживать ресурсы, не являющиеся iframe, и улучшить производительность и пользовательский опыт для веб-сайтов, использующих встроенный контент, такой как виджеты социальных сетей, календари и интерактивные инструменты.

JavaScript flow (и его ограничения)

Ранее SAA требовал вызова метода document.requestStorageAccess() через JavaScript API при каждой перезагрузке страницы, даже если пользователь уже предоставил разрешение. Хотя этот метод эффективен, он имеет свои ограничения:

• Многократные сетевые запросы: Этот процесс часто включал в себя несколько сетевых запросов и перезагрузку страниц, прежде чем встроенный контент мог полноценно функционировать.
• Зависимость от iframe: выполнение JavaScript-кода требовало использования iframe-элементов или подресурсов внутри iframe-элементов, что ограничивало гибкость для разработчиков.

Например, виджет календаря из calendar.example , встроенный в website.example с использованием только JavaScript, будет выглядеть так:

1. Загрузка плейсхолдера: website.example запрашивает виджет. Поскольку виджет calendar.example , встроенный в website.example , не имеет доступа к своим неразделённым куки, вместо него отображается виджет-плейсхолдер.
2. Запрос разрешения: Заполняется плейсхолдер, затем вызывается метод document.requestStorageAccess() для запроса разрешения storage-access .
3. Пользователь решает предоставить разрешение .
4. Перезагрузка виджета: виджет обновляется, на этот раз с доступом к cookie-файлам, и, наконец, загружает персонализированный контент.
5. Каждый раз, когда пользователь снова посещает сайт, на котором встроен виджет calendar.example , процесс выглядит точно так же, как на шагах 1, 2 и 4 ; единственное упрощение заключается в том, что пользователю не нужно повторно предоставлять доступ.

Такой подход неэффективен: если пользователь уже предоставил разрешение на доступ к хранилищу, первоначальная загрузка iframe, вызов document.requestStorageAccess() и последующая перезагрузка становятся ненужными и создают задержку.

Новый алгоритм работы с HTTP-заголовками

Новые заголовки доступа к хранилищу позволяют более эффективно загружать встроенный контент, включая ресурсы, не являющиеся iframe.

При использовании заголовков доступа к хранилищу браузер автоматически получит ресурсы с заголовком запроса Sec-Fetch-Storage-Access: inactive , если пользователь уже предоставил разрешение. Для установки заголовка запроса не требуется никаких действий со стороны разработчика. Сервер может ответить заголовком Activate-Storage-Access: retry; allowed-origin="<origin>" , и браузер повторит запрос с необходимыми учетными данными.

Заголовок запроса

Sec-Fetch-Storage-Access: <access-status>

Когда пользователь посещает страницу, содержащую встроенный контент, браузер автоматически включает заголовок Sec-Fetch-Storage-Access в межсайтовые запросы, которые могут потребовать учетных данных (например, cookie). Этот заголовок указывает на статус разрешения на доступ к cookie для встроенного контента. Вот как интерпретировать его значения:

• none : встроенный компонент не имеет разрешения storage-access и, следовательно, не имеет доступа к неразделённым файлам cookie.
• inactive : встроенный элемент имеет разрешение storage-access , но не дал согласия на его использование. Встроенный элемент не имеет доступа к неразделенным cookie-файлам.
• active : встроенный элемент имеет доступ к неразделенным файлам cookie. Это значение будет включено во все междоменные запросы, имеющие доступ к неразделенным файлам cookie.

Заголовки ответа

Activate-Storage-Access: <retry-or-reload>

Заголовок Activate-Storage-Access указывает браузеру либо повторить запрос с использованием cookie-файлов, либо загрузить ресурс напрямую с активированным SAA. Заголовок может принимать следующие значения:

• load : указывает браузеру предоставить встраиваемому ресурсу доступ к неразделённым файлам cookie для запрошенного ресурса.
• retry : сервер отвечает, что браузер должен активировать разрешение на доступ к хранилищу, после чего следует повторить запрос.

Activate-Storage-Access: retry; allowed-origin="https://site.example"
Activate-Storage-Access: retry; allowed-origin=*
Activate-Storage-Access: load

Поддержка ресурсов, не являющихся iframe.

Обновление заголовков доступа к хранилищу (Storage Access Headers, SAA) включает SAA для контента, не встроенного в iframe, например, изображений, размещенных на другом домене. Ранее ни один API веб-платформы не позволял загружать такие ресурсы с использованием учетных данных в браузерах, если сторонние файлы cookie недоступны. Например, ваш embedding-site.example может запросить изображение:

   <img src="https://server.example/image"/>

В зависимости от наличия cookie-файла сервер может ответить либо содержимым, либо сообщением об ошибке:

app.get('/image', (req, res) => {
  const headers = req.headers;
  const cookieHeader = headers.cookie;
  // Check if the embed has the necessary cookie access
  if (!cookieHeader || !cookieHeader.includes('foo')) {
  // If the cookie is not present, check if the browser supports Storage Access headers
    if (
      'sec-fetch-storage-access' in headers &&
      headers['sec-fetch-storage-access'] == 'inactive'
    ) {
    // If the browser supports Storage Access API, retry the request with storage access enabled
      res.setHeader('Activate-Storage-Access', 'retry; allowed-origin="https://embedding-site.example"');
    }
    res.status(401).send('No cookie!');
   } else {
    // If the cookie is available, check if the user is authorized to access the image
    if (!check_authorization(cookieHeader)) {
      return res.status(401).send('Unauthorized!');
    }
    // If the user is authorized, respond with the image file
    res.sendFile("path/to/image.jpeg");
  }
});

Если cookie-файл недоступен, сервер проверяет значение заголовка запроса Sec-Fetch-Storage-Access . Если это значение установлено на inactive , сервер отвечает заголовком Activate-Storage-Access: retry , указывая, что запрос следует повторить с доступом к хранилищу. Если cookie-файл отсутствует и заголовок Sec-Fetch-Storage-Access не имеет значения inactive, изображение не загрузится.

Поток HTTP-заголовков

Благодаря HTTP-заголовкам браузер может определить, предоставил ли пользователь виджету разрешение на доступ к хранилищу, и загрузить iframe с доступом к неразделённым файлам cookie при последующих посещениях.

При использовании заголовков доступа к хранилищу (Storage Access Headers) последующие посещения страниц будут запускать следующий алгоритм действий:

1. Пользователь посещает website.example , на котором снова встроен calendar.example . В этот раз доступ к cookie-файлу отсутствует, как и раньше. Однако пользователь ранее предоставил разрешение storage-access , и запрос включает заголовок Sec-Fetch-Storage-Access: inactive , указывающий на то, что доступ к неразделённому cookie-файлу доступен, но не используется.
2. Сервер calendar.example отвечает заголовком Activate-Storage-Access: retry; allowed-origin="<origin>" (в данном случае <origin> будет https://website.example ), указывающим на то, что для получения ресурса требуется использование неразделенных файлов cookie с разрешением на доступ к хранилищу.
3. Браузер повторяет запрос, на этот раз включая неразделенные файлы cookie (активируя разрешение storage-access для этой операции).
4. Сервер calendar.example отвечает персонализированным содержимым iframe. Ответ включает заголовок Activate-Storage-Access: load , указывающий на то, что браузер должен загрузить контент с активированным разрешением storage-access (другими словами, загрузить с неразделенным доступом к cookie, как если бы был вызван document.requestStorageAccess() ).
5. Агент пользователя загружает содержимое iframe с доступом к файлам cookie без разделения на разделы, используя разрешение на доступ к хранилищу. После этого шага виджет может работать должным образом.

Обновите ваше решение

При использовании функции «Заголовки доступа к хранилищу» вам может потребоваться обновить код в двух случаях:

1. Вы используете SAA и хотите добиться повышения производительности за счет оптимизации логики заголовков.
2. У вас есть проверка или логика, которая зависит от того, включен ли заголовок Origin в запрос на вашем сервере.

Реализуйте логику заголовков SAA.

Для использования заголовков доступа к хранилищу в вашем решении необходимо обновить его. Предположим, вы являетесь владельцем calendar.example . Чтобы website.example мог загрузить персонализированный виджет calendar.example , код виджета должен иметь доступ к хранилищу.

На стороне клиента

Функция заголовков доступа к хранилищу (Storage Access Headers, SAA) не требует обновления кода на стороне клиента для существующих решений. Ознакомьтесь с документацией, чтобы узнать, как реализовать SAA .

на стороне сервера

На стороне сервера можно использовать новые заголовки:

app.get('/cookie-access-endpoint', (req, res) => {
  const storageAccessHeader = req.headers['sec-fetch-storage-access'];

  if (storageAccessHeader === 'inactive') {
    // User needs to grant permission, trigger a prompt
    if (!validate_origin(req.headers.origin)) {
      res.status(401).send(`${req.headers.origin} is not allowed to send` +
          ' credentialed requests to this server.');
      return;
    }
    res.set('Activate-Storage-Access', `retry; allowed-origin="${req.headers.origin}"`);
    res.status(401).send('This resource requires storage access. Please grant permission.');
  } else if (storageAccessHeader === 'active') {
    // User has granted permission, proceed with access
    res.set('Activate-Storage-Access', 'load');
    // Include the actual iframe content here
    res.send('This is the content that requires cookie access.');
  } else {
    // Handle other cases (e.g., 'Sec-Fetch-Storage-Access': 'none')
  }
});

Посмотрите демоверсию , чтобы увидеть, как это решение работает на практике.

Обновите логику заголовка Origin.

Благодаря использованию заголовков доступа к хранилищу (Storage Access Headers), Chrome отправляет заголовок Origin в большем количестве запросов, чем раньше. Это может повлиять на логику на стороне сервера, если она полагается на наличие заголовка Origin только для определенных типов запросов (например, определенных CORS).

Во избежание потенциальных проблем вам необходимо проверить свой серверный код:

• Проверьте наличие каких-либо проверок или логических операций, зависящих от наличия заголовка Origin .
• Обновите свой код, чтобы он обрабатывал наличие заголовка Origin в большем количестве случаев.

Основные преимущества

Использование заголовков доступа к хранилищу (Storage Access Headers, SAA) — это рекомендуемый, более производительный способ применения SAA. В целом, это изменение вносит ряд улучшений:

• Поддержка встраивания контента, отличного от iframe: включает SAA для более широкого спектра ресурсов.
• Снижение нагрузки на сеть: меньше запросов и меньший объем передаваемых данных.
• Сниженное использование ЦП: Меньше обработки JavaScript.
• Улучшен пользовательский опыт: устранены промежуточные загрузки, нарушающие работу системы.

Примите участие в исследовании происхождения.

Пробные версии Origin позволяют опробовать новые функции и оставить отзыв об их удобстве использования, практичности и эффективности. Для получения дополнительной информации ознакомьтесь с разделом «Начало работы с пробными версиями Origin» .

Вы можете опробовать функцию заголовков доступа к хранилищу (Storage Access Headers), зарегистрировавшись для участия в пробных версиях Chrome, начиная с Chrome 130. Для участия в пробной версии:

1. Перейдите на страницу регистрации пробной версии Storage Access Headers origin.
2. Следуйте инструкциям по участию в первоначальном исследовании.

Протестируйте локально.

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

Выполните следующие шаги для настройки вашего экземпляра Chrome:

1. Включите флаг Chrome по chrome://flags/#storage-access-headers .
2. Перезапустите Chrome, чтобы изменения вступили в силу.

Принимайте участие и делитесь отзывами.

Если у вас есть замечания или вы столкнулись с какими-либо проблемами, вы можете сообщить о них, создав заявку . Вы также можете узнать больше о заголовках доступа к хранилищу (Storage Access Headers) в пояснительной статье на GitHub .