자바스크립트(JavaScript)의 eval() 함수는 인수로 전달받은 문자열을 평가하여 실제 자바스크립트 코드로 실행하는 역할을 합니다. 문자열 형태의 표현식이나 명령문을 그대로 코드처럼 동작시킬 수 있다는 점에서 강력하지만, 동시에 보안상 매우 위험한 함수로 분류됩니다.
그 이유는 외부에서 입력받은 값을 검증 없이 eval()에 전달할 경우, 공격자가 악성 코드를 문자열에 담아 삽입할 수 있기 때문입니다. 이러한 취약점은 XSS(교차 사이트 스크립팅) 공격으로 직결될 수 있으므로, eval()의 사용은 가급적 피하고 대체 방법을 찾는 것이 권장됩니다.
eval() 함수 예제 코드
다음은 자바스크립트에서 eval() 함수를 활용하는 방법을 보여주는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript eval() function</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see eval() usage</h3>
<script>
let resEle = document.querySelector(".result");
let BtnEle = document.querySelector(".Btn");
function multiply(a, b) {
return a * b;
}
BtnEle.addEventListener("click", () => {
resEle.innerHTML += eval("12+92") + "";
eval('resEle.innerHTML += "Hello world "');
resEle.innerHTML += eval("multiply(12,33)");
});
</script>
</body>
</html>위 예제에서 eval()은 세 가지 방식으로 사용되었습니다.
- "12+92" : 단순 산술 표현식을 문자열로 전달하여 계산 결과를 반환합니다.
- DOM 조작 코드 : 문자열로 작성된 자바스크립트 문장을 실행해 화면에 텍스트를 추가합니다.
- "multiply(12,33)" : 미리 정의된 함수 호출도 문자열 형태로 실행할 수 있음을 보여줍니다.
실행 결과
위 코드를 브라우저에서 실행하면 다음과 같은 초기 화면이 나타납니다.
이후 'CLICK HERE' 버튼을 클릭하면, eval()이 실행되면서 계산 결과인 104와 곱셈 결과인 396, 그리고 'Hello world' 문구가 함께 화면에 출력됩니다.
