Cómo funciona la protección contra distorsión - AWS Amplify Hospedaje
Ejemplo de encabezado X-Amplify-Dpl

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Cómo funciona la protección contra distorsión

En la mayoría de los casos, el comportamiento predeterminado de la cookie _dpl se adaptará a sus necesidades de protección contra distorsión. Sin embargo, en las siguientes situaciones avanzadas, es mejor habilitar la protección contra la distorsión mediante el parámetro de encabezado X-Amplify-Dpl y de consulta dpl.

  • Cargar su sitio web en varias pestañas del navegador al mismo tiempo

  • Uso de trabajadores de servicio

Amplify evalúa la solicitud entrante en el siguiente orden al determinar el contenido que se va a ofrecer al cliente:

  1. Encabezado de X-Amplify-Dpl: las aplicaciones pueden usar este encabezado para dirigir las solicitudes a una implementación específica de Amplify. Este encabezado de solicitud se puede configurar con el valor de process.env.AWS_AMPLIFY_DEPLOYMENT_ID.

  2. Parámetro de consulta dpl: las aplicaciones de Next.js establecerán automáticamente el parámetro de consulta _dpl para las solicitudes de activos con huellas digitales (archivos .js y .css).

  3. Cookie _dpl: es la opción predeterminada para todas las aplicaciones protegidas contra la distorsión. Para un navegador específico, se envía la misma cookie a cada pestaña o instancia del navegador que interactúa con un dominio.

    Tenga en cuenta que si en distintas pestañas del navegador se cargan diferentes versiones de un sitio web, todas las pestañas compartirán la cookie _dpl. En esta situación, no es posible lograr una protección total contra la distorsión con la cookie _dpl y se debería pensar en la posibilidad de usar el encabezado X-Amplify-Dpl para protegerla.

Ejemplo de encabezado X-Amplify-Dpl

En el siguiente ejemplo, se muestra el código de una página SSR de Next.js que accede a la protección contra distorsión a través del encabezado X-Amplify-Dpl. La página renderiza su contenido en función de una de sus rutas de API. La implementación que se utilizará en la ruta de la API se especifica mediante el encabezado X-Amplify-Dpl, que se establece en el valor de process.env.AWS_AMPLIFY_DEPLOYMENT_ID.

import { useEffect, useState } from 'react';

export default function MyPage({deploymentId}) {
    const [data, setData] = useState(null);

    useEffect(() => {
        fetch('/api/hello', {
            headers: {
                'X-Amplify-Dpl': process.env.AWS_AMPLIFY_DEPLOYMENT_ID
            },
        })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(error => console.error("error", error)) 
    }, []);

    return <div>
        {data ? JSON.stringify(data) : "Loading ... " }
    </div>
}