XSS 방어 · CSRF 방어와 인증 · SQL 인젝션 방어 · HTTPS와 환경변수 관리

[공격자] 댓글에 <script>document.cookie를 전송</script>
[서버] DB에 저장
[피해자] 페이지 방문 시 자동 실행

악성 URL: https://bank.com/search?q=<script>...</script>
공격자가 피해자에게 이메일로 전송 → 서버 응답에 그대로 반사 → 실행

// 취약: URL 해시를 그대로 innerHTML
const hash = location.hash.substring(1);
document.getElementById('output').innerHTML = hash;

// 공격: https://site.com/#<img src=x onerror=악성코드>

// ✗ 절대 금지
element.innerHTML = userInput;
// 공격자: '<img src=x onerror="document.cookie 전송">' → XSS!

// ✓ textContent (HTML 태그를 텍스트로)
element.textContent = userInput;
// '<script>...' 가 그대로 화면에 텍스트로 표시

// ✓ createElement + textContent
const p = document.createElement('p');
p.textContent = userInput;
container.appendChild(p);

function escapeHtml(str) {
  return str
    .replace(/&/g,  '&')
    .replace(/</g,  '&lt;')
    .replace(/>/g,  '&gt;')
    .replace(/"/g,  '&quot;')
    .replace(/'/g,  '&#x27;');
}

// <script>alert(1)</script>
// → &lt;script&gt;alert(1)&lt;/script&gt;
// → 화면에 텍스트로만 표시

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>

const dirty = '<img src=x onerror=alert(1)> <b>안전한 텍스트</b>';
const clean = DOMPurify.sanitize(dirty);
// 결과: " <b>안전한 텍스트</b>"   ← onerror 제거, 안전한 태그 유지

element.innerHTML = DOMPurify.sanitize(userInput);

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; " +
    "script-src 'self'; " +
    "style-src 'self' 'unsafe-inline';"
  );
  next();
});

// 권장: helmet
const helmet = require('helmet');
app.use(helmet());

1. 피해자가 bank.com 로그인 (세션 쿠키)
2. 공격자가 evil.com에 악성 폼 심어둠:
   <form action="https://bank.com/transfer" method="POST">
     <input name="to"     value="공격자계좌">
     <input name="amount" value="1000000">
   </form>
   <script>document.forms[0].submit();</script>
3. 피해자가 evil.com 방문
4. 브라우저가 bank.com에 자동으로 쿠키 포함하여 POST
5. bank.com은 유효한 세션으로 판단 → 송금 실행!

// Strict: 같은 사이트에서의 요청에만
res.cookie('sessionId', token, {
  httpOnly: true,
  secure: true,
  sameSite: 'Strict',
});

// Lax: GET은 허용, POST는 차단 (권장)
res.cookie('sessionId', token, { sameSite: 'Lax' });

// None: 크로스사이트 허용 (Secure 필수)
res.cookie('sessionId', token, { sameSite: 'None', secure: true });

// 1. 토큰 생성 (서버)
const crypto = require('crypto');
const csrfToken = crypto.randomBytes(32).toString('hex');
req.session.csrfToken = csrfToken;
res.render('form', { csrfToken });

<form method="POST" action="/transfer">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>">
  <input name="amount" type="number">
  <button type="submit">송금</button>
</form>

function csrfProtect(req, res, next) {
  if (['POST', 'PUT', 'DELETE', 'PATCH'].includes(req.method)) {
    const submitted = req.body._csrf || req.headers['x-csrf-token'];
    const stored = req.session.csrfToken;
    if (!submitted || submitted !== stored) {
      return res.status(403).json({ error: 'CSRF 토큰 검증 실패' });
    }
  }
  next();
}

[클라이언트] ── POST /login ──> [서버]
                              세션 생성 { userId: 1 }
              <── Set-Cookie: sid=abc ── 저장소(Redis/DB)에 저장

[클라이언트] ── GET /profile ──> [서버] (Cookie: sid=abc)
                              저장소에서 세션 조회 → userId 확인

[클라이언트] ── POST /login ──> [서버]
                              JWT 생성 { userId: 1, exp }
              <── JWT 토큰 ────── (서버에 저장 안 함)

[클라이언트] ── GET /profile ──> [서버] (Authorization: Bearer eyJ...)
                              JWT 서명 검증 → userId 확인

res.cookie('token', value, {
  httpOnly: true,    // JS에서 document.cookie 접근 불가 → XSS로 쿠키 탈취 방지
  secure: true,      // HTTPS에서만 전송 → 도청 방지
  sameSite: 'Lax',  // CSRF 방어
  maxAge: 7 * 24 * 60 * 60 * 1000,  // 7일
  path: '/',
});

// 취약: 사용자 입력을 문자열로 직접 삽입
const query = `SELECT * FROM users WHERE username = '${username}' AND password = '${password}'`;

SELECT * FROM users WHERE username = 'admin' --' AND password = '아무거나'
-- 이후가 주석 처리 → 비밀번호 확인 없이 admin 로그인!

