[API] js파일에 get방식으로 파라미터 넘기기

javascript API 형태로 나오는 라이브러리들을 보면 js파일에 map.js?key=abcd 와 같이 get방식으로 파리미터를 넘기는 것을 볼 수 있다. 당연히 이렇게 쓰다 보니 이렇게 되는줄 알았다. 하지만 javascript 파일은 get 방식으로 넘어온 파라미터를 인식 할 수 없다. 열심히 검색 해서 보니 나름 범용적으로 쓰이는 아래 코드가 나온다.

 

/* <srcript type="text/javascript" src="example.js?asd=fgh&123=456"></script> */

var scripts = document.getElementsByTagName('script');
var myScript = scripts[ scripts.length - 1 ];

var queryString = myScript.src.replace(/^[^\?]+\??/,'');

var params = parseQuery( queryString );

function parseQuery ( query ) {
   var Params = new Object ();
   if ( ! query ) return Params; // return empty object
   var Pairs = query.split(/[;&]/);
   for ( var i = 0; i < Pairs.length; i++ ) {
      var KeyVal = Pairs[i].split('=');
      if ( ! KeyVal || KeyVal.length != 2 ) continue;
      var key = unescape( KeyVal[0] );
      var val = unescape( KeyVal[1] );
      val = val.replace(/\+/g, ' ');
      Params[key] = val;
   }
   return Params;
}

 

이 코드의 원리는 다음과 같다. 웹 브라우저에서 페이지를 차례대로 로딩 하다가 <script src="example.js"...> 를 로딩하고 있는 시점이라면 <script>라는 태그가 앞에서 몇 개가 있었든 앞으로 몇 개가 있을 것이든 지금 <script> 태그가 현 시점에서는 마지막 <script>태그라는 것이다. 그러므로 <script>라는 태그를 다 읽은 다음 가장 마지막을 취하면 그게 지금 로딩하고 있는 스크립트가 된다. 해당 스크립트 태그의 src를 읽어서 ? 를 기준으로 구분을 하면 뒤의 query string만 분리 해 낼 수 있다. 이걸 바탕으로 또 = 를 기준으로 구분하여 key와 value 값을 얻는다.

 

아주 신박한 방법임이 틀림 없다. 별 문제 없이 잘 동작 하는 것 같이 보인다. 하지만 이 방식으로 테스트 하던 도중 ajax로 복잡한 로딩 hierarchy를 가진 페이지에서는 정상적으로 동작하지 않는 다는 것을 발견했다. 그렇게 복잡하지 않더라도 ajax 내부에 포함된 스크립트 태그는 제대로 인덱싱을 해내지 못하였다. (IE와 Chrome 모두 마찬가지)

하지만 우리가 사용하고 있는 다른 api들(네이버, 다음 지도 등 메이저 api)을 보면 그런 상황에서도 잘 동작 한다. 인덱싱하는 방법의 차이인가.. 생각 했는데 그것도 아닌것이 위 방식대로 할 경우 js파일의 소스가 그대로 노출되어 버린다. 만약 파라미터로 인증키를 넘기는 API라면 인증키 checksum 방식이 다 노출되어 버릴 것이다.

 

구글링을 해 보니 서버사이드에서 처리 하는것 같다는 내용을 볼 수 있었다. 실제로 몇가지 테스트를 해 본 결과 이게 정답인것 같다.

js파일이 요청되면 내부적으로 PHP나 JSP, ASP 같은 서버사이드 언어를 거친 이후에 원본 코드가 보여 지는 것이다. 이를 구현하기 위해서는 서버단에서 여러가지 세팅이 필요하게 된다.

 

하지만 서버를 건들지 않고도 구현할 방법이 있다. 그냥 스크립트 태그에 PHP 파일을 넣어버리는 것이다. 스크립트 태그는 소스파일의 확장자 까지는 확인하지 않는다. 실제로 PHP파일에 Javascript 소스를 넣고 돌려 보면 잘 동작 한다.

이를 이용하면 js파일에 get방식으로 파라미터를 넘기는건 아래 소스와 같이 구현 될 수 있다.

 

/* <srcript type="text/javascript" src="example.js.php?asd=fgh&123=456"></script> */

<?
	if($_GET['key']) {
		$key = $_GET['key'];
		
		// key verifying 과정
?>

var key = "<?=$key?>";

// 자바스크립트 소스

<?
	} else {
		echo "api키가 올바르지 않습니다!";

		// 에러 출력 과정
	}
?>

 

실제 테스트 해 본 결과 IE와 Chrome 최신버전에서는 문제 없이 동작 하는 것을 확인하였다. 몇몇 브라우저에선 확장자를 중요시 여겨 script 태그 안의 php파일을 제대로 인식하지 못 할 수 있으나 웬만한 메이저 브라우저에서는 잘 동작 할거라고 예상된다.