Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

# So funktioniert der Skew-Schutz
<a name="skew-protection-headers"></a>

In den meisten Fällen entspricht das Standardverhalten des \$1dpl-Cookies Ihren Anforderungen an den Schutz vor Verzerrungen. In den folgenden erweiterten Szenarien ist es jedoch besser, den Skew-Schutz mithilfe der `X-Amplify-Dpl` Header- und Abfrageparameter zu aktivieren. `dpl`
+ Gleichzeitiges Laden Ihrer Website in mehreren Browser-Tabs
+ Einsatz von Servicemitarbeitern

Amplify bewertet die eingehende Anfrage in der folgenden Reihenfolge, wenn es darum geht, welche Inhalte dem Kunden zur Verfügung gestellt werden sollen:

1. **`X-Amplify-Dpl`header** — Anwendungen können diesen Header verwenden, um Anfragen an eine bestimmte Amplify-Bereitstellung weiterzuleiten. Dieser Anforderungsheader kann mithilfe des Werts von `process.env.AWS_AMPLIFY_DEPLOYMENT_ID` festgelegt werden.

1. **`dpl`Abfrageparameter** — Anwendungen mit Next.js setzen automatisch den Abfrageparameter \$1dpl für Anfragen an Objekte mit Fingerabdruck (.js- und .css-Dateien).

1. **\$1dpl-Cookie** — Dies ist die Standardeinstellung für alle Anwendungen, die durch Schräglagen geschützt sind. Für einen bestimmten Browser wird dasselbe Cookie für jeden Browser-Tab oder jede Browser-Instanz gesendet, die mit einer Domain interagiert.

   Beachten Sie, dass das \$1dpl-Cookie von allen Tabs gemeinsam genutzt wird, wenn verschiedene Browser-Tabs unterschiedliche Versionen einer Website geladen haben. In diesem Szenario ist es nicht möglich, mit dem \$1dpl-Cookie einen vollständigen Schutz vor Verzerrungen zu erreichen, und Sie sollten erwägen, den Header für den `X-Amplify-Dpl` Schutz vor Verzerrungen zu verwenden.

## X-Amplify-Dpl Beispiel für einen Header
<a name="skew-protection-header-example"></a>

Das folgende Beispiel zeigt den Code für eine SSR-Seite von Next.js, die über den Header auf den Skew-Schutz zugreift. `X-Amplify-Dpl` Die Seite rendert ihren Inhalt auf der Grundlage einer ihrer API-Routen. Das Deployment, das auf der API-Route bereitgestellt werden soll, wird mithilfe des `X-Amplify-Dpl` Headers angegeben, der auf den Wert von `process.env.AWS_AMPLIFY_DEPLOYMENT_ID` gesetzt ist.

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