fix: 비주얼 매퍼 iframe 스크립트 실행 + Mixed Content 수정

- sandbox에 allow-scripts 추가
- HTTP 리소스 URL을 HTTPS로 자동 변환
- fetch-page API 직접 호출로 에러 처리 개선
This commit is contained in:
chpark
2026-03-29 23:52:31 +09:00
parent 226e1d9334
commit 51496b976e
+11 -2
View File
@@ -27,7 +27,7 @@
<input id="m-url" placeholder="크롤링할 URL을 입력하세요" value="">
<button class="btn btn-primary btn-sm" onclick="fetchPage()" id="btn-fetch">페이지 가져오기</button>
</div>
<iframe id="preview-frame" sandbox="allow-same-origin"></iframe>
<iframe id="preview-frame" sandbox="allow-same-origin allow-scripts allow-popups"></iframe>
<div id="status-bar" style="padding:.4rem .8rem;font-size:.75rem;color:var(--muted);border-top:1px solid var(--border);flex-shrink:0">
URL을 입력하고 "페이지 가져오기"를 클릭하세요
</div>
@@ -134,7 +134,12 @@ async function fetchPage() {
document.getElementById('status-bar').textContent = '페이지 로딩 중...';
try {
var res = await api('POST', '/api/fetch-page', { url: url });
var resp = await fetch('/api/fetch-page', {
method: 'POST', headers: {'Content-Type':'application/json'}, credentials: 'same-origin',
body: JSON.stringify({ url: url })
});
if (!resp.ok) { var err = await resp.json().catch(function(){return {error:'HTTP '+resp.status}}); throw new Error(err.error || 'HTTP '+resp.status); }
var res = await resp.json();
if (res.error) throw new Error(res.error);
var frame = document.getElementById('preview-frame');
@@ -145,6 +150,10 @@ async function fetchPage() {
var baseTag = '<base href="' + baseUrl.origin + '/">';
html = html.replace(/<head([^>]*)>/i, '<head$1>' + baseTag);
// Mixed Content 방지: http → https 변환 (리소스 URL만)
html = html.replace(/(src|href|action)=(["'])http:\/\//gi, '$1=$2https://');
html = html.replace(/url\((['"]?)http:\/\//gi, 'url($1https://');
// iframe에 매퍼 스크립트 주입
var mapperScript = getMapperScript();
html = html.replace(/<\\/body>/i, mapperScript + '</body>');