제이쿼리 함수중 html(), append() 등을 통해 HTML에 값을 설정할 경우 XSS에 대해 주의하여야 한다.
아래의 코드는 XSS 공격에 취약하다.
html() 함수는 XSS 공격에 대해 unsafe하기 때문이다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var xss = "<script>alert(1);</script>";
jQuery("#testDiv").html(xss);
}
</script>
</head>
<body>
<div id="testDiv"></div>
<a href="#" onclick="test(); return false;">test</a>
</body>
</html>
XSS에 대해 안전하지 못한 제이쿼리 함수는 다음과 같다.
- $("html source")
- .html()
- .append*()
- .insert*()
- .prepend*()
- .wrap*()
- .before()
- .after()
반면, XSS 공격에 대해 안전하게 사용할 수 있는 함수 역시 존재한다.
- .text()
- .attr()
- .prop()
- .val()
따라서 에디터를 통해 입력받은 내용 등을 제이쿼리로 셋팅할 때는 .html()보단 .text() 함수가 더 적절하다.
단, .attr() 함수의 경우는 href 속성을 설정할 때는 XSS safe가 보장되지 않으므로 주의하여야 한다.
참고문헌
- https://coderwall.com/p/h5lqla/safe-vs-unsafe-jquery-methods
'프론트기술 > 자바스크립트' 카테고리의 다른 글
| [jQuery] 객체 존재여부 확인하기 (0) | 2016.08.11 |
|---|---|
| [jQuery] ajax() GET 요청시 IE에서 캐싱되는 문제 해결하기 (0) | 2016.01.22 |
| [jQuery] datepicker 최대값, 최소값 설정하기 (0) | 2015.09.03 |
