From fd64b19d3aff334c6e53a196eed1e73c9526ce68 Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Mon, 30 Mar 2026 00:00:08 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B9=84=EC=A3=BC=EC=96=BC=20=EB=A7=A4?=
 =?UTF-8?q?=ED=8D=BC=20JS=20=EB=AC=B8=EB=B2=95=20=EC=98=A4=EB=A5=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- iframe 스크립트를 template 태그 방식으로 변경 (EJS 백틱 이스케이프 충돌 해결)
- Mixed Content 치환을 단순 문자열 replace로 변경
- regex 이스케이프 문제 수정
---
 views/admin/mapper.ejs | 135 +++++++++++++++++++++--------------------
 1 file changed, 70 insertions(+), 65 deletions(-)

diff --git a/views/admin/mapper.ejs b/views/admin/mapper.ejs
index 1a21e51..6983668 100644
--- a/views/admin/mapper.ejs
+++ b/views/admin/mapper.ejs
@@ -109,6 +109,66 @@
   </div>
 </div>
 
+<script id="mapper-inject-script" type="text/template">
+(function(){
+  var highlight = null;
+  var overlay = document.createElement("div");
+  overlay.id = "__mapper_overlay__";
+  overlay.style.cssText = "position:fixed;pointer-events:none;border:3px solid #6366f1;background:rgba(99,102,241,.12);z-index:999999;transition:all .1s;display:none;border-radius:4px";
+  document.body.appendChild(overlay);
+
+  var label = document.createElement("div");
+  label.style.cssText = "position:fixed;z-index:999999;background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:4px;pointer-events:none;display:none;font-family:monospace";
+  document.body.appendChild(label);
+
+  document.addEventListener("mousemove", function(e) {
+    var el = e.target;
+    if (el.id === "__mapper_overlay__" || el === label) return;
+    highlight = el;
+    var r = el.getBoundingClientRect();
+    overlay.style.display = "block";
+    overlay.style.left = r.left + "px";
+    overlay.style.top = r.top + "px";
+    overlay.style.width = r.width + "px";
+    overlay.style.height = r.height + "px";
+    label.style.display = "block";
+    label.style.left = r.left + "px";
+    label.style.top = Math.max(0, r.top - 22) + "px";
+    label.textContent = getSelector(el);
+  });
+
+  document.addEventListener("click", function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!highlight) return;
+    var sel = getSelector(highlight);
+    var text = (highlight.textContent || "").trim().substring(0, 80);
+    var tag = highlight.tagName.toLowerCase();
+    var href = highlight.getAttribute("href") || "";
+    window.parent.postMessage({type:"element-selected", selector:sel, text:text, tag:tag, href:href}, "*");
+  }, true);
+
+  function getSelector(el) {
+    if (el.id && el.id.indexOf("__") !== 0) return "#" + el.id;
+    var path = [];
+    while (el && el.nodeType === 1) {
+      var s = el.tagName.toLowerCase();
+      if (el.id && el.id.indexOf("__") !== 0) { path.unshift("#" + el.id); break; }
+      if (el.className && typeof el.className === "string") {
+        var cls = el.className.trim().split(" ").filter(function(c){ return c && c.indexOf("__") !== 0 && c.length < 40; }).slice(0, 2);
+        if (cls.length) s += "." + cls.join(".");
+      }
+      var sib = el.parentNode ? Array.from(el.parentNode.children).filter(function(c){ return c.tagName === el.tagName; }) : [];
+      if (sib.length > 1) { s += ":nth-child(" + (Array.from(el.parentNode.children).indexOf(el) + 1) + ")"; }
+      path.unshift(s);
+      el = el.parentNode;
+      if (path.length > 4) break;
+    }
+    return path.join(" > ");
+  }
+})();
+</script>
+
 <script>
 var adsenseList = (__INIT__ || {}).adsense || [];
 var dataType = null;
@@ -150,13 +210,15 @@ 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://');
+    // Mixed Content 방지: http → https 변환
+    while (html.indexOf('src="http://') !== -1) html = html.replace('src="http://', 'src="https://');
+    while (html.indexOf("src='http://") !== -1) html = html.replace("src='http://", "src='https://");
+    while (html.indexOf('href="http://') !== -1) html = html.replace('href="http://', 'href="https://');
+    while (html.indexOf("href='http://") !== -1) html = html.replace("href='http://", "href='https://");
 
     // iframe에 매퍼 스크립트 주입
     var mapperScript = getMapperScript();
-    html = html.replace(/<\\/body>/i, mapperScript + '</body>');
+    html = html.replace(new RegExp('</' + 'body>', 'i'), mapperScript + '</' + 'body>');
 
     frame.srcdoc = html;
     pageLoaded = true;
