Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra.

# Comment fonctionne la protection antiasymétrique
<a name="skew-protection-headers"></a>

Dans la plupart des cas, le comportement par défaut du cookie \$1dpl répondra à vos besoins de protection asymétrique. Toutefois, dans les scénarios avancés suivants, il est préférable d'activer la protection antioblique à l'aide des paramètres `X-Amplify-Dpl` d'en-tête et de `dpl` requête.
+ Chargement de votre site Web dans plusieurs onglets de navigateur en même temps
+ Recours à des travailleurs de service

Amplify évalue la demande entrante dans l'ordre suivant lors de la détermination du contenu à diffuser au client :

1. **`X-Amplify-Dpl`en-tête** — Les applications peuvent utiliser cet en-tête pour diriger les demandes vers un déploiement Amplify spécifique. Cet en-tête de demande peut être défini en utilisant la valeur de`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`.

1. **`dpl`paramètre de requête** — Les applications Next.js définiront automatiquement le paramètre de requête \$1dpl pour les demandes relatives aux actifs comportant des empreintes digitales (fichiers .js et .css).

1. cookie **\$1dpl — Il s'agit du cookie** par défaut pour toutes les applications protégées par asymétrie. Pour un navigateur spécifique, le même cookie est envoyé pour chaque onglet ou instance de navigateur qui interagit avec un domaine.

   Sachez que si différentes versions d'un site Web sont chargées dans différents onglets du navigateur, le cookie \$1dpl est partagé par tous les onglets. Dans ce scénario, il n'est pas possible d'obtenir une protection totale contre l'asymétrie avec le cookie \$1dpl et vous devriez envisager d'utiliser l'`X-Amplify-Dpl`en-tête pour la protection antiasymétrique.

## X-Amplify-Dpl exemple d'en-tête
<a name="skew-protection-header-example"></a>

L'exemple suivant illustre le code d'une page SSR Next.js qui accède à la protection antiasymétrique via l'en-tête. `X-Amplify-Dpl` La page affiche son contenu en fonction de l'une de ses routes API. Le déploiement à desservir à la route de l'API est spécifié à l'aide de l'`X-Amplify-Dpl`en-tête, qui est défini sur la valeur 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>
}
```