Fix: eliminate all iframes - use onerror JS injection for protection + beforeunload

interface/components/image_protection.py

@@ -3,44 +3,30 @@
 Injects CSS and JavaScript into the Streamlit page to prevent users from
 downloading, dragging, or otherwise saving the confidential medical images.
 
-KEY DESIGN DECISION:
+APPROACH:
   Streamlit's st.markdown(unsafe_allow_html=True) renders <style> tags but
-  STRIPS <script> tags for security.  Therefore:
-    • CSS protections → injected via st.markdown (works natively).
-    • JS  protections → injected via st.components.v1.html() which creates
-      a real iframe where JavaScript executes.  From that iframe we reach
-      the main Streamlit page via window.parent.document (same-origin).
+  STRIPS <script> tags.  To run JS without components.html (which creates
+  iframes that cause layout shifts on HF Spaces), we use the classic
+  <img src=x onerror="…"> trick — the onerror handler executes inline JS
+  directly in the main Streamlit DOM, with no iframe.
 
 Protection layers (defence-in-depth):
-  1. CSS: pointer-events:none, user-select:none, draggable:false on <img>.
-  2. CSS: transparent ::after overlay on stImage containers blocks
-     right-click "Save image as…".
-  3. CSS: -webkit-touch-callout:none blocks mobile long-press save.
-  4. JS:  contextmenu event blocked on the ENTIRE parent document.
-  5. JS:  Ctrl+S / Ctrl+U / Ctrl+Shift+I / Ctrl+Shift+J / Ctrl+Shift+C /
-         F12 all intercepted and cancelled.
-  6. JS:  dragstart blocked for all images.
-  7. JS:  MutationObserver re-applies draggable=false to dynamically added
-         images (Streamlit re-renders on every interaction).
-  8. JS:  Blob/URL revocation — monkey-patches URL.createObjectURL and
-         document.createElement to block programmatic image extraction.
-
-IMPORTANT LIMITATION:
-  No client-side measure can guarantee absolute prevention.  A technically
-  sophisticated user could still extract images through OS-level screenshots,
-  network packet inspection, or browser extensions that bypass JS hooks.
-  These protections eliminate ALL standard browser download paths and raise
-  the bar significantly.
+  1. CSS: pointer-events:none, user-select:none on <img>.
+  2. CSS: transparent ::after overlay on stImage containers.
+  3. CSS: -webkit-touch-callout:none for mobile.
+  4. JS:  contextmenu blocked on entire document.
+  5. JS:  Ctrl+S / Ctrl+U / Ctrl+P / F12 / DevTools shortcuts blocked.
+  6. JS:  dragstart blocked for images.
+  7. JS:  MutationObserver re-applies draggable=false to new images.
 """
 
 import streamlit as st
-import streamlit.components.v1 as components
 
-# ── CSS injected via st.markdown (Streamlit renders <style> natively) ────────
-_PROTECTION_CSS = """
+# ── CSS + JS injected via st.markdown ────────────────────────────────────────
+_PROTECTION_HTML = """
 <style>
 /* Layer 1: Disable ALL interaction on <img> tags */
-img {
+img:not([data-protection-trigger]) {
     pointer-events: none       !important;
     user-select: none          !important;
     -webkit-user-select: none  !important;
@@ -69,117 +55,71 @@ img {
     -webkit-user-drag: none !important;
     user-drag: none         !important;
 }
-</style>
-"""
 
