本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 扭曲保護的運作方式
<a name="skew-protection-headers"></a>

在大多數情況下，\$1dpl Cookie 的預設行為將滿足您的扭曲保護需求。不過，在下列進階案例中，使用 `X-Amplify-Dpl`標頭和`dpl`查詢參數更能啟用偏斜保護。
+ 同時在多個瀏覽器索引標籤中載入您的網站
+ 使用 服務工作者

Amplify 在決定要提供給用戶端的內容時，會依下列順序評估傳入請求：

1. **`X-Amplify-Dpl` 標頭** – 應用程式可以使用此標頭將請求導向特定 Amplify 部署。您可以使用 的值來設定此請求標頭`process.env.AWS_AMPLIFY_DEPLOYMENT_ID`。

1. **`dpl` 查詢參數** – Next.js 應用程式會自動為對指紋資產 (.js 和 .css 檔案） 的請求設定 \$1dpl 查詢參數。

1. **\$1dpl Cookie** – 這是所有受扭曲保護的應用程式的預設值。對於特定瀏覽器，每個與網域互動的瀏覽器索引標籤或執行個體都會傳送相同的 Cookie。

   請注意，如果不同的瀏覽器標籤載入了不同版本的網站，則所有標籤都會共用 \$1dpl Cookie。在這種情況下，無法使用 \$1dpl Cookie 達到完全扭曲保護，您應該考慮使用 `X-Amplify-Dpl`標頭進行扭曲保護。

## X-Amplify-Dpl 標頭範例
<a name="skew-protection-header-example"></a>

下列範例示範透過 `X-Amplify-Dpl`標頭存取扭曲保護的 Next.js SSR 頁面程式碼。頁面會根據其中一個 API 路由轉譯其內容。要提供給 api 路由的部署是使用 `X-Amplify-Dpl`標頭指定，該標頭設定為 的值`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>
}
```