[HTML] iframe의 cross-origin 이슈 - cookie, addEventListener

문제상황

채팅 화면을 고객의 웹사이트에 제공하기 위한 <sciprt> 코트를 제작하는 과정에서 문제가 발생했다.

iframe을 통해 우리 서버에 있는 웹사이트 코드가 고객의 웹사이트에서 동작하도록 해야했다.

 

iframe은 same-origin-policy를 따른다.

<iframe> 내부에 src속성으로 연결된 웹사이트와 iframe 외부에 연결된 웹사이트의 origin이 같아야

기능이 정상적으로 동작한다.

 

문제는 두 웹사이트는 cross-origin 관계에 있다.

따라서 다음 두 가지의 문제가 발생했다.

 

1. 고객 웹사이트에서 쿠키를 불러올 수 없었다. (iframe 문제라기 보단 cookie의 정책 문제)

 

2. 고객 웹사이트에서는 iframe으로 연결된 서버 웹사이트의 HTML 엘리먼트를 DOM 문법으로 조회할 수 없었다.

- 즉 고객 웹사이트의 script 코드에서 document.querysSelector를 사용해도

  iframe 내부 웹사이트의 HTML element를 불어올 수 없었다.

- 해당 element를 불러와 이벤트 핸들러 함수를 연결하려고 했으나 이 문제 때문에 불가능해졌다.

 

해결방안

1. 서버 코드에서 cookie 정책 설정 시 sameSite:'none'와 secure:true를 포함하기

sameSite: 'none' : sameSite가 아니더라도 cookie 전송이 가능해지며,

이 경우 secure: true 정책이 수반되어야 함

cookies.set("Token", token, {
  httpOnly: false,
  path: "/",
  expires: expires,
  sameSite: 'none',
  secure: true
});

 

2. 고객사 사이트의 script 코드에서 필요한 HTML Element 생성하기

기존 코드는 고객사 웹사이트에 배포되는 script 태그를 통해

우리 서버 웹사이트의 HTML Element를 불러오는 방식이었다.

해결방안으로 고객사 사이트의 script 태그에서 해당 HTML Element를 직접 제작하도록

코드를 수정했다. (document.createElement)

 

// 기존 방식
const frame = document.createElement("iframe");
frame.src = "http://serverURL.com";
// 서버 웹사이트의 Element를 조회할 수 없어 closeButton 값이 null이 되므로 이벤트 핸들러 연결 불가능
const closeButton = frame.contentDocument.querySelector(".target-class");


// 새로운 방식
const frame = document.createElement("iframe");
frame.src = "http://serverURL.com";
// 필요한 Element를 <iframe> 밖에서 직접 제작 후 이벤트핸들러 함수 연결
const targetElement = document.createElement("a");
targetElement.addEventListener("click", () => {
  // 클릭이벤트 발생 시 동작하는 코드 작성
});