프로그래밍/HTML, CSS, JavaScript

(JavaScript) eval()를 사용하면 안되는 이유

싯타마 2023. 11. 13. 22:05

1. eval()?

eval()는 문자열 수식  또는 문자열로 된 코드를 Javascript로 실행하는 메서드이다.

따라서 매개변수를 string 형식으로 받는다. 자바스크립트 표현식, 명령문, 또는 연속되는 다수의 명령문을 나타내는 문자열. 표현식은 이미 존재하는 객체의 변수나 속성을 포함할 수 있다. 매개변수로 받은 코드를 평가하여 얻은 값을 반환하고, 값이 없다면 undefined를 반환한다.

 

예시)

var x = 10;
var y = 20;
var result = eval("x * y"); // 결과: 200
console.log(result);


var jsonStr = '{"name": "John", "age": 30}';
var obj = eval("(" + jsonStr + ")");
console.log(obj.name); // 결과: John

var a = 10, b = 20;
var variableName = "a";
console.log(eval(variableName)); // 결과: 10

var radius = 10;
var area = eval("Math.PI * radius * radius");
console.log(area);

 

2. 사용금지

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/eval

 

eval() - JavaScript | MDN

**eval()**은 문자로 표현된 JavaScript 코드를 실행하는 함수입니다.

developer.mozilla.org

 

1. eval()은 인자로 받은 코드를 caller의 권한으로 수행하는 위험한 함수입니다.

2. 악의적인 영향을 받았을 수 있는 문자열을 eval()로 실행한다면, 당신의 웹페이지나 확장 프로그램의 권한으로 사용자의 기기에서 악의적인 코드를 수행하는 결과를 초래할 수 있습니다.

3. 또한, 제삼자 코드가 eval()이 호출된 위치의 스코프를 볼 수 있으며, 이를 이용해 비슷한 함수인 Function으로는 실현할 수 없는 공격이 가능합니다.

4. 또한 최신 JS 엔진에서 여러 코드 구조를 최적화하는 것과 달리 eval()은 JS 인터프리터를 사용해야 하기 때문에 다른 대안들보다 느립니다.

5. 추가로, 최신 JavaScript 인터프리터는 JavaScript를 기계 코드로 변환한다. 즉, 변수명의 개념이 완전히 없어집니다. 그러나 eval을 사용하면 브라우저는 기계 코드에 해당 변수가 있는지 확인하고 값을 대입하기 위해 길고 무거운 변수명 검색을 수행해야 한다.

6. 또한 eval()을 통해 자료형 변경 등 변수에 변화가 일어날 수 있으며, 브라우저는 이에 대응하기 위해 기계 코드를 재작성해야 합니다. 그러나,  window.Function  등 eval보다 훨씬 나은 대안이 있다.

 

- 아래 예시는 eval()는  지역스코프를 벗어나 접근하고 수정을 할 수 있는 모습을 보여주고 , 아래 Function은 스코프 범위를 벗어나는 모습을 보여주지 않는다.

(function () {
	var a = 1;
	eval('a = 3; console.log(a);'); // 3

	console.log(local); // 3
})();


(function () {
	var a = 1;
	Function('console.log(typeof a);')(); // undefined
})();

 

 

- 보안문제 예시: 

var example = "var example = function() {
  while (true) {
    alert('해킹당했습니다!');
    // 루프를 중단하기 위한 조건이나 중단 메커니즘이 없으므로 이 코드는 브라우저를 멈출 수 있습니다.
  }
};";
eval(example); // 사용자가 입력한 함수를 사용하게 되면서 "해킹당했습니다!"가 무한으로 출력되는 무한루프가 걸린다.

 

 

- Json으로 문자열을 자바스크립트 코드로 변경

var jsonString = '{"name": "hun", "age": 30}';
var userObject = JSON.parse(jsonString);
console.log(userObject.name); // "hun"

 

 

출처

mdn문서