HTML2WEB
메뉴
한국어

engineering발행 8 분 읽기HTML2WEB 팀

공유한 HTML에서 JavaScript는 어디까지 작동할까? CORS·sandbox 점검

HTML2WEB 임시 미리보기에서 인라인 스크립트, 외부 리소스, fetch, 폼과 iframe이 어디까지 작동하는지 실제 보안 경계와 함께 확인하는 방법입니다.

인라인 JavaScript와 외부 리소스를 HTML2WEB의 격리된 sandbox 미리보기에서 나누어 점검하는 표

HTML2WEB 공유 링크에서 JavaScript가 작동하는지 확인하려면 “실행된다” 또는 “안 된다”로 뭉뚱그리지 말고 어떤 문맥과 리소스가 필요한지 나눠야 합니다. 현재 viewer는 인라인 HTML을 sandbox="allow-scripts"인 opaque origin에서 실행하지만, 앱의 인증 쿠키나 외부 네트워크를 공유하는 일반 호스팅 환경은 아닙니다.

이 링크는 짧은 검토용 미리보기입니다. 로그인, 결제, 실시간 API, 영구 URL이 필요한 서비스를 대신하지 않습니다.

현재 HTML viewer의 실행 경계

항목 raw HTML 미리보기 확인할 점
인라인 <style> 실행 경로에 포함 화면이 의도한 스타일인지 확인
인라인 <script> 실행 경로에 포함 DOM 상호작용을 합성 데이터로 시험
외부 <script>·외부 CSS 허용 대상으로 가정하지 않음 단일 파일에 필요한 코드를 넣었는지 확인
fetch·XHR·WebSocket 연결 불가 경계 CORS 설정만으로 viewer의 정책을 바꿀 수 없음
외부 폰트 허용 대상으로 가정하지 않음 시스템 폰트나 인라인 자산 사용
외부 이미지 raw HTML 정책에서는 의존하지 않음 작은 이미지는 data:·inline SVG로 확인
<iframe> 프레임 삽입 불가 경계 외부 서비스 embed를 핵심 기능으로 삼지 않음
<form> 전송 외부 제출 불가 경계 UI 검토용으로만 표시하고 실제 접수는 별도 앱에서 처리

HTML2WEB의 배포 구조는 allow-scripts를 사용하되 allow-same-origin을 부여하지 않고, 콘텐츠 응답에 별도의 CSP sandbox를 적용합니다. MDN의 iframe sandbox 설명처럼 샌드박스는 실행 권한을 나누는 장치이지, 외부 서비스와 같은 실행 환경을 제공하는 기능이 아닙니다.

인라인 동작부터 합성 fixture로 확인하기

실제 API 키나 고객 데이터를 넣지 말고 다음처럼 짧은 fixture를 만듭니다.

<button id="toggle" type="button">상태 바꾸기</button>
<p id="state">대기 중</p>
<script>
  document.querySelector('#toggle').addEventListener('click', () => {
    document.querySelector('#state').textContent = '동작 확인';
  });
</script>

이 파일을 먼저 게시해 DOM 변경과 스타일이 작동하는지 확인합니다. 그다음 아래를 하나씩 추가하고 어느 단계에서 기대와 달라지는지 기록합니다.

  1. 인라인 SVG 또는 data: 이미지
  2. 외부 이미지와 웹폰트
  3. 외부 script와 fetch 요청
  4. iframe과 form action

한 번에 여러 의존성을 넣으면 무엇이 실패했는지 알 수 없습니다. raw HTML viewer는 connect-src 'none' 경계 안에서 실행되므로, MDN의 CORS 안내를 읽었다고 해서 viewer의 네트워크 제한이 사라지지는 않습니다.

Markdown과 HTML은 같은 정책이 아닙니다

HTML2WEB은 Markdown을 안전한 renderer로 정적 HTML로 바꿉니다. 현재 테스트에서는 Markdown 이미지에 HTTPS·data·blob 리소스를 허용하지만, raw HTML은 인라인 자산 중심의 더 좁은 정책을 사용합니다. 따라서 “Markdown에서는 이미지가 보였으니 HTML에서도 외부 이미지가 보일 것”이라고 추정하지 마세요. 콘텐츠 유형과 실제 URL을 같이 기록해야 합니다.

다음 경우에는 정식 앱으로 옮기기

  • 로그인·쿠키·사용자별 권한이 필요하다.
  • 서버 API와 실시간 데이터를 주고받아야 한다.
  • 결제·예약·문의 데이터를 실제로 저장해야 한다.
  • 여러 외부 script, 폰트, 지도, 차트 모듈이 필수다.
  • 검토가 끝난 뒤에도 검색되는 영구 URL이 필요하다.

이 경우 HTML 공유·변환·정식 배포 선택 가이드에서 수명과 운영 책임을 비교하고, HTML2WEB은 승인 전 검토 링크로만 사용하세요.

공유 전 호환성 체크리스트

  • 합성 fixture에서 인라인 style과 script를 먼저 시험했다.
  • 외부 이미지·폰트·script·API를 각각 하나씩 확인했다.
  • CORS 응답이 있어도 viewer의 connect-src 제한이 남는다는 점을 이해했다.
  • iframe, form, 로그인, 쿠키를 실제 운영 기능으로 설명하지 않았다.
  • raw HTML과 Markdown의 리소스 정책을 구분했다.
  • API 키·개인정보·내부 URL 없는 사본만 게시했다.
  • 1시간 등 실제 만료 시간을 확인하고, 영구 운영에는 정식 호스팅을 선택했다.

게시 전 비밀정보 확인은 HTML 공유 전 보안 체크리스트에서, 비밀번호·만료·noindex의 차이는 공유 링크 보호 가이드에서 이어 확인할 수 있습니다. HTML을 URL로 변환하는 도구는 이 경계를 숨기지 않고, 검토할 수 있는 임시 URL을 만드는 데 목적이 있습니다.

이 글의 목차