-# ── JavaScript injected via components.html (runs in real iframe) ────────────
-# From the iframe we access window.parent.document to attach listeners
-# on the ACTUAL Streamlit page, not just inside the hidden iframe.
-_PROTECTION_JS_HTML = """
-<script>
-(function () {
-    // The parent document is the real Streamlit page
-    var doc;
-    try { doc = window.parent.document; } catch(e) { doc = document; }
-
-    // Guard: only inject once per page lifecycle
-    if (doc.__ophthalmo_protection__) return;
-    doc.__ophthalmo_protection__ = true;
-
-    function block(e) {
-        e.preventDefault();
-        e.stopPropagation();
-        e.stopImmediatePropagation();
-        return false;
-    }
+/* Hide the trigger pixel completely */
+img[data-protection-trigger] {
+    display: none !important;
+}
+</style>
 
-    // ── Layer 4: Block context menu on ENTIRE page ──────────────────────
-    doc.addEventListener('contextmenu', function (e) {
-        return block(e);
-    }, true);
-
-    // ── Layer 5: Block keyboard shortcuts ───────────────────────────────
-    doc.addEventListener('keydown', function (e) {
-        var dominated = false;
-        var ctrl = e.ctrlKey || e.metaKey;
-        var key  = e.key ? e.key.toLowerCase() : '';
-
-        // Ctrl+S  — Save page
-        if (ctrl && key === 's') dominated = true;
-        // Ctrl+U  — View source
-        if (ctrl && key === 'u') dominated = true;
-        // Ctrl+P  — Print (can save as PDF with images)
-        if (ctrl && key === 'p') dominated = true;
-        // F12     — DevTools
-        if (e.keyCode === 123) dominated = true;
-        // Ctrl+Shift+I — DevTools (Inspector)
-        if (ctrl && e.shiftKey && key === 'i') dominated = true;
-        // Ctrl+Shift+J — DevTools (Console)
-        if (ctrl && e.shiftKey && key === 'j') dominated = true;
-        // Ctrl+Shift+C — DevTools (Element picker)
-        if (ctrl && e.shiftKey && key === 'c') dominated = true;
-
-        if (dominated) return block(e);
-    }, true);
-
-    // ── Layer 6: Block drag-and-drop of images ─────────────────────────
-    doc.addEventListener('dragstart', function (e) {
-        if (e.target && e.target.tagName === 'IMG') return block(e);
-    }, true);
-
-    // ── Layer 7: MutationObserver — lock new images as they appear ──────
-    function lockImages(root) {
-        var imgs = (root.querySelectorAll) ? root.querySelectorAll('img') : [];
-        for (var i = 0; i < imgs.length; i++) {
-            imgs[i].setAttribute('draggable', 'false');
-            imgs[i].ondragstart = function() { return false; };
-            imgs[i].oncontextmenu = function() { return false; };
+<!-- JS via onerror trick — runs directly in Streamlit DOM, no iframe -->
+<img data-protection-trigger src="x" onerror="
+(function(doc){
+    if(doc.__ophthalmo_protection__) return;
+    doc.__ophthalmo_protection__=true;
+
+    function block(e){e.preventDefault();e.stopPropagation();e.stopImmediatePropagation();return false;}
+
+    doc.addEventListener('contextmenu',function(e){return block(e);},true);
+
+    doc.addEventListener('keydown',function(e){
+        var dominated=false;
+        var ctrl=e.ctrlKey||e.metaKey;
+        var key=e.key?e.key.toLowerCase():'';
+        if(ctrl&&key==='s')dominated=true;
+        if(ctrl&&key==='u')dominated=true;
+        if(ctrl&&key==='p')dominated=true;
+        if(e.keyCode===123)dominated=true;
+        if(ctrl&&e.shiftKey&&key==='i')dominated=true;
+        if(ctrl&&e.shiftKey&&key==='j')dominated=true;
+        if(ctrl&&e.shiftKey&&key==='c')dominated=true;
+        if(dominated)return block(e);
+    },true);
+
+    doc.addEventListener('dragstart',function(e){
+        if(e.target&&e.target.tagName==='IMG')return block(e);
+    },true);
+
+    function lockImgs(root){
+        var imgs=root.querySelectorAll?root.querySelectorAll('img:not([data-protection-trigger])'):[];
+        for(var i=0;i<imgs.length;i++){
+            imgs[i].setAttribute('draggable','false');
+            imgs[i].ondragstart=function(){return false;};
+            imgs[i].oncontextmenu=function(){return false;};
         }
     }
-    lockImages(doc);
-
-    // Debounce to reduce excessive firing
-    var lockTimer = null;
-    var obs = new MutationObserver(function (mutations) {
-        if (lockTimer) return;  // skip if already scheduled
-        lockTimer = setTimeout(function() {
-            lockTimer = null;
-            for (var m = 0; m < mutations.length; m++) {
-                var nodes = mutations[m].addedNodes;
-                for (var n = 0; n < nodes.length; n++) {
-                    if (nodes[n].nodeType === 1) lockImages(nodes[n]);
-                }
-            }
-        }, 100);  // debounce 100ms
-    });
-    obs.observe(doc.body, { childList: true, subtree: true });
-
-    // ── Layer 8: Neuter Blob URL creation for images ────────────────────
-    // Prevents programmatic extraction via createObjectURL
-    var origCreateObjectURL = URL.createObjectURL;
-    URL.createObjectURL = function(obj) {
-        if (obj instanceof Blob && obj.type && obj.type.startsWith('image/')) {
-            console.warn('[OphthalmoCapture] Blob URL creation blocked for images');
-            return '';
-        }
-        return origCreateObjectURL.call(URL, obj);
-    };
-
-})();
-</script>
+    lockImgs(doc);
+
+    var t=null;
+    new MutationObserver(function(muts){
+        if(t)return;
+        t=setTimeout(function(){
+            t=null;
+            lockImgs(doc);
+        },200);
+    }).observe(doc.body,{childList:true,subtree:true});
+
+})(document);
+" />
 """
 
 
 def inject_image_protection():
