diff --git a/web/app/components/base/html-preview-button/index.tsx b/web/app/components/base/html-preview-button/index.tsx
index b56b12f955..12ec733d31 100644
--- a/web/app/components/base/html-preview-button/index.tsx
+++ b/web/app/components/base/html-preview-button/index.tsx
@@ -30,7 +30,7 @@ const CreateIframeModal = ({ show, onClose, content }: CreateIframeModalProps) =
     >
       <iframe
         srcDoc={content}
-        sandbox="allow-scripts"
+        sandbox="allow-scripts allow-same-origin"
         title={t(`${prefixPreview}`)}
         style={{ width: '100%', height: '100%', border: 'none' }}
       />
diff --git a/web/app/components/base/utils.ts b/web/app/components/base/utils.ts
index 53bcfa4857..e23f7672ff 100644
--- a/web/app/components/base/utils.ts
+++ b/web/app/components/base/utils.ts
@@ -1,6 +1,10 @@
 export const isCompleteHTML = (code: string): boolean => {
-  // simple check
-  const completeHTMLRegex = /<\s*html\s*[^>]*>[\s\S]*<\/html\s*>/i
+  /**
+    * A simple check to determine if the input string is a complete HTML document.
+    * This function supports optional <!DOCTYPE> declarations and comments before the <html> tag.
+    * Note: This is not a full HTML validator and may not handle all edge cases.
+    */
+  const completeHTMLRegex = /^(?:<!DOCTYPE\s+html\s*[^>]*>\s*)?(?:<!--[\s\S]*?-->\s*)*<\s*html\s*[^>]*>[\s\S]*<\/html\s*>/i
   return completeHTMLRegex.test(code)
 }
 
