자바스크립트에서 XSS 예방하기
참고:
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 노드의 추가를 최소화 하는 것이다.