about:blank은 왜 존재할까?

브라우저 주소창에 about:blank 를 입력하면 언제나 빈 화면만 뜬다. 하지만 이 단순한 페이지는 웹이 동작하는 방식과 꽤 깊이 연결되어 있다. 브라우저는 새 탭을 초기화하고, 팝업을 열고, 잠재적으로 위험한 탐색을 차단할 때마다 이 페이지를 잠깐씩 거쳐 간다. 개발자 입장에서는 원인을 알기 어려운 “하얀 화면”의 정체가 바로 about:blank 인 경우가 많다.

about:blank은 무엇인가?

about: 은 브라우저 내부 정보를 노출하기 위한 스킴이다. about:version, about:settings 처럼 접미사를 바꿔 다양한 화면을 열 수 있다.
about:blank 는 그중에서도 비어 있는 문서 하나만을 제공한다. HTML은 <html><head></head><body></body></html> 정도로 최소한만 구성되어 있다.
대부분의 표준이 그렇듯, 1990년대 넷스케이프 시절부터 존재했던 관습이 현재까지 이어지고 있다. HTML Living Standard에서도 about:blank 를 “기본 공백 문서” 로 정의한다.

브라우저가 about:blank를 여는 순간

새 탭/창 초기화: 사용자가 새 탭을 열면 렌더러 프로세스는 우선 about:blank 를 로드한 뒤 실제 홈 페이지나 사용자 지정 URL로 이동한다.
window.open() 호출 직후: 스크립트가 새 창을 띄우면 네트워크 요청보다 DOM 인스턴스가 먼저 필요하다. 이때 임시 문서가 about:blank 다.
다운로드, 차단된 리디렉션: 브라우저가 파일 다운로드나 보안 이슈 때문에 대상 문서를 렌더링하지 않으면 about:blank#blocked 같은 변형을 보여주기도 한다.
데이터 URL 로딩 전에: iframe 이 src="data:text/html,..." 같은 URL을 로드할 때, 데이터가 파싱되기 전까지 잠깐 about:blank 상태로 남는다.

이 동작 때문에 렌더링 전 로그에 about:blank 가 찍히면 “버그” 라기보다 아직 최종 URL이 로드되지 않았다는 신호일 때가 많다.

개발자가 활용할 때 알아두면 좋은 포인트

새 창 미리 꾸미기

const popup = window.open('about:blank', 'preview');
if (popup) {
  popup.document.write(renderedHtml);
  popup.document.close(); // 팝업이 about:blank 상태에서 실제 콘텐츠로 변환
}

보안 정책상 대부분의 브라우저는 사용자가 버튼을 클릭한 것과 같은 명확한 제스처 없이 팝업을 열면 차단한다.
팝업이 열리는 순간에는 항상 about:blank 문서가 기본값이다. 이후 document.write 나 DOM API로 내용을 채우면 된다.

SPA 부트스트랩 단계 이해하기

React, Vue 같은 SPA는 최초에 빈 루트 div만 뿌려진 about:blank 상태에서 시작한다.
렌더링이 매우 빠르면 사용자가 about:blank 를 체감하지 않지만, 네트워크가 느리면 빈 화면이 길게 유지된다. 이때 로딩 스켈레톤을 곧바로 띄우려면 서버 사이드 렌더링(SSR)이나 스트리밍 렌더링을 고려해야 한다.

`iframe` 샌드박싱

iframe src="about:blank" sandbox 조합은 외부 리소스를 불러오지 않고도 고립된 DOM 컨테이너를 하나 더 만들고 싶을 때 유용하다.
다만 동일 출처 정책(SOP) 때문에, about:blank 문서는 생성한 문맥의 출처를 그대로 상속한다. 악성 스크립트를 차단하려면 아예 다른 출처의 파일을 불러오거나, Content-Security-Policy 로 스크립트를 제한해야 한다.

보안과 프라이버시 이슈

기본적으로 about:blank 는 네트워크를 타지 않으므로 추적 스크립트나 광고가 개입할 여지가 없다.
다만 window.open('about:blank') 로 열린 문서는 부모 창과 동일 출처를 공유하므로, 부모가 악성 코드라면 팝업도 안전하지 않다.
피싱 사이트는 주소창을 숨기거나 덮어 버린 뒤 about:blank 창을 띄워 사용자를 속이기도 한다. 따라서 “주소창이 비어 있는데 컨텐츠만 뜬다” 면 즉시 의심하는 것이 좋다.

사용자를 위한 팁

홈 페이지를 깔끔하게: 크롬, 사파리, 파이어폭스 모두 홈/새 탭 페이지를 about:blank 로 지정할 수 있다. 불필요한 위젯이나 뉴스 피드를 보지 않아도 된다.
자동 재생 차단: 일부 브라우저 확장 프로그램은 새 탭을 about:blank 로 대체해, 숨겨진 오디오 자동 재생을 막는다.
디버깅 커맨드: 주소창에서 about:blank?debug 처럼 쿼리를 붙이면 그대로 문자열이 남는다. 간단한 로컬 테스트나 redirect 상태 확인에 활용 가능하다.

의도치 않은 about:blank 를 디버깅하는 순서

브라우저 개발자 도구의 네트워크 탭을 열어 실제 요청이 나갔는지 확인한다. 요청 자체가 없다면 아직 about:blank 단계일 가능성이 크다.
콘솔 로그에 “Navigation to about:blank” 같은 메시지가 찍혔다면, SPA 라우터가 아직 준비되지 않았거나 라우팅 가드가 막은 상황일 수 있다.
팝업이 바로 닫힌다면, 팝업 차단기나 noopener 플래그로 인해 부모 자식 관계가 끊긴 것일 수 있으니 window.open(url, name, 'noopener') 설정을 점검한다.

마무리

about:blank 는 단순한 빈 페이지 같지만 브라우저 수명 주기의 거의 모든 시점에 등장한다. “하얀 화면” 을 마주쳤을 때 이 페이지의 역할을 이해하고 있다면, 렌더링 지연인지, 보안 차단인지, 혹은 의도적인 초기화 단계인지 빠르게 판단할 수 있다. 개발자라면 about:blank 를 “빈 페이지” 가 아니라 “브라우저가 숨 쉬는 최소 단위” 로 바라보자.