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
<a name="skew-protection-headers"></a>

Na maioria dos casos, o comportamento padrão do cookie \$1dpl 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`.

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

1. **Cookie \$1dpl**: 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 \$1dpl será compartilhado por todas as guias. Nesse cenário, não é possível obter proteção total contra distorções com o cookie \$1dpl e é necessário considerar o uso do cabeçalho `X-Amplify-Dpl` para proteção contra distorções.

## X-Amplify-Dpl exemplo de cabeçalho
<a name="skew-protection-header-example"></a>

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>
}
```