스큐 보호 작동 방식 - AWS Amplify 호스팅
X-Amplify-Dpl 헤더 예제

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

스큐 보호 작동 방식

대부분의 경우, _dpl 쿠키의 기본 동작만으로도 스큐 보호 요구 사항을 충족할 수 있습니다. 그러나 다음과 같은 고급 시나리오에서는 X-Amplify-Dpl 헤더와 dpl 쿼리 파라미터를 사용하여 스큐 보호를 활성화하는 것이 더 적합합니다.

  • 여러 브라우저 탭에서 동시에 웹사이트를 로드하는 경우

  • 서비스 작업자를 사용하는 경우

Amplify는 클라이언트에 제공할 콘텐츠를 결정할 때 들어오는 요청을 다음 순서로 평가합니다:

  1. X-Amplify-Dpl 헤더 - 애플리케이션은 이 헤더를 사용하여 요청을 특정 Amplify 배포로 전달할 수 있습니다. 이 요청 헤더는 process.env.AWS_AMPLIFY_DEPLOYMENT_ID 값을 사용하여 설정할 수 있습니다.

  2. dpl 쿼리 파라미터 - Next.js 애플리케이션은 지문 자산(.js 및 .css 파일) 요청에 대해 자동으로 `_dpl` 쿼리 파라미터를 설정합니다.

  3. _dpl 쿠키 - 모든 스큐 보호 애플리케이션의 기본 설정입니다. 특정 브라우저에서는 동일한 도메인과 상호작용하는 모든 브라우저 탭이나 인스턴스에 동일한 쿠키가 전송됩니다.

    브라우저 탭마다 로드된 웹 사이트의 버전이 다른 경우 _dpl 쿠키는 모든 탭에서 공유됩니다. 이 경우 _dpl 쿠키만으로 완전한 스큐 보호를 구현할 수 없으므로, 스큐 보호가 필요한 경우 X-Amplify-Dpl 헤더를 사용하는 것이 좋습니다.

X-Amplify-Dpl 헤더 예제

다음 예제는 Next.js SSR 페이지에서 X-Amplify-Dpl 헤더를 통해 스큐 보호를 사용하는 코드를 보여줍니다. 이 페이지는 하나의 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>
}