Top-level navigation

Top-level navigation은 브라우저의 URL 표시줄이 변경되는 직접적인 페이지 이동을 의미합니다.

<!-- 일반적인 링크 클릭은 Top-level navigation -->
<a href="https://example.com">다른 사이트로 이동</a>

 

// JavaScript를 통한 페이지 이동
window.location.href = 'https://example.com';
window.location.assign('https://example.com');
window.location.replace('https://example.com');

 

<!-- GET/POST 메서드를 사용하는 폼 제출 -->
<form action="https://example.com/submit" method="POST">
    <input type="text" name="data">
    <button type="submit">제출</button>
</form>

 

// 새 창/탭 열기
window.open('https://example.com', '_blank');

 

반면, 다음은 Top-level navigation이 아닌 예시들입니다:

// fetch나 XMLHttpRequest를 통한 요청은 Top-level navigation이 아님
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

// axios 등의 HTTP 클라이언트 요청도 마찬가지
axios.get('https://api.example.com/data');

 

<!-- iframe 내부의 페이지 로드는 Top-level navigation이 아님 -->
<iframe src="https://example.com"></iframe>

 

<!-- 리소스 로드는 Top-level navigation이 아님 -->
<img src="https://example.com/image.jpg">
<script src="https://example.com/script.js"></script>
<link rel="stylesheet" href="https://example.com/style.css">

 

SameSite=Lax 설정에서:

1. Top-level navigation으로 인정되는 경우
   • 링크 클릭
   • 폼 제출
   • window.location 변경
   • window.open() 호출
2. Top-level navigation으로 인정되지 않는 경우
   • AJAX 요청
   • iframe 로드
   • 리소스 (이미지, 스크립트 등) 로드

이러한 구분은 보안과 사용자 경험 사이의 균형을 위한 것으로,

의도적인 사용자 행동(Top-level navigation)에 대해서만 쿠키를 전송하도록 하여

CSRF 공격 등을 방지하면서도 필요한 기능은 유지할 수 있게 합니다.