Recent wiktionary archives break the iframe and destroy the app's controls

[danielzgtg]

EDIT by @Jaifroid: Discussion of issue should be in openzim/mwoffliner#1803. This issue is to consider implementing a local patch.

Kiwix-js no longer works with wiktionary_en_all_maxi_2023-02.zim. It was working fine with wiktionary_en_all_maxi_2022-09.zim. Now it just redirects to some other URL for the main page that doesn't have the search bar.

Editing the URL manually doesn't work around this. It goes to "404 Not Found nginx." when I replace Wiktionary%3AOffline with wiki. I also shows "404 Not Found" when I press the back button. My browser keeps on showing the page icon as the browser's loading animation for a long time before it switches to no icon at all. Pressing back at the original page goes back to the proper app with the search bar, but then it immediately redirects again. I need to close the tab and open another one to get something usable.

This affects ServiceWorker mode only. There is no redirect problem in JQuery mode and I am able to open articles. However, I do not like JQuery because it doesn't support my browser's CSS :visited, bfcache, nor Dark Reader extensions. This does not affect Android either.

I think the problem is that kiwix-js ServiceWorker mode is failing to intercept the redirect, while the other modes/apps were able to. Here is a video of the problem:

2023-03-03.06-11-30.mp4

[Jaifroid]

@danielzgtg Thank you for the error report. I'll investigate!

[Jaifroid]

@danielzgtg @kelson42 I've determined that this issue is not Kiwix JS specific. It affects https://library.kiwix.org/content/wiktionary_en_all_nopic_2023-02/ as well, where the ZIM breaks out of its frame. There is probably a rogue piece of JS that has crept in. I'll try to determine what, but I think I should move this issue to mwOffliner.

[Jaifroid]

Oops, I can't transfer the issue across orgs (from Kiwix to OpenZIM), so I'll just copy the issues.

[Jaifroid]

Closing in favour of openzim/mwoffliner#1803

[danielzgtg]

Here is a Tampermonkey userscript to work around this:

// ==UserScript==
// @name         Kiwix fix rogue redirect
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://moz-extension.kiwix.org/*
// ==/UserScript==

(function() {
    'use strict';
    const iframe = document.querySelector('iframe');
    // Setting this to something else to exclude allow-top-navigation to prevent navigation
    // and add back required permissions to avoid 404
    iframe && (iframe.sandbox = "allow-same-origin allow-scripts");
})();

[Jaifroid]

Thanks for the suggestion. I did test, some time ago, adding a sandbox attribute: see #753 and in particular #404 (comment). However, we now have a different solution for external links, so it would be worth testing again.

[danielzgtg]

I think your different solution might work better.

The equivalent code outside of Tampermonkey and in the codebase would be to edit

kiwix-js/www/index.html

Line 689 in 6792f81

<iframe id="articleContent" class="articleIFrame" src="article.html"></iframe>

and add a sandbox="allow-same-origin allow-scripts" attribute there. Here is a breakdown of the permissions:

• "": Disable everything, most importantly allow-top-navigation
• "allow-same-origin": Fix nginx 404
• "allow-same-origin allow-scripts": Try to fix collapsible sections as well. This doesn't work yet, so I will write a comment on the other issue.

This might not be the best solution, as I wrote only the code required to get my own zims working. I heard that in addition to Mediawiki dumps, Kiwix supports other things like TED talks. Depending on what those zims need, you may need to add more permissions from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox , possibly all of them except allow-top-navigation.* to get a much of the old behavior back as possible for those zims. In particular, they might need fullscreen, sound, or video things but I didn't check.

[Jaifroid]

Thanks for the information @danielzgtg. I've been experimenting with the sandbox attribute of the iframe (initially using Kiwix JS Windows), and it does seem to fix this issue for those browsers that support some of the directives of the feature. When loading the offending Wiktionary home page I get this in console log:

Because the navigation is blocked, the page loads correctly. I need to test browser support more widely. I'm using this directive:

sandbox="allow-same-origin allow-scripts allow-modals allow-forms allow-popups"