@@ -169,67 +231,10 @@ async function fetchPage() {
   btn.disabled = false; btn.textContent = '페이지 가져오기';
 }
 
-// === iframe 내부에 주입할 스크립트 ===
+// === iframe 내부에 주입할 스크립트 (template 태그에서 읽기) ===
 function getMapperScript() {
-  return '<scr' + 'ipt>' +
-  '(function(){' +
-  '  var highlight = null;' +
-  '  var overlay = document.createElement("div");' +
-  '  overlay.id = "__mapper_overlay__";' +
-  '  overlay.style.cssText = "position:fixed;pointer-events:none;border:3px solid #6366f1;background:rgba(99,102,241,.12);z-index:999999;transition:all .1s;display:none;border-radius:4px";' +
-  '  document.body.appendChild(overlay);' +
-  '' +
-  '  var label = document.createElement("div");' +
-  '  label.style.cssText = "position:fixed;z-index:999999;background:#6366f1;color:#fff;font-size:11px;padding:2px 8px;border-radius:4px;pointer-events:none;display:none;font-family:monospace";' +
-  '  document.body.appendChild(label);' +
-  '' +
-  '  document.addEventListener("mousemove", function(e) {' +
-  '    var el = e.target;' +
-  '    if (el.id === "__mapper_overlay__" || el === label) return;' +
-  '    highlight = el;' +
-  '    var r = el.getBoundingClientRect();' +
-  '    overlay.style.display = "block";' +
-  '    overlay.style.left = r.left + "px";' +
-  '    overlay.style.top = r.top + "px";' +
-  '    overlay.style.width = r.width + "px";' +
-  '    overlay.style.height = r.height + "px";' +
-  '    label.style.display = "block";' +
-  '    label.style.left = r.left + "px";' +
-  '    label.style.top = Math.max(0, r.top - 22) + "px";' +
-  '    label.textContent = getSelector(el);' +
-  '  });' +
-  '' +
-  '  document.addEventListener("click", function(e) {' +
-  '    e.preventDefault();' +
-  '    e.stopPropagation();' +
-  '    if (!highlight) return;' +
-  '    var sel = getSelector(highlight);' +
-  '    var text = (highlight.textContent || "").trim().substring(0, 80);' +
-  '    var tag = highlight.tagName.toLowerCase();' +
-  '    var href = highlight.getAttribute("href") || "";' +
-  '    window.parent.postMessage({type:"element-selected", selector:sel, text:text, tag:tag, href:href, outerHTML: highlight.outerHTML.substring(0,300)}, "*");' +
-  '  }, true);' +
-  '' +
-  '  function getSelector(el) {' +
-  '    if (el.id && !/^__/.test(el.id)) return "#" + el.id;' +
-  '    var path = [];' +
-  '    while (el && el.nodeType === 1) {' +
-  '      var sel = el.tagName.toLowerCase();' +
-  '      if (el.id && !/^__/.test(el.id)) { path.unshift("#" + el.id); break; }' +
-  '      if (el.className && typeof el.className === "string") {' +
-  '        var cls = el.className.trim().split(/\\s+/).filter(function(c){return c && !/^__/.test(c) && c.length < 40}).slice(0, 2);' +
-  '        if (cls.length) sel += "." + cls.join(".");' +
-  '      }' +
-  '      var sib = el.parentNode ? Array.from(el.parentNode.children).filter(function(c){return c.tagName===el.tagName}) : [];' +
-  '      if (sib.length > 1) { sel += ":nth-child(" + (Array.from(el.parentNode.children).indexOf(el) + 1) + ")"; }' +
-  '      path.unshift(sel);' +
-  '      el = el.parentNode;' +
-  '      if (path.length > 4) break;' +
-  '    }' +
-  '    return path.join(" > ");' +
-  '  }' +
-  '})();' +
-  '</scr' + 'ipt>';
+  var code = document.getElementById('mapper-inject-script').textContent;
+  return '<scr' + 'ipt>' + code + '</scr' + 'ipt>';
 }
 
 // === 데이터 타입 선택 ===
@@ -315,7 +320,7 @@ function updateJson() {
         // 컨테이너 기준 상대 셀렉터로 변환
         var sel = mappings[f].selector;
         if (containerSelector && sel.indexOf(containerSelector) === 0) {
-          sel = sel.substring(containerSelector.length).replace(/^\\s*>\\s*/, '');
+          sel = sel.substring(containerSelector.length).replace(/^\s*>\s*/, '');
         }
         rules.fields[f] = { selector: sel || mappings[f].selector, type: mappings[f].type || 'text' };
         if (mappings[f].attr) rules.fields[f].attr = mappings[f].attr;