🚫 문제 상황

한 전자상거래 사이트에서 <payment-form> 컴포넌트를 사용했어요. 이 컴포넌트는 사용자의 신용카드 정보를 입력받아 처리했는데, 다음과 같은 보안 취약점이 있었어요:

1. 신용카드 정보가 HTML 속성으로 저장됨
2. Shadow DOM을 사용하지 않아 외부에서 내부 요소에 접근 가능
3. 사용자 입력을 검증 없이 처리

// 🚫 취약한 결제 폼 컴포넌트
class UnsafePaymentForm extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <form id="payment-form">
        <input type="text" id="card-number" placeholder="카드 번호">
        <input type="text" id="expiry" placeholder="만료일">
        <input type="text" id="cvv" placeholder="CVV">
        <button type="submit">결제하기</button>
      </form>
    `;
    
    this.querySelector('#payment-form').addEventListener('submit', (e) => {
      e.preventDefault();
      
      // 카드 정보를 속성으로 저장 (매우 위험!)
      this.setAttribute('card-number', this.querySelector('#card-number').value);
      
      // API 호출 (클라이언트에서 직접 처리)
      this.processPayment({
        cardNumber: this.getAttribute('card-number'),
        expiry: this.querySelector('#expiry').value,
        cvv: this.querySelector('#cvv').value
      });
    });
  }
  
  processPayment(paymentData) {
    // 결제 처리 로직...
    fetch('/api/process-payment', {
      method: 'POST',
      body: JSON.stringify(paymentData)
    });
  }
}

⚠️ 발생 가능한 공격

이 취약한 컴포넌트는 다음과 같은 공격에 노출될 수 있어요:

1. DOM 조작 공격 - 공격자가 JavaScript로 폼 요소에 직접 접근해 데이터를 탈취
2. 속성 탈취 - 카드 정보가 HTML 속성으로 저장되어 쉽게 접근 가능
3. XSS 공격 - 검증되지 않은 입력이 처리되어 스크립트 삽입 가능

// 🚫 공격 예시
// DOM 조작으로 카드 정보 탈취
const cardNumber = document.querySelector('payment-form #card-number').value;
sendToAttacker(cardNumber);

// 속성에서 정보 탈취
const storedCardNumber = document.querySelector('payment-form').getAttribute('card-number');
sendToAttacker(storedCardNumber);

✅ 해결 방법

이 문제를 해결하기 위해 다음과 같이 컴포넌트를 개선했어요:

1. Shadow DOM을 사용해 내부 요소 캡슐화
2. 민감한 정보는 private 필드에 저장
3. 사용자 입력 검증 추가
4. 결제 처리는 서버 측에서 수행

// ✅ 안전한 결제 폼 컴포넌트
class SecurePaymentForm extends HTMLElement {
  // private 필드
  #paymentData;
  
  constructor() {
    super();
    this.#paymentData = {};
    
    // Shadow DOM 사용 (closed 모드)
    this.attachShadow({ mode: 'closed' });
    
    // 템플릿 생성
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host { display: block; border: 1px solid #ccc; padding: 16px; }
        input { margin: 8px 0; width: 100%; padding: 8px; }
        button { padding: 8px 16px; background: #4285f4; color: white; border: none; }
      </style>
      <form id="payment-form">
        <input type="text" id="card-number" placeholder="카드 번호">
        <input type="text" id="expiry" placeholder="만료일">
        <input type="text" id="cvv" placeholder="CVV">
        <button type="submit">결제하기</button>
      </form>
    `;
    
    // Shadow DOM에 템플릿 추가
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    
    // 이벤트 리스너 추가
    this.shadowRoot.querySelector('#payment-form').addEventListener('submit', this.#handleSubmit.bind(this));
  }
  
  // private 메서드
  #handleSubmit(e) {
    e.preventDefault();
    
    const cardNumber = this.shadowRoot.querySelector('#card-number').value;
    const expiry = this.shadowRoot.querySelector('#expiry').value;
    const cvv = this.shadowRoot.querySelector('#cvv').value;
    
    // 입력 검증
    if (!this.#validateCardNumber(cardNumber)) {
      this.#showError('유효하지 않은 카드 번호입니다.');
      return;
    }
    
    if (!this.#validateExpiry(expiry)) {
      this.#showError('유효하지 않은 만료일입니다.');
      return;
    }
    
    if (!this.#validateCVV(cvv)) {
      this.#showError('유효하지 않은 CVV입니다.');
      return;
    }
    
    // 민감한 정보는 private 필드에 저장
    this.#paymentData = {
      cardNumberHash: this.#hashCardNumber(cardNumber),
      expiry,
      cvv
    };
    
    // 토큰 기반 결제 처리 (카드 정보 직접 전송 안 함)
    this.#getPaymentToken()
      .then(token => {
        // 토큰만 서버로 전송
        return fetch('/api/process-payment', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ token })
        });
      })
      .then(response => response.json())
      .then(result => {
        if (result.success) {
          this.dispatchEvent(new CustomEvent('payment-success'));
        } else {
          this.#showError('결제 처리 중 오류가 발생했습니다.');
        }
      })
      .catch(error => {
        this.#showError('결제 처리 중 오류가 발생했습니다.');
        console.error(error);
      })
      .finally(() => {
        // 처리 후 민감한 정보 삭제
        this.#paymentData = {};
      });
  }
  
  #validateCardNumber(cardNumber) {
    // 카드 번호 검증 로직
    return /^\d{16}$/.test(cardNumber.replace(/\s/g, ''));
  }
  
  #validateExpiry(expiry) {
    // 만료일 검증 로직
    return /^\d{2}\/\d{2}$/.test(expiry);
  }
  
  #validateCVV(cvv) {
    // CVV 검증 로직
    return /^\d{3,4}$/.test(cvv);
  }
  
  #hashCardNumber(cardNumber) {
    // 실제로는 더 안전한 해싱 알고리즘 사용
    return 'xxxx-xxxx-xxxx-' + cardNumber.slice(-4);
  }
  
  #getPaymentToken() {
    // 결제 프로세서로부터 토큰 받기
    return fetch('/api/get-payment-token', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        // 필요한 최소한의 정보만 전송
        last4: this.#paymentData.cardNumberHash.slice(-4),
        expiry: this.#paymentData.expiry
      })
    })
    .then(response => response.json())
    .then(data => data.token);
  }
  
  #showError(message) {
    // 에러 표시 로직
    const errorElement = document.createElement('div');
    errorElement.style.color = 'red';
    errorElement.textContent = message;
    
    const form = this.shadowRoot.querySelector('#payment-form');
    form.appendChild(errorElement);
    
    // 3초 후 에러 메시지 제거
    setTimeout(() => {
      form.removeChild(errorElement);
    }, 3000);
  }
}

