[Info]Tags categorized posts and contents patterns..

[AJAX] Ajax Code E xamples.. [Book] About the book.. [CSS] CSS Code E xamples.. [DB] Sql Code E xamples.. [DEV] All development stor...

레이블이 Console인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Console인 게시물을 표시합니다. 모든 게시물 표시

2017년 3월 8일 수요일

[JS] 크롬 개발자도구의 콘솔을 차단하는 방법..


출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

트위터에서 올라온 링크로 보게 된 Stackoverflow의 글을 보고 트위터에 올렸더니 꽤 많은 리트윗이 일어나서 블로그에도 한번 정리해 둔다. 윗글에 자세한 내용이 나오긴 하지만 정리하자면 이렇다.[트위터 글인데 별도로 가져오지 못해서 해당 부분은 취소처리한다..] 어떤 사람이 페이스북에 들어갔더니 크롬에서 콘솔을 사용할 수 없게 막혀있는데 어떻게 막은 거냐 하는 질문이고 여기에 페이스북의 보안 엔지니어라는 사람이 나타나서 사용자가 콘솔을 이용해서 공격할 수 있는지 테스트하느라고 일부 사용자에게 적용되었던 거라고 답변을 달았다.

1
2
3
4
5
JavaScript

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

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

1
2
3
JavaScript

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

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


위의 코드를 추가하고 크롬 콘솔을 사용한 화면

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

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

My Comment..
해당 글은 햄의 말처럼.. 아 이런것도 있구나 하는 정도로 나 스스로도 참고용으로..?? 가져온 글이다.. ㅎㅎ

2016년 4월 7일 목요일

[Tool]Grep Console : 이클립스 콘솔 이쁘게 보기..

출처 : Outsider's Dev Story https://blog.outsider.ne.kr/

큰 프로젝트를 개발하다보니 이클립스 콘솔에 출력되는 수많은 로그를 뒤지는 것도 보통 일이 아니었습니다. 개발과정에서는 디버깅을 위해 로그레벨을 높여서 사용하므로 엄청난 양의 로그가 출력되고 그 중에서 필요한 부분을 찾으려면 수없이 스크롤하고 텍스트 검색을 해야했습니다. 더군다나 로그메시지는 자세히 보지 않으면 비슷비슷해 보이기 때문에 집중해서 보지 않으면 찾기도 쉽지 않았습니다.

이클립스 콘솔에  출력된 로그 메시지

다 똑같이 출력되니까 로그 메시지 뒤지는데도 상당한 시간이 소비되었는데 얼마전에 콘솔의 메시지를 종류별로 다양한 색으로 보여주는 플러그인이 있다는 걸 알게되었습니다. Logback을 쓴다면 사용할 수 있는 Logback Console Plugin for Eclipse도 있었지만 좀더 범용적으로 쓸 수 있는 Grep Console을 선택했습니다. 이클립스를 Indigo(3.7)버전을 쓴다면 이클립스 마켓플레이스에서 존재하므로 바로 설치할 수 있습니다.

이클립스 마켓플레이스의 Grep Console

이클립스를 3.6이하의 버전을 사용한다면 [Help] - [Install New Software]에서 http://eclipse.musgit.com를 추가하고 설치할 수 있습니다.

Grep Console이 설치된 콘솔

설치가 완료되면 위처럼 콘솔에 우측에 (?) 아이콘이 생성됩니다. 이 아이콘을 클릭하면 다음과 같은 Grep Expression 관리화면이 나타납니다.

Grep Expression 관리화면

Grep Console은 정규표현식을 사용해서 로그메시지를 구분하고 각 규칙마다 원하는 색을 지정할 수 있는 구조로 되어있습니다. 처음에는 아무 규칙도 등록되어 있지 않으므로 Add를 눌러서 규칙을 등록하면 됩니다. 위처럼 정규표현식 규칙을 등록합니다. 정규표현식에서 괄호로 그룹을 3개 만들었으므로 규칙에서 Whole Line과 그룹 3개가 나타납니다. Whole Line은 정규표현식으로 잡힌 라인전체에 대한 설정이고 그룹별로도 다른 설정을 할 수 있습니다. 기본적인 로그레벨에 대한 구분은 다음 정규식을 이용해서 할 수 있습니다.

(.*)(TRACE)(.*)
(.*)(DEBUG)(.*)
(.*)(ERROR)(.*)
(.*)(FATAL)(.*)
(.*)(INFO)(.*)

콘솔에서 선택한 텍스트로 Grep Console를 추가하는 화면

위처럼 로그메시지에서 블락을 설정하고 마우스의 우측클릭을 하면 Add Grep Expression이라는 메뉴가 나서 현재 선택한 텍스트를 기준으로 바로 정규표현식을 생성할 수 있습니다. 물론 이는 기본적인 정규표현식이므로 세밀한 제어를 하려면 정규표현식을 수정해야 합니다. 위 그림은 하이버네이트에 대한 로그를 따로 구분하기 위해서 설정했습니다.

Grep Console 규칙별로 다르게 표시된 콘솔

이제 위처럼 로그가 구분되어 나오기 때문에 쉽게 찾고자 하는 로그를 구분해서 볼 수 있습니다. Grep Console은 정규표현식을 사용하기 때문에 필요한 만큼 다양하게 설정할 수 있어서 출력로그의 규칙성만 찾으면 자유롭게 등록해서 사용할 수 있습니다.