June 29, 2025

💀 eval() 또는 new Function()으로 동적 코드 실행하기: 보안과 성능의 무덤

보안

JavaScript

성능

에러처리

Summary

eval() 및 new Function()은 문자열을 코드로 실행하여 웹 애플리케이션에 심각한 보안 취약점(XSS)을 야기하고, 성능 저하 및 디버깅의 어려움을 초래합니다. 대신 JSON.parse(), 템플릿 엔진, 또는 함수 콜백과 같은 안전하고 효율적인 대안을 사용하여 보안과 코드 품질을 확보해야 합니다.

Why Wrong?

1. 심각한 보안 취약점 (XSS)

eval() 함수는 인수로 전달된 문자열을 JavaScript 코드로 해석하고 실행합니다. 이는 사용자 입력과 같은 신뢰할 수 없는 소스의 문자열을 eval()에 전달할 경우, 공격자가 임의의 코드를 웹 애플리케이션 내에서 실행할 수 있는 XSS(Cross-Site Scripting) 취약점으로 이어질 수 있습니다. 예를 들어, 악성 스크립트를 주입하여 사용자 세션을 탈취하거나 민감한 정보를 유출할 수 있습니다.

new Function() 생성자 역시 유사한 보안 위험을 내포합니다. 문자열로 함수 본문을 정의하기 때문에, 신뢰할 수 없는 소스의 문자열을 사용하면 eval()과 동일한 공격 벡터가 발생합니다.

2. 성능 저하 및 최적화 방해

JavaScript 엔진은 코드를 미리 파싱하고 최적화하여 실행 속도를 높입니다. 하지만 eval()이나 new Function()으로 동적으로 생성된 코드는 런타임에 파싱 및 컴파일 과정을 거쳐야 하므로, 미리 최적화된 코드보다 훨씬 느리게 실행될 수 있습니다. 또한, eval()은 호출되는 스코프를 변경할 수 있는 특성 때문에, JIT(Just-In-Time) 컴파일러가 해당 스코프의 변수나 함수를 최적화하는 것을 방해하여 전체 애플리케이션의 성능에도 악영향을 미칠 수 있습니다.

3. 디버깅의 어려움

동적으로 생성된 코드는 소스 맵(Source Map) 지원이 어렵거나 불가능하여, 예상치 못한 오류가 발생했을 때 디버깅하기가 매우 어렵습니다. 스택 트레이스에서 eval code 또는 anonymous 등으로 표시되어 문제의 근원을 파악하기 힘들어집니다.

4. CSP(Content Security Policy) 위반

대부분의 현대 웹 애플리케이션은 XSS 공격을 완화하기 위해 엄격한 CSP를 사용합니다. eval()이나 new Function() 같은 동적 코드 실행 메서드는 CSP의 unsafe-eval 지시어를 필요로 하며, 이는 보안 정책을 약화시킵니다. 강력한 CSP는 이러한 동적 코드 실행을 기본적으로 차단하여 애플리케이션이 작동하지 않게 만들 수 있습니다.

How to Fix?

1. `JSON.parse()` 활용 (JSON 데이터 처리 시)

eval()의 가장 흔한 오용 사례 중 하나는 JSON 문자열을 JavaScript 객체로 변환하는 것입니다. 이 경우 반드시 JSON.parse()를 사용해야 합니다. JSON.parse()는 JSON 표준에 맞는 문자열만 안전하게 파싱하며, JavaScript 코드로 해석하지 않아 보안 위험이 없습니다.

2. 템플릿 엔진 또는 프레임워크의 렌더링 기능 활용 (동적 UI/HTML 생성 시)

동적으로 UI를 생성해야 한다면, React의 JSX, Vue의 템플릿, 또는 Handlebars, Pug와 같은 안전한 템플릿 엔진을 사용하세요. 이들은 사용자 입력을 자동으로 이스케이프 처리하여 XSS 공격을 방지하고, 코드와 데이터의 분리를 명확히 하여 유지보수성을 높입니다.

3. 함수 매개변수 또는 설정 객체 사용 (동적 로직 구현 시)

동적인 동작이 필요하다면, 문자열을 코드로 실행하는 대신 함수를 매개변수로 전달하거나, 설정 객체를 통해 동작을 제어하는 방식을 사용하세요. 이는 훨씬 안전하고 디버깅하기 쉬운 접근 방식입니다.

4. 웹 어셈블리 (WebAssembly) 고려 (고성능 계산 로직)

매우 복잡하거나 성능이 중요한 계산 로직을 동적으로 로드하고 실행해야 한다면, 웹 어셈블리를 고려할 수 있습니다. 웹 어셈블리는 JavaScript와는 다른 이진 형식으로, 샌드박스 환경에서 실행되어 보안성이 높고 성능도 뛰어납니다.

핵심은 '코드 실행'이 아닌 '데이터 처리' 또는 '함수 전달'로 문제를 해결하는 것입니다. 이는 코드의 안정성, 보안성, 그리고 유지보수성을 크게 향상시킵니다.

Before Code (Bad)

// case 1: JSON 문자열을 객체로 변환
const unsafeJsonString = "({ name: 'Alice', age: 30 })"; // 실제로는 사용자 입력 등 외부에서 올 수 있음
const user = eval(unsafeJsonString); // 🚨 보안 취약점: XSS 위험!
console.log(user.name);

// case 2: 동적으로 함수 생성
const operation = 'a + b';
const calculate = new Function('a', 'b', `return ${operation};`); // 🚨 보안 취약점 및 성능 저하
console.log(calculate(5, 3));

// case 3: setTimeout/setInterval에 문자열 전달 (eval과 유사)
const maliciousCode = "alert('세션 탈취됨!');";
setTimeout(maliciousCode, 1000); // 🚨 eval과 동일한 보안 위험!

After Code (Good)

// case 1: JSON 문자열을 객체로 변환
// 사용자 입력이 JSON 형태로 올 경우, 반드시 JSON.parse() 사용
const safeJsonString = '{"name": "Bob", "age": 25}'; 
try {
  const user = JSON.parse(safeJsonString); // ✨ 안전하고 효율적인 방법
  console.log(user.name);
} catch (e) {
  console.error('JSON 파싱 에러:', e);
}

// case 2: 동적으로 함수 생성 (데이터/함수 전달 방식)
const operationFunction = (a, b) => a + b; // 미리 정의된 함수 사용
console.log(operationFunction(5, 3));

// 또는 설정 객체를 통해 동적 동작 제어
const config = {
  operation: 'add',
  perform: (a, b) => a + b
};
console.log(config.perform(5, 3));

// case 3: setTimeout/setInterval에 함수 전달
const secureAction = () => {
  console.log('안전하게 실행되었습니다.');
};
setTimeout(secureAction, 1000); // ✨ 함수 참조를 직접 전달