javascript 난독화 이슈 (생성자 인자의 파라미터명)

 

안녕하세요. 루루개발자 입니다.

이번 글에서는 javascript 난독화를 적용하면서 생긴 이슈에 대해 공유드리고자 합니다.

 

다음과 같은 상황이라고 가정해봅시다.

 

-- test-class.class.js

class TestClass {
  apiUrl;
  apiCallback;

  constructor(options) {
    console.log('TestClass.options', options);
    this.apiUrl = options.apiUrl;
    this.apiCallback = options.apiCallback;

    console.log('this.apiUrl', this.apiUrl);
    console.log('tthis.apiCallback', this.apiCallback);
  }
}

 

-- test-class.class.min.js (난독화 적용)

class TestClass{l;t;constructor(s){console.log("TestClass.options",s),this.l=s.l,this.t=s.t,console.log("this.apiUrl",this.l),console.log("tthis.apiCallback",this.t)}}

 

-- test-class.js (test-class.min.js 파일을 import)

window.addEventListener('load', function() {
  console.log('...');

  const aa = new TestClass({
    apiUrl: 'https://www.sample.url/',
    apiCallback: function() {
      console.log('apiCallback');
    },
  });
});

 

 

위 예제대로 진행을 하면 TestClass 의 apiUrl 과 apiCallback 에는 undefined 가 할당됩니다.

그 이유는, 난독화된 코드를 보면 알 수 있습니다. 

 

난독화 후 constructor 의 options 인자는 s 로 변경되었지만

해당 객체 안에는 파라미터명이 apiUrl, apiCallback 으로 유지되어 있습니다.

 

난독화가 적용되면서 s.l, s.t 등으로 파라미터명이 변경되었는데,

s 객체 안에는 l 이나 t 라는 파라미터가 존재하지 않으며

apiUrl 과 apiCallback 이라는 파라미터가 존재하는 상황입니다. 

 

그렇기 때문에 존재하지 않은 파라미터명을 참조하게 되어 undefined 가 할당되게 된 것입니다.

 

 

그럼 이러한 상황을 어떻게 해결할 것인가에 대해 고민하던 찰나, 

변수에 할당된 문자열 값은 난독화에 영향을 받지 않는다는 점을 고려하여

다음과 같이 class 파일을 수정하였습니다.

 

-- test-class.class.js (수정 후)

class TestClass {
  apiUrl;
  apiCallback;

  constructor(options) {
    console.log('TestClass.options', options);
    this.apiUrl = options[this.getConstVariables().apiUrl];
    this.apiCallback = options[this.getConstVariables().apiCallback];

    console.log('this.apiUrl', this.apiUrl);
    console.log('tthis.apiCallback', this.apiCallback);
  }

  getConstVariables() {
    return {
      apiUrl: 'apiUrl',
      apiCallback: 'apiCallback'
    };
  }
}

 

-- test-class.class.min.js (수정 후 난독화 적용)

class TestClass{l;i;constructor(s){console.log("TestClass.options",s),this.l=s[this.t().l],this.i=s[this.t().i],console.log("this.apiUrl",this.l),console.log("tthis.apiCallback",this.i)}t(){return{l:"apiUrl",i:"apiCallback"}}}

 

-- test-class.js (test-class.min.js 파일을 import)

window.addEventListener('load', function() {
  console.log('...');

  const aa = new TestClass({
    apiUrl: 'https://www.sample.url/',
    apiCallback: function() {
      console.log('apiCallback');
    },
  });
});

 

 

위와 같이 수정 후 테스트를 진행해보면

TestClass 생성자에 넘긴 파라미터의 값들이 

TestClass 클래스 안에서 정상적으로 참조되어 this 에 할당된 것을 확인해볼 수 있습니다.

 

 

이렇듯 문자열을 이용해 난독화된 클래스 파일에도

생성자에 원하는 파라미터명으로 데이터 초기화가 가능한 것을 알 수 있었습니다.

 

읽어주셔서 감사합니다. :)