웹사이트 보안을 위한 React와 웹 보안 이슈

1. Cross-Site Scripting (XSS)

XSS란?

• 정의: 제3자가 웹사이트에 악성 스크립트를 삽입하여 실행할 수 있는 취약점
• 발생 조건: 사용자가 브라우저에서 입력한 내용을 다른 사용자에게 보여줄 수 있는 경우

XSS 공격 예시

const maliciousCode = 'alert("XSS 공격!")';
// 별도 조치 없이 게시글에 올리면 스크립트가 실행됨

 

위험성

• 팝업창 실행
• 쿠키 획득을 통한 로그인 세션 탈취
• 데이터 변경 위험

---

2. React에서의 XSS 방어

dangerouslySetInnerHTML 속성

주의사항:

• `__html` 키를 가진 객체만 인수로 받음
• 인수로 받는 문자열에는 제한이 없어 여전히 위험

---

안전한 코드 변환 (Sanitize/Escape)

 

추천 라이브러리:

• sanitize-html
• js-xss

특징:

• 사용 가능한 태그와 옵션을 직접 설정
• 보안을 위해 일일이 구현하는 것이 권장됨

---

서버 사이드 처리 권장

• 클라이언트보다 서버에서 sanitize 수행
• 쿼리, GET 파라미터, 사용자 입력 데이터 등 모든 외부 코드를 위험 코드로 간주

---

3. Next.js 보안 주의사항

Server-Side Props와 Server Components

• 반환되는 props의 모든 값이 HTML에 기록되고 전역 변수로 등록
• 필요한 값으로만 철저히 제한 필요

권장 방식:

// ❌ 전체 쿠키 제공
return { props: { cookies: allCookies } };

// ✅ 필요한 토큰만 제한적 반환
return { props: { token: requiredToken } };

---

HTTP 보안 헤더 설정

주요 보안 헤더들

1. Strict-Transport-Security

• 모든 사이트가 HTTPS를 통해 접근해야 함을 명시

2. X-Frame-Options

• 다른 사이트의 iframe에서 페이지 렌더링 방지
• 클릭재킹 공격 예방

3. Permissions-Policy

• 브라우저 기능(GPS, 카메라 등) 사용 권한 제어
• XSS 공격을 통한 기능 악용 방지

4. X-Content-Type-Options

• 브라우저가 MIME 타입을 추측하지 않도록 설정
• 악성 코드가 포함된 파일 실행 방지

5. Referrer-Policy

• 이전 방문 주소 정보 전송 제어
• 기본값: `strict-origin-when-cross-origin`

6. Content-Security-Policy (CSP)

• 웹페이지에서 로드되는 리소스의 출처와 허용 정책 제어

---

보안 헤더 설정 방법

Next.js

// next.config.js

module.exports = {
  async headers() {
    return [
      {
        source: '/(.*)',
        headers: [
          {
            key: 'X-Frame-Options',
            value: 'DENY'
          }
        ]
      }
    ];
  }
};

 

Nginx

add_header X-Frame-Options "DENY";
add_header X-Content-Type-Options "nosniff";

---

보안 헤더 확인

• SecurityHeaders.com에서 현재 보안 헤더 상태 확인 가능

---

취약점 관리

패키지 보안

• 핵심 패키지(React, Redux 등)의 버전과 패치 수정사항 주의
• Snyk.io에서 라이브러리 취약점 파악 가능

---

OWASP (Open Worldwide Application Security Project)

• 웹 보안 취약점 연구 프로젝트
• 2021년 기준 상위 10개 보안 취약점 공개