🚀【시큐어코딩】자바스크립트 시큐어코딩 가이드, 보안취약점 예방방법

JavaScript(ES2023 기준)을 기반으로 시큐어코딩(Secure Coding)에 대해 깊이 있게 알아보고,

Express.js, Node.js 등의 프레임워크를 활용한 실제 코드 예시를 통해 XSS, CSRF, SQL Injection 등의 보안 취약점을 예방하는 전략을 소개해드릴게요.

 

JavaScript 보안 취약점과 예방 방법

JavaScript 기반 웹 애플리케이션은 다양한 보안 위협에 노출될 수 있습니다. 이번 가이드에서는 XSS, CSRF, SQL Injection 등 주요 보안 취약점을 방지하는 방법을 살펴보겠습니다.

 

1. XSS(크로스 사이트 스크립팅) 방지

XSS는 악성 스크립트를 주입하여 사용자의 데이터를 탈취하는 공격입니다.

❌ 취약한 코드 예제

const userInput = "alert('XSS')"; document.getElementById("output").innerHTML = userInput; // XSS 취약 

✅ 안전한 코드 예제

const userInput = "alert('XSS')"; document.getElementById("output").textContent = userInput; // 안전한 출력 

✅ CSP(Content Security Policy) 설정

Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedapis.com
        

 

2. CSRF(크로스 사이트 요청 위조) 방지

CSRF는 사용자의 인증 정보를 이용해 악의적인 요청을 보내는 공격입니다.

✅ CSRF 토큰 사용

fetch("/update-profile", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "X-CSRF-Token": csrfToken,
  },
  body: JSON.stringify({ name: "John Doe" }),
});
        

✅ SameSite 쿠키 설정

Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Strict
        

 

3. SQL Injection 방지

SQL Injection은 악성 SQL 쿼리를 실행하여 데이터베이스를 조작하는 공격입니다.

❌ 취약한 코드 예제 (Express.js + MySQL)

const express = require('express');
const mysql = require('mysql2');

const app = express();
const connection = mysql.createConnection({ host: 'localhost', user: 'root', database: 'test' });

app.get('/user', (req, res) => {
    const username = req.query.username;
    const query = `SELECT * FROM users WHERE username = '${username}'`;  // SQL Injection 취약
    connection.query(query, (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});
        

✅ 안전한 코드 예제 (Prepared Statement 사용)

app.get('/user', (req, res) => {
    const username = req.query.username;
    const query = "SELECT * FROM users WHERE username = ?";
    connection.query(query, [username], (err, results) => {
        if (err) throw err;
        res.json(results);
    });
});
        

 

4. 안전한 코드 작성 습관

✅ eval() 사용 금지

// ❌ 위험한 코드
eval("alert('Hello')");

// ✅ 안전한 대안
const func = new Function("alert('Hello')");
func();
        

✅ 동적 import 보안

// ❌ 사용자 입력을 기반으로 import하는 것은 위험
import(userInput).then((module) => module.run());

// ✅ 안전한 import 방식
import("./safeModule.js").then((module) => module.run());
        

 

5. 보안 헤더 설정

보안 헤더를 설정하면 다양한 공격을 방지할 수 있습니다.

const helmet = require("helmet");
app.use(helmet());
        

주요 보안 헤더 설정:

• X-Content-Type-Options: nosniff → MIME 스니핑 방지
• X-Frame-Options: DENY → 클릭재킹 방지
• Referrer-Policy: no-referrer → 민감한 정보 유출 방지

 

결론 🎯

JavaScript 기반 웹 애플리케이션의 보안을 강화하려면 다음을 실천하세요.

• XSS: 사용자 입력 필터링 및 출력 시 인코딩 적용
• CSRF: CSRF 토큰 및 SameSite 쿠키 설정
• SQL Injection: Prepared Statement 또는 ORM 사용
• 보안 헤더 설정: helmet 등의 라이브러리 활용

앞으로도 지속적으로 보안 가이드를 업데이트하여 여러분이 더욱 안전한 소프트웨어를 개발할 수 있도록 돕겠습니다! 🚀

 

Happy coding and stay secure! 🔒✨