웹 개발 실무 기술 A to Z # 15 - 웹 애플리케이션 보안 및 데이터 보호: HTTPS, CORS, CSP 적용

웹 개발 실무 기술 A to Z

웹 애플리케이션에서 보안은 사용자의 개인정보 보호, 악성 공격 방지, 신뢰성 유지를 위해 필수적입니다.
✔️ HTTPS → 데이터 암호화를 통해 보안 강화
✔️ CORS (Cross-Origin Resource Sharing) → 외부 사이트로부터 API 보호
✔️ CSP (Content Security Policy) → XSS 및 데이터 변조 방지

이번 글에서는 웹 애플리케이션 보안을 강화하는 방법을 설명하겠습니다.

---

1. HTTPS – 데이터 암호화 및 전송 보안

1-1. HTTPS란?

✔️ **HyperText Transfer Protocol Secure (HTTPS)**는 HTTP에 SSL/TLS 암호화를 추가한 보안 프로토콜
✔️ 데이터를 암호화하여 중간자 공격(Man-in-the-Middle Attack)을 방지
✔️ 검색 엔진 최적화(SEO) 및 사용자 신뢰도 향상

---

1-2. HTTPS 적용 방법

(1) Let's Encrypt로 무료 SSL 인증서 적용 (NGINX)

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d example.com -d www.example.com

(2) Nginx HTTPS 설정 (/etc/nginx/sites-available/default)

server {
    listen 443 ssl;
    server_name example.com;

    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

    location / {
        proxy_pass http://localhost:3000;
    }
}

sudo systemctl restart nginx

✅ HTTPS를 적용하면 데이터가 암호화되어 해킹 위험 감소!

---

2. CORS – 크로스 사이트 요청 보호

2-1. CORS란?

✔️ **Cross-Origin Resource Sharing (CORS)**는 다른 도메인에서 API 요청을 제한하는 보안 정책
✔️ 웹 브라우저가 보안상의 이유로 특정 요청을 차단
✔️ API를 안전하게 공개할 도메인만 허용 가능

---

2-2. Express에서 CORS 설정

npm install cors

const cors = require("cors");
const express = require("express");

const app = express();

// 특정 도메인만 허용
app.use(cors({ origin: "https://example.com" }));

app.get("/api/data", (req, res) => {
  res.json({ message: "CORS 설정 완료!" });
});

app.listen(3000, () => console.log("Server running on port 3000"));

✅ CORS 설정을 통해 신뢰할 수 있는 도메인만 API 접근 허용 가능!

---

3. CSP – XSS 공격 방지

3-1. CSP(Content Security Policy)란?

✔️ 웹사이트에서 허용된 리소스만 실행하도록 제한하는 보안 정책
✔️ XSS(크로스 사이트 스크립팅) 및 코드 삽입 공격을 방지
✔️ 스크립트, 스타일, 이미지, 폰트 등의 출처를 제한 가능

---

3-2. CSP 적용 방법

(1) Express에서 CSP 적용

npm install helmet

const helmet = require("helmet");
const express = require("express");

const app = express();
app.use(
  helmet.contentSecurityPolicy({
    directives: {
      defaultSrc: ["'self'"],
      scriptSrc: ["'self'", "trusted-cdn.com"],
      styleSrc: ["'self'", "fonts.googleapis.com"],
    },
  })
);

app.get("/", (req, res) => {
  res.send("CSP 적용 완료!");
});

app.listen(3000, () => console.log("Server running on port 3000"));

✅ CSP를 적용하면 XSS 공격으로부터 보호 가능!

---

4. 웹 애플리케이션 보안 최적화

4-1. SQL Injection 방지 (Prepared Statements 사용)

const db = require("mysql2/promise");

app.post("/login", async (req, res) => {
  const { username, password } = req.body;
  const query = "SELECT * FROM users WHERE username = ? AND password = ?";
  const [rows] = await db.execute(query, [username, password]);
  res.json(rows);
});

✅ Prepared Statements를 사용하면 SQL Injection 공격 방어 가능!

---

4-2. Rate Limiting 적용 (DDoS 방어)

npm install express-rate-limit

const rateLimit = require("express-rate-limit");

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15분 동안
  max: 100, // 최대 100개 요청 허용
});

app.use("/api/", limiter);

✅ Rate Limiting을 적용하면 API 요청 남용 및 DDoS 공격 방지 가능!

---

5. 웹 보안 적용 전후 비교

5-1. 적용 전

• 데이터 암호화 없음 → HTTPS 미적용으로 해킹 위험 증가
• API 무제한 접근 가능 → CORS 미설정으로 보안 취약
• XSS 공격 가능 → CSP 미적용으로 악성 스크립트 실행 위험

5-2. 적용 후

✔️ HTTPS 활성화 → 데이터 암호화로 보안 강화
✔️ CORS 설정 → 신뢰할 수 있는 도메인만 API 접근 허용
✔️ CSP 적용 → XSS 공격 차단 및 코드 보안 강화

✅ 보안 정책을 적용하면 웹 애플리케이션이 안전하게 운영 가능!

---

6. 마무리 및 다음 글 예고

이번 글에서는 웹 애플리케이션 보안 강화를 위한 HTTPS, CORS, CSP 적용 방법을 살펴봤습니다.
다음 글에서는 **대규모 웹 애플리케이션 배포 및 운영 전략 (Docker, Kubernetes, CI/CD 최적화)**을 소개하겠습니다.

다음 글 예고: "대규모 웹 애플리케이션 배포 – Docker, Kubernetes, CI/CD 최적화" 🚀