공유한 정적 HTML 미리보기에서 폼이 전송되지 않는 이유
폼 action, JavaScript fetch, CORS, CSP, 스팸 방지와 개인정보 경계를 이해하고 정적 미리보기와 실제 수신 서버를 구분합니다.
HTML로 폼을 그린다고 수신 서버가 생기지는 않습니다. 브라우저에서 값을 입력할 수 있지만 실제 전송에는 입력을 검증·저장·처리하는 승인된 endpoint가 필요합니다. HTML2WEB은 방문자 데이터가 몰래 전송되지 않도록 공유 미리보기의 폼 이동과 네트워크 연결을 차단합니다.
무엇을 시험하는지 구분합니다
| 목적 | 정적 미리보기 가능 | 추가로 필요한 것 |
|---|---|---|
| 문구와 레이아웃 검토 | 가능 | 백엔드 없음 |
| 클라이언트 검증 상태 | 인라인 JS로 가능 | 테스트 데이터만 사용 |
| 실제 문의 전송 | HTML2WEB 뷰어에서는 불가 | 승인된 수신 서비스와 개인정보 흐름 |
| 운영 연동 테스트 | 격리 미리보기에서는 불가 | 통제된 스테이징 환경 |
MDN 폼 안내는 폼 데이터가 서버로 전송된다고 설명합니다. action은 목적지를 가리킬 뿐 서버를 만들지 않습니다.
흔한 실패 원인
action이 없습니다
데이터를 받을 곳이 없습니다. 목업에서는 전송된 척하지 말고 “데모이며 데이터가 전송되지 않았습니다”라고 표시합니다.
JavaScript로 API를 호출합니다
대상 서버가 존재하고, origin과 방식·헤더를 허용하며, 입력을 검증하고 응답해야 합니다. CORS는 서버가 정하는 브라우저 접근 정책이라 HTML 작성자가 우회할 수 없습니다.
미리보기 정책이 요청을 막습니다
현재 HTML2WEB 콘텐츠 정책은 connect-src 'none', form-action 'none'입니다. 인라인 상호작용은 실행할 수 있지만 공유 문서가 임의의 외부 서비스로 데이터를 보내지는 못합니다.
HTML에 비밀 키를 넣었습니다
브라우저 HTML에 들어간 값은 열람자가 볼 수 있습니다. API 키, webhook 비밀값, SMTP 비밀번호, DB 자격증명을 넣어 데모를 전송 가능하게 만들지 않습니다.
정직한 목업을 만듭니다
- submit을 가로채고 데이터가 전송되지 않았다고 표시합니다.
- 제출 버튼에 데모 상태를 명시합니다.
- 로컬 fixture로 성공·오류·검증 상태를 보여줍니다.
- 실제 연동은 별도의 승인된 스테이징에서 시험합니다.
보호하거나 삭제할 수 없는 목업에서 실제 이름, 이메일, 전화번호, 메시지를 받지 않습니다.
운영 전환 시에는 필드를 최소화하고, 서버 검증·악용 방지·영구 저장·발신 인증·CRM 추적을 구현합니다. 약속한 접수 상태가 된 뒤에만 성공을 표시합니다.
HTML-to-URL 도구는 폼 UI 검토에 사용하고 운영 문의 백엔드로 사용하지 않습니다. 다른 JavaScript도 공유 뒤 달라진다면 sandbox와 CORS 경계를 확인하세요.