자바스크립트 02 - 꼭 *.js를 쓸 필요가 없다.

1. 개요

개발자들의 암묵적인 사항으로 자바스크립트 파일은 *.js확장자를 가지도록 하며, 실제로 운영체제도 *.js는 자바스크립트 파일로 인식하고 있다. 하지만 자바스크립트 엔진을 가지고 자바스크립트 언어 및 파일을 인지하고 인식하는 브라우저는 어떨까? 자바스크립트 언어의 특징 중 하나는 파일 확장자와 무관하게 동작한다는 점이다.

그림 1. 악성코드 유포지가 삽입된 경유지

그림 1에서 보는 것과 같이 script 태그로 자바스크립트를 선언한 후 ***/top.jpg를 리디렉션 하고 있다. 확장자만 보았을 땐 jpg 그림파일이어야 하지만 script로 인식하여 파일 안의 자바스크립트 코드를 실행하게 된다. 이러한 이유는 script 태그를 사용하면 자바스크립트 엔진이 운영되고 엔진은 확장자 확인 없이 파일 안의 소스코드를 읽고 자바스크립트로 해석하기 때문이다. HTML 랜더링 엔진은 script 태그만 인지할 뿐 그 후의 동작은 자바스크립트 엔진에 의해 해석되고 운영된다.

2. 실험

한 가지 의문이 생겼다. 자바스크립트 엔진은 확장자와 무관하게 파일 안의 소스코드를 읽어 들인다면 HTML 랜더링 엔진 또한 그럴까? 자바스크립트 엔진과 HTML 랜더링 엔진은 브라우저별로 다르기 때문에 두 가지 브라우저를 통해 간단하게 테스트를 해 보았다.

2.1. 준비물

IE 10, Chrome, 그림.jpg, 텍스트.txt, test.html

그림 2. 테스트 할 그림.jpg

그림 3. 테스트 할 텍스트.txt

그림 4. 테스트 할 test.html

간단하게 html문서를 메모장으로 작성하고 브라우저별로 로드하여 어떻게 표현하는가를 테스트해보았다.

2.2. 테스트 1

정상적인 jpg 파일 랜더링, txt 파일 렌더링

그림 5. 그림.jpg 랜더링

그림 6. 텍스트.txt 랜더링

예상한 결과 그대로 보여진다. 그림을 그림으로 인식하여 랜더링 하며, 텍스트는 텍스트대로 랜더링하여 보여준다. 보여주는 방식(테두리, 그림크기, iframe의 default값)은 브라우저별로 조금 차이가 있어 보인다.

2.3. 테스트 2

그림.jpg를 강제로 그림.txt로 변환, 텍스트.txt를 강제로 텍스트.jpg로 변환

그림 7. 그림.txt 랜더링

그림 8. 텍스트.jpg 랜더링

3. 결론

재미있는 결과가 나왔다. 그림.jpg를 강제로 txt파일로 만들어 랜더링하면 Chrome은 그림으로 인식하여 보여주며 IE10은 텍스트로 인식하여 보여준다. 즉, Chrome은 파일 구조를 보고 판단하며, IE는 파일의 확장자를 보고 판단을 한다고 추측할 수 있다.

하지만 텍스트.txt를 텍스트.jpg로 변경하여 랜더링 하였을 땐, 둘다 엑박(x 박스)로 표현된다. 앞서 추측한 Chrome은 파일구조를 보고 판단한다는 추측이 틀리게 된고 IE는 확실히 확장자를 보고 판단하는 것으로 확인 되었다.

최신버전에서 blink엔진을 사용하고 있는 chrome의 동작 방식을 추측해보면 다음과 같다.

파일 구조 -> 확장자 -> 랜딩

먼저 파일 구조를 살펴본 후 파일 구조에 맞게 랜딩하게 되고, 파일구조를 파악 할 수 없다면 확장자를 확인하여 랜딩하는 구조로 추측할 수 있다.