ScriptTags load broken by other apps

Shopify App Store
1

Hello,

I have an app that uses a ScriptTag.

Sometimes, merchants contact me saying that my app is not working, and when I investigate I notice that the script tags are not loaded (not just my script tag, any script tag that is installed on the store).

Lately, I noticed 2 apps messing with the original loading script and breaking it (not sure if it becomes broken when the app is active or when it’s deactivated … perhaps it worked at some point).

  1. “PageSpeed & Image Optimizer“

This app seems to turn the original type=”text/javascript” into type=”text/flspdscript” (FLSPD standing for “flash speed” I guess), which make some navigators ignore the script content.

Live example here.

1
12705×830 134 KB

2. Another unknown app (I couldn’t identify it yet, sorry, perhaps it’s even a theme template?) seems to add a “MutationObserver” like the one below that modifies the original ScriptTag loading script.

<script type="text/javascript"> const observer = new MutationObserver(e => { e.forEach(({ addedNodes: e }) => { e.forEach(e => { 1 === e.nodeType && "SCRIPT" === e.tagName && (e.innerHTML.includes("asyncLoad") && (e.innerHTML = e.innerHTML.replace("if(window.attachEvent)", "document.addEventListener('asyncLazyLoad',function(event){asyncLoad();});if(window.attachEvent)").replaceAll(", asyncLoad", ", function(){}")), e.innerHTML.includes("PreviewBarInjector") && (e.innerHTML = e.innerHTML.replace("DOMContentLoaded", "asyncLazyLoad")),(e.src.includes("assets/storefront/features")||e.src.includes("assets/shopify_pay")||e.src.includes("connect.facebook.net"))&&(e.setAttribute("data-src", e.src), e.removeAttribute("src")))})})});observer.observe(document.documentElement,{childList:!0,subtree:!0})</script>

As you can see on the screenshot below, it “noops” the original “onload” listeners and ties everything to an “asyncLazyLoad” event that seems to be never fired (on some websites).

2
22735×997 241 KB

Here is a website where it’s broken :

Here is a website where it seems to be working :

A quick search on publicwww for the “MutationObserver” snippet seems to give more than 5k results so I’d assume that it’s a widespread app (but I could be wrong).

Anyway, this is a bit disturbing for app developers who still use ScriptTags.

Is there something we can do as another app developer in this case? Is there anything in the app review process to prevent this from happening perhaps?

Thank you for your help!
Sorry if the topic category is not right.

2

Our bundles app is also affected by so-called “page optimizer” apps, and we don’t have a good solution to this.

Raised the same concern previously here: Some apps change the execution order of app block js script

3

Thank you for your feedback.

That’s unfortunate. It’s surprising that Shopify doesn’t check this.

I’d understand that Shopify doesn’t check that basic JS APIs are not overridden as part of their review process (click listeners or window.fetch as you mentioned in the other topic + I also encountered an override of Date.now() at some point), even though it shouldn’t be allowed.

However, breaking ScriptTags seems like something one may want to check since it breaks multiple other apps (without letting them a chance to fight it with JS workarounds from their side).

Perhaps I can try to have an extra “app embed” just to replace the ScriptTag in such cases.

4

Have you reported this app for potentially breaking terms and conditions?

That might be the best course of action: Report a partner violation - Shopify