🚫 문제 상황

한 대시보드 애플리케이션에서 <data-display> 컴포넌트를 사용해 사용자 데이터를 표시했어요. 이 컴포넌트는 다음과 같은 보안 취약점이 있었어요:

1. 외부 API에서 받은 데이터를 검증 없이 innerHTML로 삽입
2. 사용자 생성 콘텐츠를 그대로 표시

// 🚫 취약한 데이터 표시 컴포넌트
class UnsafeDataDisplay extends HTMLElement {
  connectedCallback() {
    const dataUrl = this.getAttribute('data-url');
    
    fetch(dataUrl)
      .then(response => response.json())
      .then(data => {
        // 🚫 데이터를 검증 없이 innerHTML로 삽입
        this.innerHTML = `
          <div class="data-container">
            <h2>${data.title}</h2>
            <div class="content">${data.content}</div>
          </div>
        `;
      });
  }
}

⚠️ 발생한 공격

악의적인 사용자가 API에 다음과 같은 데이터를 삽입했어요:

{
  "title": "XSS 공격",
  "content": "<img src='x' onerror='alert(document.cookie)'>"
}

이 데이터가 컴포넌트에 표시되면서 XSS 공격이 실행되어 사용자의 쿠키가 노출되었어요!

✅ 해결 방법

이 문제를 해결하기 위해 다음과 같이 컴포넌트를 개선했어요:

1. DOMPurify 라이브러리를 사용해 HTML 콘텐츠 정화
2. Shadow DOM을 사용해 내부 구현 캡슐화
3. Content Security Policy 적용

// ✅ 안전한 데이터 표시 컴포넌트
class SecureDataDisplay extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    const dataUrl = this.getAttribute('data-url');
    
    // 템플릿 생성
    const template = document.createElement('template');
    template.innerHTML = `
      <style>
        :host { display: block; border: 1px solid #eee; padding: 16px; }
        .data-container { max-width: 100%; }
        h2 { color: #333; }
        .content { line-height: 1.5; }
      </style>
      <div class="data-container">
        <h2 id="title"></h2>
        <div id="content" class="content"></div>
      </div>
    `;
    
    // Shadow DOM에 템플릿 추가
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    
    // 데이터 로드 및 안전하게 표시
    fetch(dataUrl)
      .then(response => response.json())
      .then(data => {
        // 제목은 textContent로 안전하게 설정
        this.shadowRoot.getElementById('title').textContent = data.title;
        
        // 내용은 DOMPurify로 정화 후 설정
        const sanitizedContent = DOMPurify.sanitize(data.content, {
          ALLOWED_TAGS: ['p', 'b', 'i', 'em', 'strong', 'a', 'ul', 'ol', 'li'],
          ALLOWED_ATTR: ['href', 'target']
        });
        
        this.shadowRoot.getElementById('content').innerHTML = sanitizedContent;
      })
      .catch(error => {
        console.error('데이터 로드 중 오류 발생:', error);
        this.shadowRoot.getElementById('content').textContent = '데이터를 로드할 수 없습니다.';
      });
  }
}

추가로, 웹사이트에 다음과 같은 Content Security Policy를 적용했어요:

// HTTP 헤더
Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';