[코뿔소] 13장. 웹 브라우저의 자바스크립트

* 자바스크립트 완벽 가이드 13장 내용을 발취하였습니다

 

13.3.4 클라이언트 측 자바스크립트 실행 순서

1. 웹 브라우저는 Document 객체를 생성하고 웹 페이지 분석을 시작하는데,

HTML 요소와 그 안의 텍스트 내용을 분석해서 Element 객체와 Text 노드를 웹 페이지에 추가한다.

이 때, document.readyState 속성값은 "loading"이다

 

2. HTML 분석기가 async나 defer 속성이 없는 <script> 요소와 만나면,

문서에 추가하고 내장 스크립트건 외부 파일이건 구분 없이 실행한다.

이런 스크립트는 동기 모드로 실행된다.

그래서 스크립트를 다운로드(가능하다면) 하고 실행하는 동안 HTML 분석기는 멈춘다.

이런 스크립트에서는 입력 대기열에 텍스트를 넣기 위해 document.write()를 사용할 수 있다.

이 텍스트는 HTML 분석기가 다시 작동할 때 문서의 일부가 된다.

종종 동기 모드 스크립트에서는 이후의 사용을 위해 단순히 함수를 정의해두거나 이벤트 핸들러 등록만 할 수도 있다.

하지만 이런 함수나 이벤트 핸들러가 실행될 때는 존재하는 모든 문서 트리를 넘나들며 수정할 수 있다.

말하자면,

동기 모드 스크립트는 <script> 요소 자신과 그 이전에 나온 문서 내용에만 접근할 수 있다는 것이다.

 

3. HTML 분석기가 async 속성이 지정된 <script> 요소를 만나면,

스크립트 텍스트 다운로드를 시작하고 문서 분석도 계속한다.

스크립트는 다운로드된 후에 가능한 한 빨리 실행되지만,

분석기는 멈추거나 다운로드를 기다리지 않는다.

비동기 스크립트에서는 document.write() 메서드를 사용할 수 없다.

<script> 요소 자신과 그 이전에 나온 문서 내용에는 접근할 수 있으나,

추가되는 문서 내용에는 접근 권한이 있을 수도, 없을 수도 있다.

 

4. 문서 분석이 완료되면,

document.readyState 속성값은 "interactive"로 바뀐다.

 

5. defer 속성이 있는 스크립트는 문서 내에 나타나는 순서대로 실행된다.

이때도 async 속성의 스크립트는 실행될 것이다.

지연된 스크립트는 완성된 문서 트리에 접근 권한이 있으며 document.write() 메서드는 사용하면 안 된다.

 

6. 브라우저는 Document 객체에서 DOMContentLoaded 이벤트를 일으킨다.

이 이벤트는 프로그램 실행 단계가 동기 모드 스크립트 단계에서 비동기 모드인 이벤트 주도 단계로 옮겨갔다는 신호다.

그러나 이 시점까지도 아직 실행되지 않은 비동기 스크립트가 있을 수 있다.

 

7. 브라우저는 이 시점에서 문저를 완전히 분석했지만,

이미지 등 추가로 불러와야 하는 내용을 기다릴 수 있다.

이런 내용도 모두 불러오고 모든 비동기 스크립트도 불어와서 실행했으면,

document.readyState 속성값은 "complete"로 바뀐다.

그리고 웹브라우저는 Window 객체에 load 이벤트를 발생시킨다.

 

8. 이 시점부터 이벤트 핸들러는 사용자 입력 이벤트, 네트워크, 타이머 만료 등의 응답으로 비동기 호출된다.

 

---

13.6.4 크로스 사이트 스크립팅

교차 사이트 스크립팅 혹은 XSS(cross-site scripting)는 사이트 공격자가 목표 사이트에 HTML 태그나 스크립트를 집어넣는 보안 문제를 일컫는 말이다.

사용자 입력 정보에 포함된 HTML 태그를 제거하는 일정의 방역 작업을 거치지 않은 채,

이 내용을 기반으로 동적으로 문서를 생성한다면 웹 페이지가 교차 사이트 스크랩팅에 취약해진다.