개발일기

04. 자바스크립트 eval() 함수

김엉배 2024. 1. 11. 20:30
728x90
반응형

 

 

 

2024.01.11(목)

 

ERP 유지보수 개발 중 jsp 파일에 js 파일을 따로 includ로 빼놓아서 무슨 이유가 있나 봤더니

같은 기능인데 함수명과 변수명 뒤에 숫자로 구별해 놓고 같은 함수를 여러 개를 중복으로 만들어놨다.

 

마침, 이 함수에 문제가 있어서 수정했어야 했는데 이왕 수정하는 거 중복 코드도 같이 수정해야겠다 마음을 먹었다.

어떻게 하면 이쁘게 만들까하며 검색하던 중 딴 길로 새서 eval() 함수까지 검색하고, 사용을 지양한다는 글이 많이 있어

이유를 자세히 알고 싶어 알아보았다.

 

 

eval() 함수란?

- JavaScript에서 문자열을 코드로 실행하는 데 사용되는 함수이며, 이 함수는 문자열을 JavaScript 코드로 해석하고 실행한다.
주로 동적으로 생성된 코드나 문자열을 실행해야 할 때 사용된다.

사용 예시 

var x = 10;
var y = 20;
var result = eval("x + y");
console.log(result); // 30

 

이 예제에서 eval() 함수는 문자열 "x + y"를 코드로 실행하여 변수 x와 y의 합을 계산하고 결과를 반환한다.

단점 

  1. 보안 문제: eval() 함수는 문자열을 직접 실행하기 때문에 보안에 취약할 수 있다. 악의적인 사용자가 제공한 문자열을 eval()에 전달하면 악성 코드가 실행될 가능성이 있고, 코드 주입 공격의 한 형태로 이어질 수 있습니다.
  2. 성능 저하: eval() 함수는 실행 시에 코드를 동적으로 해석하고 실행하므로 성능에 영향을 미칠 수 있다. 정적인 코드보다 동적으로 생성된 코드의 실행이 느릴 수 있다.
  3. 디버깅 어려움: eval() 함수를 사용하면 코드의 가독성이 떨어지고 디버깅이 어려워진다. 실행 시에 동적으로 생성된 코드는 정적인 코드와는 다르게 디버깅 도구에서 추적하기 어려울 수 있다.
  4. 최적화 어려움: 일반적인 코드 최적화 도구들은 eval() 함수로 생성된 코드를 최적화하기 어려울 수 있다. 이는 런타임 최적화에 제약을 가할 수 있다.
  5. 크로스 브라우징 이슈: 일부 브라우저에서 eval() 함수를 사용하는 것에 대한 제약이 있을 수 있다. 특히 CSP (Content Security Policy) 정책을 적용한 경우에는 eval()이 금지될 수 있다.

대안

  • JSON.parse(): 안전한 데이터를 처리하는 경우, JSON 문자열을 객체로 변환하기 위해 JSON.parse()를 사용할 수 있다.
var jsonString = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonString);

 

 

  • 새로운 함수 생성: 필요한 경우 동적으로 코드를 생성해야 하는 경우, 직접 함수를 생성하고 호출할 수 있습니다.
var jsonString = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonString);

 

 

  • 안전한 라이브러리 사용: 안전한 라이브러리를 사용하여 동적인 코드를 처리하는 것이 좋다. 예를 들어, Math.js나 vm2 같은 라이브러리는 안전한 방식으로 코드를 처리하는 기능을 제공한다.
var jsonString = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonString);

 

 

  • 템플릿 리터럴 활용: 필요한 경우 템플릿 리터럴을 사용하여 동적인 문자열을 처리할 수 있다.
var jsonString = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonString);

 

728x90
반응형