Como funciona a proteção contra distorções - AWS Amplify Hospedagem
Exemplo de cabeçalho X-Amplify-Dpl

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Como funciona a proteção contra distorções

Na maioria dos casos, o comportamento padrão do cookie _dpl atenderá às suas necessidades de proteção contra distorções. No entanto, nos cenários avançados a seguir, a proteção contra distorções será melhor ativada usando o cabeçalho X-Amplify-Dpl e o parâmetro de consulta dpl.

  • Carregamento do seu site em várias guias do navegador ao mesmo tempo

  • Uso de trabalhadores de serviço

O Amplify avalia a solicitação recebida na ordem a seguir ao determinar o conteúdo a ser veiculado ao cliente:

  1. Cabeçalho X-Amplify-Dpl: as aplicações podem usar esse cabeçalho para direcionar solicitações para uma implantação específica do Amplify. Esse cabeçalho de solicitação pode ser definido usando o valor de process.env.AWS_AMPLIFY_DEPLOYMENT_ID.

  2. Parâmetro de consulta dpl: as aplicações Next.js definirão automaticamente o parâmetro de consulta _dpl para solicitações de ativos com impressão digital (arquivos.js e .css).

  3. Cookie _dpl: esse é o padrão para todas as aplicações protegidas contra distorções. Para um navegador específico, o mesmo cookie é enviado para cada guia ou instância do navegador que interage com um domínio.

    Lembre-se de que, se diferentes guias do navegador tiverem versões diferentes de um site carregadas, o cookie _dpl será compartilhado por todas as guias. Nesse cenário, não é possível obter proteção total contra distorções com o cookie _dpl e é necessário considerar o uso do cabeçalho X-Amplify-Dpl para proteção contra distorções.

Exemplo de cabeçalho X-Amplify-Dpl

O exemplo a seguir demonstra o código de uma página de SSR do Next.js que acessa a proteção contra distorções por meio do cabeçalho X-Amplify-Dpl. A página renderiza seu conteúdo com base em uma de suas rotas de API. A implantação para servir à rota da API é especificada usando o cabeçalho X-Amplify-Dpl, que é definido com o valor 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>
}