-    """Inject all CSS + JS image-protection layers into the page.
+    """Inject CSS + JS image-protection layers into the page.
 
-    Call this ONCE near the top of main.py, after st.set_page_config().
-    CSS is re-injected every rerun (Streamlit requires it in the render tree).
-    JS has its own internal guard to avoid duplicate listeners.
+    Uses st.markdown only — NO components.html iframes — so there are
+    zero layout shifts.  The JS guard (doc.__ophthalmo_protection__)
+    ensures listeners are attached only once per page lifecycle even
+    though st.markdown re-renders on every Streamlit rerun.
     """
-    # CSS — MUST be re-injected every rerun so it stays in the DOM
-    st.markdown(_PROTECTION_CSS, unsafe_allow_html=True)
-
-    # JS — uses components.html; internal guard prevents duplicate listeners.
-    # height=0, width=0 makes the iframe invisible and avoids layout shifts.
-    components.html(_PROTECTION_JS_HTML, height=0, width=0, scrolling=False)
+    st.markdown(_PROTECTION_HTML, unsafe_allow_html=True)

interface/main.py

@@ -250,23 +250,19 @@ with st.spinner(t("loading_whisper", model=selected_model)):
     model = load_whisper_model(selected_model)
 # ── BROWSER CLOSE GUARD (beforeunload) ───────────────────────────────────
 # Warn the user when they try to close/reload the tab with data in session.
+# Uses img onerror trick to avoid creating an iframe (which causes layout shifts).
 if sm.has_undownloaded_data() and not st.session_state.get("session_downloaded", False):
-    st.components.v1.html(
-        """
-        <script>
+    st.markdown(
+        """<img src="x" style="display:none!important" onerror="
         (function(){
-            try {
-                var d = window.parent || window;
-                d.addEventListener('beforeunload', function (e) {
-                    e.preventDefault();
-                    e.returnValue = '';
-                });
-            } catch(err) {}
+            if(window.__beforeunload_set__)return;
+            window.__beforeunload_set__=true;
+            window.addEventListener('beforeunload',function(e){
+                e.preventDefault();e.returnValue='';
+            });
         })();
-        </script>
-        """,
-        height=0,
-        width=0,
+        " />""",
+        unsafe_allow_html=True,
     )
 # ── MAIN CONTENT ─────────────────────────────────────────────────────────────
 st.title(f"{config.APP_ICON} {config.APP_TITLE}")