Stylus: Stylus breaks Zimbra Webclient

[eight04]

It's hard to say how and why it interfere the page. If you have some experience with extension development, try to apply this patch:

diff --git a/content/apply.js b/content/apply.js
index b118d363..16461c20 100644
--- a/content/apply.js
+++ b/content/apply.js
@@ -65,8 +65,7 @@ const APPLY = (() => {
     // Since it's easy to spoof the browser version in pre-Quantum FF we're checking
     // for getPreventDefault which got removed in FF59 https://bugzil.la/691151
     const EVENT_NAME = chrome.runtime.id;
-    const usePageScript = CHROME || isOwnPage || Event.prototype.getPreventDefault ?
-      Promise.resolve(false) : injectPageScript();
+    const usePageScript = Promise.resolve(false);
     return (el, content) =>
       usePageScript.then(ok => {
         if (!ok) {

If the patch fixes the problem then it should be related to page script injection.

[miniBill]

The proposed edit fixes it for me (had the same problem)

[eight04]

We can lazy load the page script, so it won't interfere with the startup process of the page. However, it probably won't work if users are applying styles to these pages. @miniBill @AmpliDude Did you apply styles to Zimbra Webclient in Stylus 1.4.x? Did the style break the page?

[AmpliDude]

I don't have any Zimbra specific styles, but I have one global style, before 1.5.0 everything was working fine.

[AmpliDude]

It looks like it's ok after the changes.

[narcolepticinsomniac]

The fix for this was causing FOUC issues, so we're reverting it for the time being. Anyone's welcome to to come up with an alternative workaround, minus the FOUC bug.

[miniBill]

The revert caused the bug to (obviously) reappear.
Would it be possible to completely disable stylus only for certain websites as a workaround?

[AmpliDude]

For me personally yes, as i don't have any styles for Zimbra webclient. Either that or adding option for an alternative style injection for specific websites. Whatever is easier to achieve.

[narcolepticinsomniac]

WDYM by "website"? I thought you guys are running some old, outdated version of a third-party email client through Firefox. If so, that seems like a pretty obscure bug, which might affect a handful of users, at most. If that is the case, and you want anyone to investigate, it'd be helpful to provide the exact steps to repro, starting with a direct download link to the Windows version with no BS attached to it.

Maybe it's just that IDEK exactly what I should be looking to do, but the website seems intentionally set up to push the newer paid version, or pump you for all kinds of personal info, and make you agree to share it, for any older non-Linux links. IDK about anyone else, but I'm not signing up for any of that. Once installed, how much set up is required before you can actually open a page that's bugged?

If I'm way off here, please clarify the steps to repro either way.

[eight04]

I think @miniBill means if we can disable the extension on specific domains.

Maybe we can still defer the page script injection (I think we should avoid manipulating the page when there is no style applied). If the page script is injected, we record the state in sessionStorage to speed up the injection (inject the script before fetching code). With this method, only the first load will be deferred.

[AmpliDude]

OK so Zimbra is a mail server, after you install it you can connect to it via mail client (like Thunderbird) or use a web interface (website, like Gmail in browser). I could create a dummy account on our server so you can login and check for yourself. Just need a way to send you the credentials.

What I've noticed that plain text messages are displayed correctly, but when a message is in HTML format it is not displayed at all. Also checked Zimbra versions - on both 8.7.11 (which we use on our server) and newest 8.8.15 i have the same issue.

[narcolepticinsomniac]

disable the extension on specific domains

Sure, but that's more of an "un-break" than a "fix".

avoid manipulating the page when there is no style applied

Makes sense, but a large percentage of users will have some kinda global anyway.

I'm sure 8's ideas about optimizing injection are good, and he's way more qualified to make these types of improvements if he's willing. Maybe he'll prefer to try blindly fixing it again, but when it comes to resolving any bug, being able to repro is usually helpful.

after you install it

Install what though? I'm asking for a garbage free direct link to an exe. No personal info surveys, no free trial upsells, no BS. A couple clicks to download and install. This should be an easy ask with FOSS, but their website is not really set up in that spirit AFAICT.

IDK, like I said, maybe 8 won't wanna bother, but I have to think he'd be better off fixing a bug he can actually inspect. If you can provide a direct link to a clean install, and login info, you can DM him, or both of us on Discord.

[AmpliDude]

There is no exe, it's a linux based installation / service, installing it (if you haven't done it before) can take a while. I've sent you login info on discord.

[narcolepticinsomniac]

There is no exe, it's a linux based installation / service

Are you saying it only runs on Linux, or that you'd need to jump through hoops to install on Windows? I'm only asking out of curiosity at this point, because I'm not interested in either of those scenarios.

installing it (if you haven't done it before) can take a while

I can't tell if by "it", you mean installing the service or Linux itself. I always keep a dual boot, but I'm not trying to dust off the Linux partition to troubleshoot an edge case.

If you sent the same info to 8, maybe it'll be useful. I gotta imagine that if you can actually inspect it, there'd be simpler check that wouldn't unnecessarily delay typical injection. Maybe he'd prefer to try to fix it blindly again, the way he's suggesting. Sounds like it might be an overall improvement anyway.

Up to him if he thinks this is even worth fixing, and how he wants to go about it if he does. As long as there's no negative side-effects, whatever works.

[flying-sheep]

OK, so back on track. How can I have both my work’s zimbra install working in one tab and stylus in others. I don’t care if it’s an “unbreak” or a real fix for the time being, getting things to work should be priority.

[eight04]

I suggest downgrading to v1.5.4 until this is fixed again. I think the revert is landed on v1.5.5.

[eight04]

Please test #766.

[0ki]

Bug was fixed and then has reappeared. Latest version of Stylus and Firefox.
"Turning all styles off" does not help. Only disabling the plugin itself helps.

Zimbra is also the latest version, btw.

[narcolepticinsomniac]

Are these Bugzilla issues relevant? 1 2

[eight04]

Are these Bugzilla issues relevant? 1 2

Nope. The WebExtension not found! message is generated by the browser, not the page.

---

BTW, have you reported this issue to Zimbra?

[0ki]

Is Zimbra doing something wrong?

[hwti]

Zimbra writes HTML into an iframe, then parses the result to check for unwanted tags.
Somehow the Stylus script is already in the injected HTML (and as a result will be present twice).
The issue is that it seems to make the document.write() asynchronous, which means Zimbra code doesn't get anything when it looks at the document in the JS.

Here is a test with a script which only does console.log("foo") :

function test1()
{
    var src = "<div><html><body>Some content</body></html></div>";
    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    var doc = iframe.contentDocument;
    doc.open();
    doc.write(src);
    doc.close();
    console.log(doc.childNodes[0].innerHTML);
}

function test2()
{
    var src = "<div><html><script src=\"data:application/javascript;base64,Y29uc29sZS5sb2coImZvbyIp\"></script><body>Some content</body></html></div>";
    var iframe = document.createElement("iframe");
    document.body.appendChild(iframe);
    var doc = iframe.contentDocument;
    doc.open();
    doc.write(src);
    doc.close();
    console.log(doc.childNodes[0].innerHTML);
}

test1() outputs :

<head></head><body><div>Some content</div></body>

test2() outputs :

<head></head><body><div><script src="data:application/javascript;base64,Y29uc29sZS5sb2coImZvbyIp"></script></div></body>
foo

But then if you look at the document, the iframe has the correct contents.

Note that the outside <div> looks strange, but that's what I see with Zimbra, and while it moves the script tag in the innerHTML, it isn't the cause of the issue.

Note that unlike Firefox, Chrome behavior isn't consistent : the first call to test2() runs the nested script asynchronously and outputs the same as Firefox, but if I retry (even reloading the page, as long as it's the same tab), then I get the foo output synchronously and the console.log(doc.childNodes[0].innerHTML) has the content.

[0ki]

Somehow the Stylus script is already in the injected HTML

Wait, what?
What the hell is stylus doing modifying content of domains that are not in the list?

[eight04]

Stylus used to inject the style in the extension scope. Then Firefox decides to improve the security and website can no longer access elements in the extension scope. This causes some issues on many old websites (#461).

The devs decided to inject styles in the page scope, requiring the extension to inject a script tag to the page.

stylus doing modifying content of domains that are not in the list

We did this because it is too slow to check if the URL is on the list. After #766 is merged, we won't pre-inject the script tag anymore because the injection process is fast enough.

[flying-sheep]

So #766 will circumvent this bug as long as there’s no style active for the zimbra page in question?

[eight04]

Since I don't use Zimbra so I can't confirm. You can try testing it yourself. Don't forget to backup your styles!