개발자 / HTML
HTML 뷰어: CSS와 JavaScript를 지원하는 실시간 샌드박스 미리보기
HTML과 선택적 CSS를 붙여 넣어 격리된 미리보기를 실시간으로 확인합니다. JavaScript를 명시적으로 활성화하고, 미리보기를 전체 화면으로 확대하거나 HTML 미리보기 파일을 다운로드할 수 있습니다.
HTML 뷰어: CSS와 JavaScript를 지원하는 실시간 샌드박스 미리보기: 불투명 origin을 사용하는 샌드박스 프레임에서 소스를 렌더링합니다. 스크립트는 기본적으로 비활성화되어 있습니다. 콘텐츠 보안 정책은 인라인 스타일과 data 이미지의 사용은 허용하지만 외부 리소스, fetch 요청, 폼 및 임베디드 페이지는 차단합니다. 페이지를 새로 고칠 수 있는 메타데이터, base 요소 및 임베디드 브라우징 컨텍스트는 제거됩니다. 다운로드 파일에도 격리된 프레임이 유지됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
미리보기는 이 사이트와 격리됩니다. 스크립트는 기본적으로 꺼져 있습니다. 외부 스타일, 스크립트, 이미지, fetch 요청, 양식 및 삽입된 페이지는 차단되며, 인라인 스타일과 데이터 이미지는 허용됩니다. 스크립트를 활성화하면 미리보기 안에 붙여넣은 코드가 실행됩니다.
다운로드한 HTML은 동일한 격리된 미리보기를 엽니다. 이 페이지에는 소스가 삽입되지 않습니다.
프레임 격리
WHATWG HTML 표준은 iframe 샌드박스 제한(https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-iframe-sandbox)을 정의합니다. 이 미리보기는 allow-same-origin을 절대 허용하지 않습니다.
콘텐츠 제한
W3C Content Security Policy 사양은 리소스 제한(https://www.w3.org/TR/CSP3/)을 정의합니다. 미리보기는 제공된 마크업을 적용하기 전에 제한적인 정책을 적용합니다. 다운로드한 래퍼에도 샌드박스 경계가 유지됩니다.
사용 방법
- HTML과 선택적 CSS 또는 JavaScript를 붙여 넣으십시오.
- 붙여 넣은 코드가 격리된 미리보기에서 실행되도록 하려는 경우에만 스크립트를 활성화하십시오.
- 실시간 또는 전체 화면 미리보기를 확인한 다음, 샌드박스 처리된 미리보기 파일을 다운로드하십시오.
개인정보 보호 및 제한사항
입력 내용과 파일은 브라우저에서 처리됩니다. 아무것도 업로드하지 않습니다.
관련 도구
자주 묻는 질문
미리보기가 이 사이트의 쿠키나 페이지에 접근할 수 있습니까?
샌드박스는 동일 출처 접근 권한을 부여하지 않습니다. 붙여 넣은 코드는 이 사이트의 DOM이나 저장소를 읽을 수 없습니다. 스크립트는 활성화한 경우에만 실행됩니다.
외부 이미지나 라이브러리가 로드되지 않는 이유는 무엇입니까?
로컬 미리보기는 원격 리소스를 차단합니다. 스타일과 스크립트를 편집기에 직접 입력하고, 이미지에는 data URL을 사용하십시오.
완전한 HTML 문서를 붙여 넣을 수 있습니까?
예. 미리보기는 완전한 문서와 문서 조각을 모두 지원합니다. 메타데이터와 임베디드 브라우징 컨텍스트를 제거하고 자체 콘텐츠 보안 정책을 적용한 다음, 격리된 프레임에서 결과를 렌더링합니다.
다운로드 파일에는 무엇이 포함됩니까?
소스를 동일한 샌드박스 안에서 여는 HTML 파일이 포함됩니다. 일반 페이지에 소스를 직접 붙여 넣은 파일이 아니라 미리보기 파일입니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요