Chrome dejará de admitir cookies de terceros para reducir el seguimiento entre sitios. Esto plantea un desafío para los sitios y servicios que dependen de cookies en contextos incorporados para los recorridos de los usuarios, como la autenticación. La API de Storage Access (SAA) permite que estos casos de uso sigan funcionando y, al mismo tiempo, limita el seguimiento entre sitios tanto como sea posible.
Estado de implementación
La API de Storage Access está disponible en todos los navegadores principales, pero existen leves diferencias de implementación entre ellos. Estas diferencias se destacan en las secciones relevantes de esta publicación.
Se continúa trabajando para resolver todos los problemas de bloqueo restantes, antes de estandarizar la API.
¿Qué es la API de Storage Access?
La API de Storage Access es una API de JavaScript que permite que los iframes soliciten permisos de acceso al almacenamiento cuando la configuración del navegador lo denegaría. Las incorporaciones con casos de uso que dependen de la carga de recursos entre sitios pueden usar la API para solicitar permiso de acceso al usuario, según sea necesario.
Si se otorga la solicitud de almacenamiento, el iframe tendrá acceso a sus cookies entre sitios, que también están disponibles cuando los usuarios lo visitan como un sitio de nivel superior.
La API de Storage Access permite proporcionar acceso a cookies específicas entre sitios con una carga mínima para el usuario final y, al mismo tiempo, evita el acceso de cookies genéricas entre sitios como se suele usar para el seguimiento de usuarios.
Casos de uso
Algunas incorporaciones de terceros requieren acceso a cookies entre sitios para proporcionarle una mejor experiencia al usuario. Esto no estará disponible una vez que las cookies de terceros dejen de estar disponibles.
En los casos de uso, se incluye lo siguiente:
- Widgets de comentarios integrados que requieren detalles de sesión de acceso.
- Botones "Me gusta" de redes sociales que requieren detalles de sesión de acceso
- Documentos incorporados que requieren detalles de sesión de acceso
- Una experiencia premium que se proporciona a una incorporación de video (por ejemplo, para no mostrar anuncios a los usuarios que accedieron a sus cuentas, conocer las preferencias de los usuarios con respecto a los subtítulos ni restringir ciertos tipos de videos)
- Sistemas de pago incorporados
Muchos de estos casos de uso implican un acceso persistente en iframes incorporados.
Cuándo usar la API de Storage Access en lugar de otras APIs
La API de Storage Access es una de las alternativas al uso de cookies de terceros, por lo que es importante comprender cuándo usar esta API en comparación con otras. Está diseñada para casos de uso en los que se cumple lo siguiente:
- El usuario interactuará con el contenido incorporado, es decir, no es un iframe pasivo ni un iframe oculto.
- El usuario visitó el origen incorporado en un contexto de nivel superior, es decir, cuando ese origen no está incorporado en otro sitio.
Existen APIs alternativas para una variedad de casos de uso:
- Las cookies con estado particionado independiente (CHIPS) permiten a los desarrolladores habilitar una cookie en el almacenamiento "particionado", con un jar de cookies independiente por sitio de nivel superior. Por ejemplo, un widget de chat web de terceros puede depender de la configuración de una cookie para guardar la información de la sesión. La información de la sesión se guarda por sitio, por lo que no es necesario acceder a la cookie que establece el widget en otros sitios web en los que también está incorporada. La API de Storage Access es útil cuando un widget incorporado de terceros depende de compartir la misma información en diferentes orígenes (por ejemplo, para los detalles o las preferencias de la sesión de acceso).
- Los conjuntos de sitios web relacionados (RWS) permiten que una organización declare relaciones entre sitios, de modo que los navegadores permitan un acceso limitado a las cookies de terceros para fines específicos. Los sitios igualmente deben solicitar acceso con la API de Storage Access, pero para los sitios dentro del conjunto, se puede otorgar acceso sin indicaciones del usuario.
- La Administración de credenciales federadas (FedCM) es un enfoque que preserva la privacidad de los servicios de identidad federada. La API de Storage Access se encarga de acceder a las cookies después del acceso. Para algunos casos de uso, FedCM proporciona una solución alternativa a la API de Storage Access y puede ser preferible, ya que presenta un mensaje en el navegador más orientado al acceso. Sin embargo, adoptar FedCM suele requerir cambios adicionales en el código; por ejemplo, para admitir sus extremos HTTP.
- También existen APIs de antifraude, relacionadas con anuncios y de medición, y la API de Storage Access no está diseñada para abordar esas inquietudes.
Usa la API de Storage Access
La API de Storage Access tiene dos métodos basados en promesas:
También se integra en la API de Permissions. Esto te permite verificar el estado del permiso de acceso al almacenamiento en un contexto de terceros, lo que indica si se otorgaría automáticamente una llamada a document.requestStorageAccess():
Usa el método hasStorageAccess()
Cuando un sitio se carga por primera vez, puede usar el método hasStorageAccess() para comprobar si ya se otorgó acceso a las cookies de terceros.
// Set a hasAccess boolean variable which defaults to false.
let hasAccess = false;
async function handleCookieAccessInit() {
if (!document.hasStorageAccess) {
// Storage Access API is not supported so best we can do is
// hope it's an older browser that doesn't block 3P cookies.
hasAccess = true;
} else {
// Check whether access has been granted via the Storage Access API.
// Note on page load this will always be false initially so we could be
// skipped in this example, but including for completeness for when this
// is not so obvious.
hasAccess = await document.hasStorageAccess();
if (!hasAccess) {
// Handle the lack of access (covered later)
}
}
if (hasAccess) {
// Use the cookies.
}
}
handleCookieAccessInit();
Solo se otorga acceso al almacenamiento a un documento de iframe después de que llama a requestStorageAccess(),, por lo que, en un principio, hasStorageAccess() siempre mostrará el valor "false", excepto cuando ya se haya otorgado acceso a otro documento del mismo origen en el mismo iframe. La concesión se mantiene en las navegaciones del mismo origen dentro del iframe para permitir actualizaciones después de otorgar acceso a las páginas que requieren cookies en la solicitud inicial del documento HTML.
Usa el método requestStorageAccess()
Si el iframe no tiene acceso, es posible que debas solicitarlo con el método requestStorageAccess():
if (!hasAccess) {
try {
await document.requestStorageAccess();
} catch (err) {
// Access was not granted and it may be gated behind an interaction
return;
}
}
La primera vez que se solicite esto, es posible que el usuario deba aprobar este acceso con un mensaje en el navegador. Después de eso, se resolverá la promesa o se rechazará que genere una excepción si se usa await.
Para evitar abusos, este mensaje del navegador solo se mostrará después de una interacción del usuario. Por este motivo, en un principio, se debe llamar a requestStorageAccess() desde un controlador de eventos activado por el usuario, en lugar de hacerlo inmediatamente mientras se carga el iframe:
async function doClick() {
// Only do this extra check if access hasn't already been given
// based on the hasAccess variable.
if (!hasAccess) {
try {
await document.requestStorageAccess();
hasAccess = true; // Can assume this was true if above did not reject.
} catch (err) {
// Access was not granted.
return;
}
}
if (hasAccess) {
// Use the cookies
}
}
document.querySelector('#my-button').addEventListener('click', doClick);
Mensajes de permisos
Cuando el usuario hace clic en el botón por primera vez, el mensaje del navegador aparecerá automáticamente en la barra de direcciones. A continuación, se muestra un ejemplo de la indicación de Chrome, pero otros navegadores tienen una IU similar:
Es posible que el navegador omita la solicitud y que se otorgue permiso automáticamente en determinadas circunstancias:
- Si la página y el iframe se usaron en los últimos 30 días después de aceptar la solicitud.
- Si el iframe incorporado forma parte de un conjunto de sitios web relacionados
- En Firefox, el mensaje también se omite para los sitios web conocidos (aquellos con los que interactuaste en el nivel superior) durante los primeros cinco intentos.
Como alternativa, el método puede rechazarse automáticamente sin mostrar la solicitud en determinadas circunstancias:
- Si el usuario no visitó ni interactuó con el sitio propietario del iframe como documento de nivel superior, no en un iframe. Esto significa que la API de Storage Access solo es útil para sitios incorporados que los usuarios visitaron anteriormente en un contexto propio.
- Si se llama al método
requestStorageAccess()fuera de un evento de interacción del usuario sin aprobación previa del mensaje después de una interacción.
Si bien se le solicita al usuario el uso inicial, las visitas posteriores pueden resolver requestStorageAccess() sin un mensaje y sin requerir la interacción del usuario en Chrome y Firefox. Ten en cuenta que Safari siempre requiere la interacción del usuario.
Dado que el acceso a las cookies se puede otorgar sin solicitar permiso o interactuar con el usuario, a menudo es posible obtener acceso a las cookies de terceros antes de que el usuario interactúe con estos navegadores (Chrome y Firefox) llamando a requestStorageAccess() cuando se cargue la página. Esto puede permitirte acceder de inmediato a cookies de terceros entre sitios y brindar una experiencia más completa, incluso antes de que el usuario interactúe con el iframe. Esto puede brindar una mejor experiencia del usuario en algunas situaciones en comparación con esperar su interacción.
Usa la consulta de permisos storage-access
Para verificar si se puede otorgar acceso sin una interacción del usuario, puedes verificar el estado del permiso storage-access y solo realizar la llamada a requestStoreAccess() con anticipación si no se requiere ninguna acción del usuario, en lugar de llamarla y hacer que falle cuando se requiera una interacción.
Esto también te permite manejar la necesidad de un mensaje por adelantado mostrando contenido diferente (por ejemplo, un botón de acceso).
El siguiente código agrega la verificación de permisos storage-access al ejemplo anterior:
// Set a hasAccess boolean variable which defaults to false except for
// browsers which don't support the API - where we assume
// such browsers also don't block third-party cookies.
let hasAccess = false;
async function hasCookieAccess() {
// Check if Storage Access API is supported
if (!document.requestStorageAccess) {
// Storage Access API is not supported so best we can do is
// hope it's an older browser that doesn't block 3P cookies.
return true;
}
// Check if access has already been granted
if (await document.hasStorageAccess()) {
return true;
}
// Check the storage-access permission
// Wrap this in a try/catch for browsers that support the
// Storage Access API but not this permission check
// (e.g. Safari and older versions of Firefox).
let permission;
try {
permission = await navigator.permissions.query(
{name: 'storage-access'}
);
} catch (error) {
// storage-access permission not supported. Assume no cookie access.
return false;
}
if (permission) {
if (permission.state === 'granted') {
// Permission has previously been granted so can just call
// requestStorageAccess() without a user interaction and
// it will resolve automatically.
try {
await document.requestStorageAccess();
return true;
} catch (error) {
// This shouldn't really fail if access is granted, but return false
// if it does.
return false;
}
} else if (permission.state === 'prompt') {
// Need to call requestStorageAccess() after a user interaction
// (potentially with a prompt). Can't do anything further here,
// so handle this in the click handler.
return false;
} else if (permission.state === 'denied') {
// Currently not used. See:
// https://github.com/privacycg/storage-access/issues/149
return false;
}
}
// By default return false, though should really be caught by one of above.
return false;
}
async function handleCookieAccessInit() {
hasAccess = await hasCookieAccess();
if (hasAccess) {
// Use the cookies.
}
}
handleCookieAccessInit();
Iframes con zona de pruebas
Cuando usas la API de Storage Access en iframes de la zona de pruebas, se requieren los siguientes permisos de la zona de pruebas:
- Se requiere
allow-storage-access-by-user-activationpara permitir el acceso a la API de Storage Access. allow-scriptses necesario a fin de permitir el uso de JavaScript para llamar a la API.- Se requiere
allow-same-originpara permitir el acceso a cookies del mismo origen y otro tipo de almacenamiento.
Por ejemplo:
<iframe sandbox="allow-storage-access-by-user-activation
allow-scripts
allow-same-origin"
src="..."></iframe>
Requisitos para las cookies
Para que se pueda acceder con la API de Storage Access en Chrome, las cookies entre sitios se deben configurar con los siguientes dos atributos:
SameSite=None, que es obligatorio para marcar la cookie como de varios sitiosSecure, que garantiza que solo se pueda acceder a las cookies establecidas por sitios HTTPS
En Firefox y Safari, el valor predeterminado de las cookies es SameSite=None y no restringen las cookies SSA a Secure, por lo que estos atributos no son obligatorios. Se recomienda ser explícito en el atributo SameSite y usar siempre cookies Secure.
Acceso a la página de nivel superior
La API de Storage Access está diseñada para permitir el acceso a cookies de terceros dentro de iframes incorporados.
También hay otros casos de uso en los que la página de nivel superior requiere acceso a cookies de terceros. Por ejemplo, imágenes o secuencias de comandos que están restringidas por cookies y que los propietarios de los sitios pueden incluir directamente en el documento de nivel superior en lugar de en un iframe. Para abordar este caso de uso, Chrome propuso una extensión para la API de Storage Access que agrega un método requestStorageAccessFor().
El método requestStorageAccessFor()
El método requestStorageAccessFor() funciona de manera similar a requestStorageAccess(), pero para recursos de nivel superior. Solo se puede utilizar en sitios dentro de un conjunto de sitios web relacionados para evitar que se otorgue acceso general a cookies de terceros.
Si deseas obtener más información para usar requestStorageAccessFor(), lee la Guía para desarrolladores sobre Conjuntos de sitios web relacionados.
La consulta de permisos top-level-storage-access
Navegadores compatibles
- 119
- 119
- x
- x
Al igual que el permiso storage-access, hay un permiso top-level-storage-access para verificar si se puede otorgar acceso a requestStorageAccessFor().
¿En qué se diferencia la API de Storage Access cuando se usa con RWS?
Cuando se usan conjuntos de sitios web relacionados con la API de Storage Access, se encuentran disponibles ciertas funciones adicionales, como se detalla en la siguiente tabla:
| Sin RWS | Con RWS | |
|---|---|---|
| Requiere un gesto del usuario para iniciar la solicitud de acceso al almacenamiento | ||
| Requiere que el usuario visite el origen de almacenamiento solicitado en un contexto de nivel superior antes de otorgar acceso. | ||
| Se puede omitir la solicitud inicial del usuario | ||
No es necesario llamar a requestStorageAccess si el acceso ya se otorgó. |
||
| Otorga acceso automáticamente para otros dominios en un sitio de sitio web relacionado | ||
Admite requestStorageAccessFor para el acceso a páginas de nivel superior |
Demostración: Configuración y acceso de cookies
En la siguiente demostración, se muestra cómo se puede acceder a una cookie configurada por ti en la primera pantalla de la demostración en un marco incorporado en el segundo sitio de la demostración:
storage-access-api-demo.glitch.me
La demostración requiere un navegador con las cookies de terceros inhabilitadas:
- Chrome 118 o versiones posteriores con la marca
chrome://flags/#test-third-party-cookie-phaseoutconfigurada y reiniciado el navegador - Firefox
- Safari
Recursos
- Lee la especificación o sigue y consulta los problemas.
- Documentación y guía sobre la API
- Documentación de Chrome sobre el uso de la API de Storage Access en conjuntos de sitios web relacionados