CORB(Cross-Origin Read Blocking)에 대하여

이 글은 구글의 https://developers.google.com/web/updates/2018/07/site-isolation 업데이트 노트를 토대로 작성된 글입니다.

CORB란?

웹에서 cross origin의 xml, html, json 등의 data resource를 읽어오지 못하도록 브라우저에서 막는 동작을 말합니다.

CORB는 어떤 상황에서 발생할까?

먼저 아래 링크의 CORB 데모페이지에서 예시를 확인해주세요!

anforowicz.github.io/xsdb-demo/index.html

CORB demo

이 데모페이지에서 개발자 도구를 열어 콘솔 창을 열고, 페이지 맨 아래쪽의 두 버튼을 누르면 아래와 같은 경고가 뜨게 됩니다.

이 데모페이지에서 활용하는 예시는 두 가지입니다. 두 가지 예시가 다르게 동작하는 것은 아니고, 같은 결과를 가져오게 됩니다.

• img 태그의 src에 html 응답을 주는 url을 넣은 경우
• sciprt 태그의 src에 pdf 응답을 주는 url을 넣은 경우

개발자 도구에서 Nertwork 탭을 열어서 버튼을 눌렀을 때 발생하는 네트워크 요청과 응답을 열어보면 아래와 같은 형태로 나타나게 됩니다.

분명 200 ok 응답인데, 다만 응답 데이터를 확인하면 아래 그림과 같이 비어있게 됩니다.

요청은 정상적으로 작동하지만, 마치 응답 데이터에 아무것도 없는 것처럼 보이는데요. 이 데이터는 CORB에 의해 브라우저가 한 일입니다. 왜 이런 동작이 필요한 것인지 적당한 예시 상황을 통해 알아보겠습니다.

왜 CORB가 필요한 것일까?

먼저 악의적인 의도를 가진 웹 페이지가 있다고 가정하겠습니다. 이 웹 페이지는 겉으로 보기에는 평범한 커뮤니티처럼 보이지만, 속에 이러한 코드가 숨겨져 있습니다. CORB가 없는 상황이라면 어떤 일이 발생할지 알아보겠습니다.

<img src="https://your-bank-account.json">

여기서 src의 저 url은 여러분의 계좌 정보를 받아올 수 있는 웹 사이트의 url이라고 하겠습니다. 여러분은 이 웹 사이트에 접속함과 동시에 여러분의 계좌 정보를 요청하게 되고, 이 데이터는 악의적인 사용자에 의해 조작될 수 있게 됩니다. 여러분은 계좌 정보와는 전혀 상관없는 웹 사이트에 접속했지만, 그 정보가 유출되게 되었네요.

이 상황에서 CORB가 있다면, 응답 데이터를 브라우저 메모리상에 아예 올리지 않도록 동작하고, 악의적인 사용자는 해당 방법으로 데이터를 가져올 수 없게 되는 것입니다.

의문점

여러 자료를 찾아보고 읽어보았지만, 여전의 남는 의문점이 있어 정리합니다.

• 제가 youtube 한글 댓글 chrome extension을 만들 때, chrome extension에서 제가 만든 서버의 json데이터를 ajax 요청해서 youtube페이지의 데이터를 바꾸려고 시도했던 적이 있었습니다. 이때 처음 CORB를 봤는데, 데이터를 콘솔에 띄운다던지 하는 동작은 잘 되었는데, 꼭 youtube 페이지에 삽입하려고 하면 CORB가 났습니다. 결국 해결 못하고 다른 방법으로 우회했는데, 여러 문서를 확인한 지금도 왜 그렇게 동작하는지 의문이 남아있습니다.
• 첫 번째 의문에 이어지는 의문인데, 악의적인 사용자가 스크립트에 XHR요청을 한 것과, img 태그나 script 태그에 src를 통해 요청한 것이 어떤 차이가 있는지입니다. 제 경우에는 스크립트를 통해서 XHR요청을 했음에도 CORB가 나서..

혹시 제가 잘 못 정리한 부분이 있다면 댓글을 통해 알려주시면 감사하겠습니다!