X-Frame-Options이란?
보통 클라이언트 쪽에서 iframe을 사용할 때 볼 수 있는 에러에서 확인이 가능한데, 이는 iframe태그 등에서 외부 참조가 가능/불가능을 설정할 수 있는 통신 설정이다. iframe 이외에도 object, embeded 태그를 사용할 때 볼 수 있다. 이 에러를 보았다면 html 연습이든 프론트 개발이든 iframe을 사용할 때 이 에러가 발생했을 것이다.
Refused to display ... in a frame because it set 'X-Frame-Options' to 'sameorigin'.
어떻게 확인하는가?
확인방법은 간단하다. iframe 등 태그로 참조하길 바라는 사이트에 접속한다. 나의 경우는 Google이다. 그 뒤 F12를 눌러 개발자 도구의 네트워크 부분에 들어가, 모두 표시를 한 뒤 메인 페이지의 리스폰스 정보를 확인하자.
확인해보면 위와같이 x-frame-options 옵션이 SAME ORIGIN으로 되어있다. SAME ORIGIN은 같은 도메인 내에서의 참조만 허용하겠다는 것이다. 내가 구글 직원이어서입사하고싶다 구글 도메인을 사용하지 못하는 이상 iframe으로 구글을 참조하는 것은 불가능하다.
왜 이런 옵션이 존재하는가?
개발자 입장에서는 왜 이런 번거로운 옵션이 존재해서 날 힘들게 하냐..라고 생각할 수 있다. 하지만 모든 설정엔 이유가 있듯이 X-Frame 옵션도 이유가 존재한다.
- iframe을 이용한 간단 디도스 공격
공격하고자 하는 페이지를 참조하는 iframe 태그를 다수 만든다. 그리고 로드를 반복하면 한 번의 로드에 수십, 수백 개의 리퀘스트가 발생하니 간단하고 손쉽게 디도스 공격을 요청할 수 있다.
- 클릭재킹 공격
웹페이지에서 iframe 태그를 숨겨놓고 실제 페이지의 클릭을 iframe내의 클릭으로 인식되게끔 자바스크립트 코드를 작성한다. 예를 들어 실제 페이지에서 싫어요 버튼을 클릭했음에도, iframe내의 좋아요 버튼을 클릭되게끔 유도할 수 있다.
위와 같은 이유가 있지만, 단순히 자신의 페이지가 남의 페이지에서 사용될 수 있다는 가능성이 좀 꺼림칙하니, 보통 전부 false로 처리해서 이용을 못하게 하는 것이 일반적이다.
해결방법
사실 원칙적으로는 서버단에서 막고 있다면 클라이언트 쪽에서 할 수 있는 일은 없다. 그냥 참고 감수하는 방법 이외에는.. 자신의 개발이 서버를 겸하고 있고, 테스트를 위해 필요하다. 싶은 경우 원하는 페이지의 html 메타데이터나 서버 리스폰스 헤더 설정을 조사해보면 X-Frame-Options 설정이 있을 것이다. 이를 설정해주면 iframe으로 참조가 가능하다.
나는 서버 개발을 겸하고 있지 않다! 또는 서버 개발 쪽에 괜히 설정 수정해달라고 말하는 거 귀찮다! 싶은 사람들은 일단 임시 방책으로 크롬 확장 기능으로 대체할 수 있다.
인스톨 후 구글을 iframe으로 참조해보면 짜잔
참조가 가능하다. 이 확장의 내부 코드를 읽어보지 않아서 어떤 방법으로 X-Frame 옵션을 무시하는지는 알 수가 없지만, 추측하기에는 두 가지 방법이 있는 것 같다. 이 부분은 내 추측이니 참고 삼아한 귀로 듣고 흘려주시길 바란다.
첫째로 html태그에서 false처리되어있다면, 크롬 확장이 중간에 리스폰스 정보를 가로채서 그 부분을 허용으로 바꾸고 돌려준다. 이러면 브라우저는 허용된 사이트라 생각하고 iframe을 띄어준다.
두 번째 방법으로는 리퀘스트를 보내기 직전 확장이 이를 가로채서 일반적인 접근 인양 속여서 서버에 정보를 보내는 방법이다. 이러면 서버단은 그냥 구글에 접속했다 판단할 테니 그냥 리스폰스를 보내고 브라우저는 이를 받고 표시해준다.
Source
'그 외 개발관련' 카테고리의 다른 글
| powershell 터미널 프로필 현재 디렉토리만 보이게 설정 (0) | 2020.09.26 |
|---|---|
| 크로미움 엣지 알트탭(alt + tab) 시 탭 분할 비활성화 방법 (61) | 2020.08.30 |
| 크롬 확장 개발 시 Intellij(그 외 jetbrain IDE)에서 문법 체크 설정 (1) | 2020.08.24 |