Experiments in iframe messaging

Doesn't work because nested iframe is blocked from loading the messaged URL.
kiwix · Apr 23, 2023 · be43a1d · be43a1d
1 parent dd2f365
commit be43a1d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 16 deletions.
diff --git a/manifest.json b/manifest.json
@@ -35,7 +35,12 @@
 
     "content_security_policy": {
         "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
-        "sandbox": "sandbox allow-scripts allow-downloads allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
+        "sandbox": "sandbox allow-scripts allow-downloads allow-same-origin allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
+    },
+    "sandbox": {
+        "pages": [
+            "www/article.html"
+        ]
     },
 
     "author": "Kiwixy",

diff --git a/www/article.html b/www/article.html
@@ -3,6 +3,13 @@
     <head>
         <meta charset="utf-8">
         <title>Placeholder for injecting an article into the iframe</title>
+        <script>
+            window.addEventListener('message', function(e) {
+                document.getElementById('article').src = e.data;
+            });
+        </script>
     </head>
-    <body></body>
+    <body>
+        <iframe id="article" src="about:blank" width="100%" height="100%"></iframe>
+    </body>
 </html>
diff --git a/www/index.html b/www/index.html
@@ -688,7 +688,7 @@ <h3>Expert settings</h3>
                         if your platform supports it. &nbsp;[<a id="stop" href="#expertSettingsDiv" class="alert-link">Permanently hide</a>]
                     </div>
                 </div>
-                <iframe id="articleContent" class="articleIFrame" src="article.html" referrerpolicy="no-referrer" sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-popups allow-downloads"></iframe>
+                <iframe id="articleContent" class="articleIFrame" src="article.html" referrerpolicy="no-referrer" sandbox="allow-scripts allow-modals allow-forms allow-popups allow-downloads"></iframe>
             </article>
             <footer>
                 <!-- Bootstrap alert box -->

diff --git a/www/js/app.js b/www/js/app.js
@@ -397,7 +397,9 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
         // Empty and purge the article contents
         var articleContent = document.getElementById('articleContent');
         var articleContentDoc = articleContent ? articleContent.contentDocument : null;
-        while (articleContentDoc.firstChild) articleContentDoc.removeChild(articleContentDoc.firstChild);
+        if (articleContentDoc) {
+            while (articleContentDoc.firstChild) articleContentDoc.removeChild(articleContentDoc.firstChild);
+        }
         if (selectedArchive !== null && selectedArchive.isReady()) {
             document.getElementById('welcomeText').style.display = 'none';
             goToMainArticle();
@@ -1604,17 +1606,17 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
                         });
                     }
                     // Reset UI when the article is unloaded
-                    iframeArticleContent.contentWindow.onunload = function () {
-                        // remove eventListener to avoid memory leaks
-                        iframeArticleContent.contentWindow.removeEventListener('keydown', focusPrefixOnHomeKey);
-                        var articleList = document.getElementById('articleList');
-                        var articleListHeaderMessage =  document.getElementById('articleListHeaderMessage');
-                        while (articleList.firstChild) articleList.removeChild(articleList.firstChild);
-                        while (articleListHeaderMessage.firstChild) articleListHeaderMessage.removeChild(articleListHeaderMessage.firstChild);
-                        document.getElementById('articleListWithHeader').style.display = 'none';
-                        document.getElementById('prefix').value = '';
-                        document.getElementById('searchingArticles').style.display = '';
-                    };
+                    // iframeArticleContent.contentWindow.onunload = function () {
+                    //     // remove eventListener to avoid memory leaks
+                    //     iframeArticleContent.contentWindow.removeEventListener('keydown', focusPrefixOnHomeKey);
+                    //     var articleList = document.getElementById('articleList');
+                    //     var articleListHeaderMessage =  document.getElementById('articleListHeaderMessage');
+                    //     while (articleList.firstChild) articleList.removeChild(articleList.firstChild);
+                    //     while (articleListHeaderMessage.firstChild) articleListHeaderMessage.removeChild(articleListHeaderMessage.firstChild);
+                    //     document.getElementById('articleListWithHeader').style.display = 'none';
+                    //     document.getElementById('prefix').value = '';
+                    //     document.getElementById('searchingArticles').style.display = '';
+                    // };
                 }
             };
 
@@ -1623,7 +1625,8 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'settingsStore','abstractFilesys
             }
 
             // We put the ZIM filename as a prefix in the URL, so that browser caches are separate for each ZIM file
-            iframeArticleContent.src = "../" + selectedArchive._file.name + "/" + dirEntry.namespace + "/" + encodedUrl;
+            // iframeArticleContent.src = "../" + selectedArchive._file.name + "/" + dirEntry.namespace + "/" + encodedUrl;
+            iframeArticleContent.contentWindow.postMessage('../' + selectedArchive._file.name + '/' + dirEntry.namespace + '/' + encodedUrl, '*');
         } else {
             // In jQuery mode, we read the article content in the backend and manually insert it in the iframe
             if (dirEntry.isRedirect()) {