XSS

// ✅ XSS 안전한 코드 예시들

// 1. textContent 사용 (HTML 해석 안 함)
function displayUserComment(comment) {
    document.getElementById('comments').textContent = comment;
    // <script> 태그도 텍스트로 표시됨
}

// 2. HTML 이스케이프 함수
function escapeHtml(unsafe) {
    return unsafe
        .replace(/&/g, "&amp;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#039;");
}

const safeComment = escapeHtml(userComment);
element.innerHTML = safeComment;

// 3. DOMPurify 라이브러리 사용 (HTML 허용 필요 시)
import DOMPurify from 'dompurify';

function displayRichContent(html) {
    const cleanHtml = DOMPurify.sanitize(html, {
        ALLOWED_TAGS: ['b', 'i', 'em', 'strong', 'a', 'p'],
        ALLOWED_ATTR: ['href']
    });
    document.getElementById('content').innerHTML = cleanHtml;
}

// 4. URL 검증 (javascript: 프로토콜 차단)
function isValidUrl(url) {
    try {
        const parsed = new URL(url);
        return ['http:', 'https:'].includes(parsed.protocol);
    } catch {
        return false;
    }
}

function setLink(url) {
    if (isValidUrl(url)) {
        document.getElementById('link').href = url;
    } else {
        console.error('Invalid URL');
    }
}

// 5. React에서 안전하게 처리
function Comment({ text }) {
    // 기본적으로 이스케이프됨
    return <p>{text}</p>;
}

// HTML 렌더링 필요 시 DOMPurify 사용
function RichComment({ html }) {
    const cleanHtml = DOMPurify.sanitize(html);
    return <div dangerouslySetInnerHTML={{ __html: cleanHtml }} />;
}

// 6. 서버 사이드 (Node.js Express)
const express = require('express');
const xss = require('xss');

app.post('/comment', (req, res) => {
    // 입력 살균
    const cleanComment = xss(req.body.comment);
    // 저장...
});

// 7. 템플릿 엔진 자동 이스케이프 (EJS)
// <%= user.name %>  자동 이스케이프
// <%- user.name %>  이스케이프 안 함 (위험!)

CSP (Content Security Policy) 설정
====================================

# HTTP 헤더로 설정
Content-Security-Policy: default-src 'self';
                         script-src 'self' https://trusted-cdn.com;
                         style-src 'self' 'unsafe-inline';
                         img-src 'self' data: https:;
                         font-src 'self' https://fonts.gstatic.com;
                         connect-src 'self' https://api.example.com;
                         frame-ancestors 'none';
                         base-uri 'self';
                         form-action 'self';

# HTML meta 태그로 설정
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'">


=== CSP 지시문 설명 ===

default-src 'self'
    기본: 같은 출처에서만 로드

script-src 'self' https://cdn.example.com
    스크립트: 자체 + 특정 CDN만 허용

script-src 'self' 'nonce-abc123'
    인라인 스크립트: nonce 일치 시만 실행
    <script nonce="abc123">...</script>

script-src 'self' 'sha256-hash...'
    특정 해시값의 스크립트만 허용

style-src 'self' 'unsafe-inline'
    인라인 스타일 허용 (XSS 위험 낮음)

img-src * data:
    이미지: 모든 출처 + data URI 허용

connect-src 'self'
    AJAX/WebSocket: 같은 출처만

frame-ancestors 'none'
    iframe 삽입 금지 (클릭재킹 방어)

upgrade-insecure-requests
    HTTP를 HTTPS로 자동 업그레이드


=== Node.js Express 설정 ===

const helmet = require('helmet');

app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://cdn.example.com"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'", "data:", "https:"],
        connectSrc: ["'self'", "https://api.example.com"],
        frameAncestors: ["'none'"],
        baseUri: ["'self'"],
        formAction: ["'self'"]
    }
}));

// 동적 nonce 생성
app.use((req, res, next) => {
    res.locals.nonce = crypto.randomBytes(16).toString('base64');
    next();
});


=== 보고 전용 모드 (테스트용) ===

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

// 위반 시 report-uri로 JSON 리포트 전송
// 정책 위반해도 차단하지 않음 (테스트용)