HTML 코드 미리보기
HTML 코드를 입력하여 브라우저에서 실행하고 효과를 확인할 수 있습니다.
HTML 코드 입력
안내사항
- 1. 입력된 내용은 서버로 전송되지 않으며, 모든 과정은 브라우저 내에서 처리됩니다.
- 2. 샘플 미리보기에서 사용 가능한 태그와 제한되는 항목을 직접 확인할 수 있습니다.
HTML 코드 미리보기
간단 데모
표/코드/인라인 SVG 예시
| 항목 | 값 |
|---|---|
| 버전 | 샌드박스 |
| 모달 | 기본 차단 |
| 팝업 | 클릭 + 권한 필요 |
<details>
<summary>접기/펼치기</summary>
<p>네이티브로 접근성이 좋아요.</p>
</details>사용 가능한 태그/기능
- 구조/텍스트:
main, section, article, header, footer, h1–h6, p, span, div, strong, em, mark, small, br, hr - 목록/코드:
ul, ol, li, dl, dt, dd, blockquote, pre, code, kbd, samp - 표:
table, thead, tbody, tfoot, tr, th, td, caption, colgroup, col - 미디어/그래픽:
img, figure, figcaption, picture/source, svg(인라인), canvas, video, audio - 폼/UI:
form(allow-forms일 때 제출),label, input, textarea, select, button, details/summary - 스타일/스크립트:
style,script(인라인 권장) - 링크:
a(iframe 내부 탐색 OK, 새 창은 사용자 클릭 + 권한 필요)
※ 샌드박스는 “태그”를 막기보다, 태그가 하는 “행위(권한)”를 제한합니다.
제한되거나 동작이 달라지는 것들
- 모달/알림:
alert/confirm/prompt기본 차단 →allow-modals추가 시 허용 - 팝업:
window.open()은 사용자 클릭 +allow-popups-by-user-activation필요 - 탑 네비: 상위/최상위 이동 차단 (
allow-top-navigation(-by-user-activation)미사용) - 동일출처 자격:
allow-same-origin미부여 → opaque origin, 쿠키/LocalStorage/IndexedDB/Cache API 불가 - 권한 기반 API: 위치/알림/클립보드 읽기/카메라/마이크 등 대부분 거부
- 다운로드/전체화면: 브라우저 정책에 따라 제한 (권한/Permissions-Policy 필요 시만)
- 외부 요청:
fetch/img/link등은 가능하나 자격정보 제외 & CORS 적용 - 모듈 스크립트:
type="module"가능하지만 외부 import는 CORS/정책에 막힐 수 있음
CSP 초강경 모드 아이디어
srcdoc 상단에 아래 메타를 삽입하면 외부 요청/스크립트를 원천 차단할 수 있습니다(읽기 전용 프리뷰):
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; frame-ancestors 'none'">