← 목록

XSS 공격을 막는 JavaScript 보안 팁

작성: 2025년 08월 07일읽기: 약 3분

웹 개발을 하다 보면, 우리의 웹사이트가 해커들의 공격 대상이 될 수 있습니다. 그 중에서도 Cross-site Scripting, 줄여서 XSS는 매우 흔한 공격 방법 중 하나입니다. 오늘은 이 XSS 공격을 막기 위한 JavaScript 보안 팁을 알아보겠습니다.

XSS 공격이란 무엇일까요?

간단히 말해서, XSS 공격은 해커가 웹 페이지에 악의적인 스크립트를 삽입하는 것입니다. 이 스크립트는 다른 사용자가 해당 페이지를 방문할 때 실행되며, 그 결과 사용자의 정보가 해커에게 넘어갈 수 있습니다.

JavaScript로 XSS 공격 방지하기

1. 사용자 입력값 검증

사용자로부터 입력받은 데이터는 항상 검증해야 합니다. 예를 들어, 이메일 입력란에는 이메일 형식만 받아들이도록 하고, 스크립트나 HTML 태그와 같은 의심스러운 입력은 거부합니다.

function validateInput(input) {
  // HTML 태그 제거
  return input.replace(/<[^>]*>?/gm, '');
}

2. HTML 이스케이프 사용

사용자로부터 받은 데이터를 웹 페이지에 출력할 때는 HTML 이스케이프 처리를 해야 합니다. 이렇게 하면, 스크립트가 아닌 단순한 문자열로 처리되어 XSS 공격을 방지할 수 있습니다.

function escapeHTML(text) {
  return text
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

3. 콘텐츠 보안 정책(CSP) 설정

콘텐츠 보안 정책(CSP)는 웹 브라우저에게 어떤 외부 자원이 안전하게 로드될 수 있는지 알려주는 방법입니다. CSP를 설정함으로써, 악의적인 스크립트가 실행되는 것을 막을 수 있습니다.

웹 서버 설정에 다음과 같이 추가하세요:

Content-Security-Policy: default-src 'self'; script-src 'self' https://trusted-source.com;

이 설정은 현재 웹사이트와 trusted-source.com에서만 스크립트를 로드하도록 허용합니다.

4. JavaScript 라이브러리 업데이트 유지

사용 중인 JavaScript 라이브러리나 프레임워크는 항상 최신 버전으로 유지하세요. 보안 취약점이 발견되면 개발자들이 이를 수정하고 업데이트를 배포합니다. 최신 버전을 사용함으로써, 알려진 취약점을 통한 공격을 방지할 수 있습니다.

마무리

XSS 공격은 웹 개발자라면 반드시 주의해야 할 보안 문제 중 하나입니다. 오늘 소개한 팁들을 통해 여러분의 웹사이트를 더 안전하게 만들 수 있기를 바랍니다. 보안은 항상 최우선으로 고려되어야 합니다. Happy coding!