<!-- 1. 보안 헤더 누락 -->
<!-- HTTP Response Headers에 X-Frame-Options, CSP, HSTS 등 누락 -->

<!-- 2. 하드코딩된 API 시크릿 키 -->
<script>
  const API_KEY = "sk_live_9988776654321abcdef012345";
  const ADMIN_SECRET = "admin_super_secret_token_xyz";
</script>

<!-- 3. DOM Based XSS 취약점 -->
<div id="user-bio"></div>
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const bio = urlParams.get('bio');
  document.getElementById('user-bio').innerHTML = bio;
</script>

<!-- 4. CSRF 방어 토큰 누락된 폼 -->
<form action="/api/transfer" method="POST">
  <input type="text" name="amount" />
  <input type="text" name="recipient" />
  <button type="submit">전송</button>
</form>

<!-- 5. 무결성 검증(SRI) 없는 외부 CDN 스크립트 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 6. 인라인 스크립트 및 위험한 eval 사용 -->
<script>
  function evaluateData(userInput) {
    return eval(userInput);
  }
</script>

<!-- 7. 민감 정보 입력 필드 자동완성 허용 -->
<form action="/login" method="POST">
  <input type="password" name="password" />
</form>

<!-- 8. 안전하지 않은 링크 (window.opener 취약점) -->
<a href="https://external-site.com" target="_blank">외부 링크</a>

<!-- 9. 콘솔 로그에 민감한 사용자 세션 노출 -->
<script>
  console.log("User Session Token: ", localStorage.getItem('session_token'));
</script>

<!-- 10. CORS 설정 오류 및 인증 정보 포함 요청 -->
<script>
  fetch('https://api.example.com/data', { credentials: 'include' });
</script>

/* 1. 보안 헤더 설정 (Nginx / Apache / Express 등 서버 단 및 메타 태그 적용) */
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; object-src 'none';">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="Strict-Transport-Security" content="max-age=63072000; includeSubDomains; preload">

/* 2. 시크릿 키 제거 및 백엔드 프록시 패턴 적용 */
<script>
  // API 키는 절대 프론트엔드에 노출하지 않고, 백엔드 API Gateway를 통해 통신합니다.
  async function fetchSecureData() {
    const response = await fetch('/api/v1/secure-proxy');
    return response.json();
  }
</script>

/* 3. DOM XSS 방어 (textContent 사용 및 입력값 새니타이제이션) */
<div id="user-bio"></div>
<script>
  const urlParams = new URLSearchParams(window.location.search);
  const bio = urlParams.get('bio') || '';
  // innerHTML 대신 textContent를 사용하여 HTML 파싱을 방지합니다.
  document.getElementById('user-bio').textContent = bio;
</script>

/* 4. CSRF 방어 토큰 포함된 안전한 폼 */
<form action="/api/transfer" method="POST">
  <input type="hidden" name="csrf_token" value="a8f5c9e2b1d43f7a8e9c0b1a2d3e4f5a" />
  <input type="text" name="amount" />
  <input type="text" name="recipient" />
  <button type="submit">전송</button>
</form>

/* 5. SRI(Subresource Integrity)가 적용된 외부 CDN 스크립트 */
<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
        integrity="sha384-vtXRMe3mGCbOeY7l30aIg8H9p3GdeSe4IFlP6G8JMa7o7lXvnz3GFKzPxzJdPfGK" 
        crossorigin="anonymous"></script>

/* 6. eval 제거 및 안전한 파싱 로직 구현 */
<script>
  function evaluateData(userInput) {
    // eval() 대신 JSON.parse() 등을 활용하여 안전하게 데이터를 처리합니다.
    try {
      return JSON.parse(userInput);
    } catch (e) {
      console.error('Invalid JSON input');
      return null;
    }
  }
</script>

/* 7. 민감 정보 입력 필드 자동완성 차단 */
<form action="/login" method="POST" autocomplete="off">
  <input type="password" name="password" autocomplete="new-password" />
</form>

/* 8. rel='noopener noreferrer'가 적용된 안전한 외부 링크 */
<a href="https://external-site.com" target="_blank" rel="noopener noreferrer">외부 링크</a>

/* 9. 프로덕션 환경 콘솔 로그 제거 */
<script>
  if (window.location.hostname === 'localhost') {
    console.log("Debug mode active");
  }
  // localStorage 대신 HttpOnly 쿠키를 사용하여 XSS로부터 토큰을 보호합니다.
</script>

/* 10. 엄격한 CORS 및 자격 증명 관리 */
<script>
  // 신뢰할 수 있는 오리진과의 통신만 허용하며 자격 증명 제어를 명확히 합니다.
  fetch('https://api.example.com/data', { 
    credentials: 'same-origin',
    headers: { 'Content-Type': 'application/json' }
  });
</script>