다른 도메인을 가진 iframe 페이지 표시하는 방법

부모창에서 다른 도메인을 가진 iframe 페이지 표시하는 방법

 

1. iframe src 요청에 요청 헤더 추가

일반적으로 부모창에서 서로 다른 도메인을 가진 iframe을 추가하게 되면 에러 발생

에러 메세지 : Refused to display 'http://~' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

 

-> iframe 서버의 로직 수정 필요

'X-Frame-Options' to 'sameorigin'

response.setHeader("X-Frame-Options", "ALLOW-FROM http://부모창.com");

 

2. 다른 도메인간 쿠키 전송

다른 도메인 내부에 쿠키 생성

쿠키는 브라우저에 데이터를 저장하기 위한 수단 중 하나

로그인시 사용자 인증 후 쿠키에 토큰 저장

 

aaa.com

bbb.com / jsp

1. aaa.com 로그인
2. 로그인시 서버에서는 사용자 인증 후 쿠키에 토큰 저장하고 응답값으로 헤더에 포함해서 주기
3. aaa.com은 쿠키를 브라우저에 저장
4. aaa.com에서 서버로 요청 보낼 때 헤더에 쿠키 같이 전송
5. 서버는 헤더를 읽고 사용자 식별하기 위한 수단으로 사용

쿠키에 도메인을 설정하면 해당 도메인에서만 유효한 쿠키가 된다.

third-party 쿠키 : 사용자가 접속한 페이지와 다른 도메인으로 전송하는 쿠키

first-party 쿠키 : 사용자가 접속한 페이지와 같은 도메인으로 전송하는 쿠키

 

다른 도메인간에 쿠키 전송하는 방법

브라우저의 쿠키 정보나 인증과 관련된 헤더를 함부로 request에 담지 않아야 한다.

 

aaa.com에서 ajax 요청 보낼 때 withCredentials 설정 필요

서버는

1. CORS 설정 필요

2. 응답 헤더로 Access-Control-Allow-Credentials 옵션 true

3. Access-Control-Allow-Origin 도메인 적어주기 (aaa.com)

 

SameSite 쿠키 정책

None : 크로스 사이트 요청의 경우에도 항상 전송. SameSite 탄생 전과 동일하게 동작

Strict : 크로스 사이트 요청에는 항상 쿠키 전송 안함

Lax : Strict에 비해 느슨한 정책. 대체로 서드파티 쿠키를 전송하지 않지만 몇 가지 예외적인 요청에는 전송

* Lax 쿠키 예외 사항 : Top Level Navigation (웹 페이지 이동), "안전한" HTTP 메서드 요청의 경우 (예 GET)

Top Level Navigation: <a> 클릭, window.location.replace 등 자동으로 이루어지는 이동, 302 redirect 이용한 이동

"안전하지 않은 요청" POST DELETE

 

크롬의 SameSite 기본값 : Lax