Jquery 사용 시 XSS 방어법

append나 html사용에 주의

제이쿼리를 쓸 때 .append나 .html 을 사용하는 경우

스크립트를 집어넣는 XSS 공격에 취약해질 수 있다.

데이터를 불러와서 렌더링하는경우

스크립트 문구를 그냥 텍스트로 사용하여 막는것이 좋다.

const data = 데이터를 받아와 리턴하는 함수



#안좋은 예
const insertHtml = '<input type="text" .... value="' + data.result.userName + '">'
$("#userInfo").append(insertHtml)



#변경할 코드
const insertHtml = '<input type="text" .... value="">'
$("#userInfo").append(insertHtml)
$("#userInfo").val(data.result.userName)

혹은 아예 유효성 검사를 진행한 후 사용해도 됨

// 데이터를 받아올 때 유효성 검사를 수행
const userName = encodeHTML(data.result.userName);

// 유효성 검사를 한 값을 넣음
const insertHtml = `<input type="text" .... value="${userName}">`;
$("#userInfo").append(insertHtml);

// 사용자 입력을 HTML 엔티티로 이스케이프하는 함수
function encodeHTML(input) {
  return input.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
}

HTML 엔티티는 브라우저에서 스크립트에 사용되는 태그를 일반 문자로 인식하도록 해줌