Code Muri

요즘 Logitech M705 마우스를 사용하고 있는데, 평소 가운데 휠 버튼을 자주 사용하는데 이 마우스는 가운데 버튼을 누르면 잘 동작하지 않아서 너무 불편하다고 생각했다.

그래서 다른 마우스를 사려고 몇주동안 검색만 하다가 딱 맞는게 없어서 구입을 안하고 있었는데, M705 의 엄지 버튼을 가운데 휠로 사용하니 문제가 해결되었다.

로지텍의 초고속 휠은 스크롤은 편한데 내가 자주 사용하는 가운데 버튼이 잘 눌러지지 않아서 못쓰겠다고 생각했는데 그냥 엄지 쪽에 있는 버튼을 가운데 버튼으로 사용하니 문제가 해결되었다.

그래서 가운데 버튼을 대체하는 엄지 버튼을 막 테스트해보다가 새로운 걸 알았다.

1. 크롬이나 익스플로어의 탭에서 마우스 가운데 버튼을 누르면 창이 닫힌다. 와우!

2. 원래 알고 있는 기능인데 태스크바에서 실행 중인 앱 위에서 마우스 가운데 버튼을 누르면 하나 더 실행된다.

휴, 돈 굳었다. ㅋ

참고: 

Preventing XSS (Cross Site Scripting) in Javascript

XSS (Cross Site Scripting) Prevention Cheat Sheet

Google Application Security - XSS

XSS 를 피하기 위해서는, HTML 을 직접 추가하는 것을 피해야 한다. DOM 의 .html(), .innerHTML 을 사용하지 말고, 대신 .append(), .prepend(), .before(), .after() 등을 사용해야 한다.

위험한 예)

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var link = '<a href="' + data.url + '">' + data.title + '</a>';
 
    jQuery( '#my-div' ).html( link );
});

data.title 이 만약 <script>alert( "haxxored");</script>;? 을 포함하고 있다면?

대신, 올바른 접근 방법은 프로그래밍적으로 새로운 DOM 노드를 생성하고, 이를 해당 DOM 에 추가해야 한다.

jQuery.ajax({
    url: 'http://any-site.com/endpoint.json'
}).done( function( data ) {
    var a = jQuery( '<a />' );
    a.attr( 'href', data.url );
    a.text( data.title );
 
    jQuery( '#my-div' ).append( a );
});

jQuery 또는 브라우저의 DOM API 를 통해서 데이터를 전달함으로써, 값들이 적절하게 변환되고 (sanitized) 안전하지 않은 HTML 이 페이지에 추가되는 것을 제거한다.

※ 성능은 HTML 직접 삽입하는 방식(.html, .innerHTML)이 기술적으로 더 빠르다, 이유는 브라우저가 HTML 을 파싱하는데 최적화 되어 있기 때문이다. 최적의 방법은 메모리에 최대한 큰 오브젝트를 만들고 이를 한번에 DOM 에 추가함으로써 DOM 노드의 추가를 최소화 하는 것이다.