트위터에서 올라온 링크로 보게 된 Stackoverflow의 글을 보고 트위터에 올렸더니 꽤 많은 리트윗이 일어나서 블로그에도 한번 정리해 둔다.

크롬 콘솔을 페이스북이 어떻게 막았냐와 이에 대한 페이스북 개발자의 답변.. 답변에 써진대로 클라이언트에서 막는걸 권장하진 않지만 크롬 콘솔을 저런식으로 막을수 있는지 처음 알았다. http://t.co/MtPYqxS4jc

— Outsider (@Outsideris) February 12, 2014

윗글에 자세한 내용이 나오긴 하지만 정리하자면 이렇다. 어떤 사람이 페이스북에 들어갔더니 크롬에서 콘솔을 사용할 수 없게 막혀있는데 어떻게 막은 거냐 하는 질문이고 여기에 페이스북의 보안 엔지니어라는 사람이 나타나서 사용자가 콘솔을 이용해서 공격할 수 있는지 테스트하느라고 일부 사용자에게 적용되었던 거라고 답변을 달았다.

with ((console && console._commandLineAPI) || {}) {
  // code here
}

크롬의 콘솔은 위의 코드로 모두 감싸아져 있으므로 여기서 console._commandLineAPI를 재정의해서 오류를 던지도록 하면 사용자가 크롬에서의 개발자도구로 콘솔을 사용할 수 없게 할 수 있다.

Object.defineProperty(console, '_commandLineAPI', { get : function() { throw '콘솔을 사용할 수 없습니다.' } });

웹페이지에서 위 코드를 추가하면 해당 페이지에서 크롬 콘솔을 사용하면 다음과 같이 오류가 난다. 콘솔에서 코드를 사용하면 다 오류가 발생하고 자동완성도 동작하지 않는다. 물론 이 코드는 위의 크롬 콘솔이 코드를 감싸는 구조를 이용한 것이므로 페이지의 자바스크립트로 삽입해야지 크롬 콘솔에서 위 코드를 입력한다고 콘솔이 차단되지 않는다. 위의 Object.defineProperty()는 ES5에 들어간 객체의 프로퍼티를 다루는 API다.

글을 쓴 김에 이 글에서 흥미로운 점이 있는데 페이스북의 개발자가 직접 나타나서 답변을 달았다는 점이다. 우리나라였으면 어땠을까 왠지 저런 내용을 공개적으로 쓰려면 회사의 허락을 받아야 될 것 같은 불안감도 있고 보고를 하면 아마도 나중에 가치가 있을지도 모르는 잠재력 있는 스킬일지도 모르니 공개하지 말라고 할 것 같다.(대부분은 자체검열로 답변을 안 달겠지.)

그리고 이 코드를 사용한 발단이 된 Self-XSS 공격도 한 번씩 보면 흥미롭다. 이런 공격은 취약점이라고 하기도 그렇고 참...

마지막으로 윗글의 답변에 나온 대로 보안 공격을 클라이언트에서 차단하려는 접근은 좋지 않은 방법이다. 어차피 우회하려고 맘먹으면 얼마든지 우회할 수 있으므로 보안이라는 의미도 그다지 없다. 왠지 이런 코드가 한때 국내 웹사이트의 기본처럼 되었던 "우클릭 방지"나 "텍스트 복사할 때 강제 출처 추가"처럼 오용되지 않을까 하는 노파심에 그냥 이런 것도 가능하구나! 정도로 봐주시길...