iframe 보안 이슈를 우회하여 다른 여러 사이트를 화면에 표시하는 방법을 소개한다.
크롬에만 국한적인 방법이기때문에 정당한 해결책이라고 할 수는 없지만 이거라도 찾아낸 게 어딘가 싶다.
- 해결책 = Chrome extension
크롬 확장프로그램이 바로 그 해결책이었다.
해결책의 시초는 다음 확장 프로그램이었다. Split screen 이라는 프로그램이다.
화면 분할이 되어지는 모습
처음 우리가 기획했던 기능이 화면분할이었는데, 이 프로그램이 구현하고 있었다.
iframe을 쓰는 것은 동일했는데, 이 확장프로그램은 어떤 도메인이던 들어갈 수가 있던 반면에
내가 만든 iframe에서는 자꾸만 SOP에 걸렸다.
도대체 무엇이 그 차이를 만들어내는 건지에 대해 구글링하고 탐색해보았다.
그러다가 발견한 것이, 저 프로그램이 켜진 상태에서는 내 페이지에서도 어떤 웹사이트던 볼 수 있더라는 것이다.
크롬 확장프로그램에 그 해답이 있다는 것을 알게된 것은 오래 걸리지 않았다.
chrome 브라우저에서 제공하는 chrome 객체에는 webRequest라는 멤버가 있었다.
이 멤버는 http 요청에 관여할 수 있는 객체였는데,
https://developer.chrome.com/extensions/webRequest
이곳에 가면 자세한 API를 살펴볼 수 있다. onHeaderRecived 를 통해 리스너를 입혀주기만 하면 문제는 해결되는 것이었다. onHeaderRecived는 응답헤더를 받을때의 시점이다.
SOP를 해결하기위해 서버에서 온 응답http 헤더를 조작해주었다.
x-content-security-options', 'x-webkit-csp', 'content-security-policy', 'x-frame-options
과 같은 보안 정책들에 관한 header들이 포함된 것을 무효화 시켰다.
크롬 확장프로그램을 설치하게 되면 사용자는 감지할 수 없는 백그라운드에 javascript를 실행시킬 수가 있다.
물론 그만큼 보안이 약해지기때문에 사용자는 신중하게 페이지에 접속을 해야한다. 잘못된 사이트에 들어가게되면 그 피해를 고스란히 보게 될 수 있기 때문이다.
그래서 iframe에는 스크립트를 허용하지 않는 sandbox 속성을 걸어두는 것이 좋다.
악성 스크립트가 작동되더라도 크롬 브라우저는 그 보안성이 뛰어나서 그렇게 걱정하지 않아도 된다.
다른 도메인으로 불러진 iframe 내부에서는 부모 페이지의 element들을 건드릴 수 없도록 되어있다.
마찬가지로 부모페이지에서도 iframe 내부를 건드릴 수 없도록 막혀있다.
결국 iframe 내부 정보를 드래그해서 부모페이지에 드랍시키겠다는 나의 생각을 실현시킬 수 없었다.
하지만 이번 기회를 통해서 http 에 대한 지식은 물론이고, 보안에 대해서도 좀더 깊이있는 고민을 할 수 있었다.
진짜 맘먹고 악의를 가진 사용자가 서비스를 망가뜨릴 수 있겠다는 생각이 들었고 보안에 대해서 더 신중하게 다가서야겠다는 다짐을 하게되었다.