-- 항상 참
' OR '1'='1
' OR 1=1 --

-- 주석으로 무력화
admin' --
admin'/*

-- UNION으로 다른 쿼리
' UNION SELECT username, password FROM users --

-- 데이터 삭제
'; DROP TABLE users; --

// ✗ 취약
const query = `SELECT * FROM users WHERE username = '${username}'`;
db.query(query);

// ✓ 안전
const stmt = db.prepare('SELECT * FROM users WHERE username = ? AND password = ?');
const user = stmt.get(username, password);
// username에 ' OR 1=1 --  를 넣어도 SQL로 해석되지 않고 그냥 문자열로 처리

// Prisma — 자동으로 Prepared Statement
const user = await prisma.user.findFirst({
  where: { username: username }
});
// 내부: SELECT * FROM users WHERE username = $1
// username 값은 항상 데이터로 처리됨

// Mongoose — NoSQL이라 SQL 인젝션 없음 (NoSQL 인젝션 별도 주의)
const user = await User.findOne({ username: username });

// 컬럼명/테이블명은 Prepared Statement로 해결 불가
const ALLOWED_SORT_COLUMNS = ['name', 'price', 'created_at'];
const ALLOWED_ORDERS = ['ASC', 'DESC'];

function buildSafeQuery(sortBy, order) {
  const safeColumn = ALLOWED_SORT_COLUMNS.includes(sortBy) ? sortBy : 'created_at';
  const safeOrder = ALLOWED_ORDERS.includes(order?.toUpperCase()) ? order.toUpperCase() : 'DESC';

  return `SELECT * FROM products ORDER BY ${safeColumn} ${safeOrder}`;
}

// ✗ 나쁜 예 — DB 구조 노출
catch (err) {
  res.status(500).json({ error: err.message });
  // "SQLITE_ERROR: no such table: users" → 테이블 이름 노출!
}

// ✓ 좋은 예
catch (err) {
  console.error('[에러]', err);  // 서버 로그
  res.status(500).json({ error: '검색 중 오류가 발생했습니다.' });
}

HTTP  (평문):  클라이언트 ── 비밀번호:abc123 ─> 서버
                              ↑ 중간자가 읽을 수 있음

HTTPS (암호화): 클라이언트 ── 5h#@x9!K3m... ──> 서버
                              ↑ 암호화 — 해독 불가

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.com

# 자동 갱신 (90일 만료)
sudo certbot renew --dry-run

app.use((req, res, next) => {
  // HTTPS만 허용 (1년)
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');

  // 클릭재킹 방지 (iframe 삽입 차단)
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');

  // MIME 스니핑 방지
  res.setHeader('X-Content-Type-Options', 'nosniff');

  // 참조 URL 정보 제한
  res.setHeader('Referrer-Policy', 'strict-origin-when-cross-origin');

  // 리소스 출처 제한 (XSS 방어 보조)
  res.setHeader('Content-Security-Policy', "default-src 'self'");

  next();
});

npm install helmet

const helmet = require('helmet');

// 모든 보안 헤더 한 번에
app.use(helmet());

// 또는 개별 설정
app.use(helmet({
  contentSecurityPolicy: {
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc:  ["'self'", "https://cdn.example.com"],
    },
  },
  hsts: { maxAge: 31536000, includeSubDomains: true },
}));

// ✗ 하드코딩
const DB_PASSWORD = 'my_secret_password';
const JWT_SECRET = 'jwt-secret-key-123';
const API_KEY = 'sk-abcdefghijk12345';

// ✗ package.json에도 금지
{
  "scripts": {
    "start": "DB_PASSWORD=secret node app.js"
  }
}

DATABASE_URL=mongodb+srv://user:pass@cluster.mongodb.net/db
JWT_SECRET=매우긴랜덤문자열여기에
API_KEY=sk-abcdefghijk12345
SESSION_SECRET=또다른랜덤문자열
PORT=3000

require('dotenv').config();

mongoose.connect(process.env.DATABASE_URL);

const JWT_SECRET = process.env.JWT_SECRET;
if (!JWT_SECRET) {
  console.error('JWT_SECRET이 설정되지 않았습니다!');
  process.exit(1);  // 시크릿 없으면 서버 시작 거부
}

# .gitignore
.env
.env.local
.env.production
*.pem          # SSL 인증서
node_modules/

# .env.example (Git에 포함 — 실제 값 없이 키만)
DATABASE_URL=your_mongodb_connection_string
JWT_SECRET=generate_a_random_string_here
API_KEY=your_api_key_here
SESSION_SECRET=another_random_string
PORT=3000

# 히스토리에서 시크릿 파일 제거
git filter-branch --force --index-filter \
    'git rm --cached --ignore-unmatch .env' \
    --prune-empty --tag-name-filter cat -- --all

# 또는 BFG Repo Cleaner (더 안전)
bfg --delete-files .env

# pre-commit hook으로 커밋 전 검사
npm install -g git-secrets
git secrets --install
git secrets --register-aws