React | iframe띄우기 ( + JSP, postMessage )

본인인증 모듈을 연결하면서 팝업으로 띄웠다가 아이프레임으로 변경했다.

팝업도 나쁘지는 않았지만 사파리에서 window.close가 안 먹히는지 몰랐다. 사파리 누가써...?ㅠ

 

iframe컴포넌트 생성

일단 아이프레임을 작성해준다. 모달처럼 띄워줬음.

이 때 서버측 주소를 src주소로 설정했는데, X-Frame어쩌구 에러 발생..

+ Spring Boot | 스프링 시큐리티 X-Frame-Option 설정

import React from "react";

const IdentityAuthiFrame = () => {
  return (
    <div>
      <iframe src="url" />
    </div>
  );
};

export default IdentityAuthiFrame;

 

일단 잘 띄워지기는 하는데, 본인인증이 완료되고 난 결과값을 어떻게 알아내지 싶었다.

window.parent...어쩌구 하면 Uncaught DOMException발생... 

postMessage를 사용해야 한다고 함. 안전하게 window간의 통신을 가능하게 해준답니다...

 

클라이언트 측에 addEventListener등록

아이프레임에서 보낸 메시지를 듣겠다~~

 useEffect(() => {
    window.addEventListener(
      "message",
      (e) => {
        if (e.origin === SERVER_URL && e.data.message) {
          // 생략
        }
      },
      false
    );
  }, []);

 

아이프레임으로 띄운 html혹은 jsp에서는 postMessage로 메시지 전송

window.parent.postMessage({ message: "어쩌구저쩌구" }, '*');

 

Window.postMessage()