웹 개발자를 위한 웹 보안: 3장 요약 - 브라우저 작동 방식

 

 

웹 페이지의 소프트웨어 구성요소 중, HTML을 화면에 보이는 시각적 표현으로 변환하는 것을 렌더링 파이프라인이라고 한다. HTML 구문 분석, 문서의 구조와 내용 이해, 운영체제가 이해할 수 있는 도면으로 변환하는 역할을 담당한다. 초기에는 텍스트와 이미지를 로드하여 HTML 문서에 나타나는 순서대로 화면에 그렸으나, 오늘날의 웹은 스타일링 정보를 별도의 CSS 파일로 인코딩해 브라우저에 각 페이지 요소가 표시되는 방법을 정확하게 지시하게 된다.

 

브라우저가 HTTP 응답을 수신하면 HTML 구문을 분석하여 DOM을 생성하고, 스타일링 규칙을 각 DOM 요소에 적용한다. 마지막으로 브라우저가 페이지 구조를 확정하고 스타일링 정보를 적용하는 방법을 세분화한 후 화면에 웹 페이지를 그린다. DOM을 구성할 때 발견되는 자바스크립트 코드가 있다면 이를 로드하고 실행한다. 이는 페이지가 렌더링되기 전에 사용자 행동에 대응하여 DOM과 스타일링 규칙을 동적으로 변경한다.

 

여기서 말하는 DOM (Document Object Mode)이란 웹 페이지의 구조를 나타내는 트리 형태의 모델로, 웹 브라우저가 HTML을 해석해서 만든 결과물이다. 웹 페이지의 각 요소는 노드로 표현하며, 트리 구조에서 부모-자식 관계를 갖게 된다. 브라우저가 DOM 트리를 구성한 이후엔, 스타일링 정보를 별도의 CSS파일에 구성하여 적용하게 된다. 이렇게 스타일링 정보를 HTML에서 인라인으로 정의하지 않고 분리하는 이유는 HTML 콘텐츠를 쉽고 효율적으로 유지할 수 있기 때문이다. 이러한 과정은 자바스크립트 코드의 처리와 함께 일어난다. 별도의 자바스크립트 엔진으로 실행되고, 외부 URL에서 로드되어 실행된다.

 

그런데 이렇게 브라우저가 자바스크립트 코드를 실행한다는 사실은 보안에 문제가 된다. 해커의 목표는 다른 사용자의 컴퓨터에서 코드를 원격으로 실행하는 것이기 때문이다. 그래서 현대의 브라우저는 샌드박스 내에서만 실행되는 브라우저 보안 모델로 자바스크립트를 제한한다. 새로운 프로세스를 시작하거나, 샌드박스 외 메모리를 읽고, 운영체제 기능을 호출하는 등의 동작이 불가능하고, 한정된 작업만 수행할 수 있다. 그러나 이러한 제한에도 크로스 사이트 스크립팅 공격을 통해 공격자는 사용자가 입력하는 개인 정보에 접근할 수 있다.

 

렌더링 전/후에도 브라우저에선 수많은 작업이 실행된다. 사용자가 브라우저를 통해 어떤 사이트를 방문하면, 브라우저는 도메인의 IP 주소를 가져오기 위해 운영체제의 DNS 캐시를 참조하거나 DNS 서버에서 가져온다. IP 주소를 해결한 이후, 브라우저는 보안 접속을 설정해 IP 주소에 해당하는 서버와 TCP 핸드셰이크를 개시하고, 패킷 송수신을 통해 TCP 세션이 설정되면, 애플리케이션 계층 프로토콜의 한 종류인 HTTP 통신을 시작한다. HTTP 요청이 생성되면 HTTPS로 업그레이드하여 보안 통신을 보장하기 위해 TLS 핸드셰이크를 수행하고, 암호화에 동의, 암호화 키를 교환한 후, 서버에서 응답을 회신한다. 사용자가 로그인 페이지로 이동해 로그인하면, 로그인 양식을 제출하여 서버에 POST 요청을 생성하는데, 서버는 로그인 자격 증명을 확인하고 응답에 Set-Cookie 헤더를 반환해 세션을 설정한다. 브라우저는 일정 시간 동안 쿠키를 저장하고, 이후 요청을 할 때마다 쿠키를 사이트로 보낸다. 이 과정 이후에 사용자는 계정에 접속할 수 있게 된다.