[🐞] Web Worker Instance Errors and postMessage Origin Mismatches with GTM in Partytown Proxy Setup

[anthonythorne]

Describe the bug

We’re implementing Partytown on our website to offload third-party scripts, specifically Google Tag Manager (GTM), to a web worker. Our primary goals are to reduce main-thread load, improve page performance, and ensure a smooth and secure way to proxy external resources.

Currently this feature requires a URL parameter so that the site remains unaffected.
URL: https://fujifilm-x.com/global/?googletagmanager=partytown

Current Setup

• Proxy Controller Implementation:
  • We created a PartytownController to handle the secure proxying of external resources. This controller validates incoming requests based on an HMAC string as salt, signature and timestamp to prevent unauthorised access.
  • The proxy handles requests to external scripts specified by resource_url and verifies that the request originates from an allowed request_origin.
  • We perform validation on:
    • The resource_url to ensure it matches allowed domains (e.g., googletagmanager.com).
    • The request_origin to ensure requests come from trusted origins.
• JavaScript Configuration for Partytown:
  • We use the resolveUrl function in Partytown’s configuration to intercept URLs for specified external domains.
  • When a URL matches an allowed domain, we route it through our proxy using resource_url and request_origin parameters.
  • The proxy also uses timestamp and signature parameters, generated in PHP, for security.
  • A Content Security Policy (CSP) header was initially added to restrict scripts but later removed in the hope to fix the "does not match the recipient window's origin." warning.

Encountered Issues

• Web Worker Errors:
  • "Error finding instance": We repeatedly encounter the error Error finding instance "instanceId" on window x, especially within iframe environments created by Partytown.
  • This error seems to indicate that Partytown is attempting to reference instances (possibly GTM elements or document elements) that it cannot locate within the worker context. We need clarity on what causes these missing instances and any workarounds.
• postMessage Origin Errors:
  • Partytown’s web worker often triggers errors such as Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.googletagmanager.com') does not match the recipient window's origin.
  • This happens because the GTM script expects postMessage calls to originate from GTM’s domain, while the messages are now proxied through our domain. Despite configuring the proxy URL, this mismatch still occurs, causing communication failures.
• Other Observed Browser Errors:
  • Occasionally, the browser logs an error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received.
    It’s unclear whether this is directly related to Partytown or is a side effect of the web worker environment.

Actions Taken

• Dynamic CSP for Allowed Domains:
  • We attempted to set a CSP header dynamically based on the request’s request_origin, but this did not resolve the issue and was removed as it didn't affect the worker’s ability to fetch and execute the proxied resources.
• Proxy Signature and Timestamp Validation:
  • To prevent unauthorized access to the proxy, we implemented an HMAC-based signature with a timestamp, ensuring only signed requests within a five-minute window are accepted. This prevents potential abuse, although it doesn’t address the underlying postMessage and instance-finding issues.
• Attempted Debugging of Web Worker Environment:
  • We investigated resolveUrl configurations and double-checked that the URLs match allowed domains.
  • Despite these, we still see consistent Error finding instance and postMessage origin mismatch errors when GTM scripts attempt to interact with the DOM or communicate via postMessage.

Assistance Needed
If possible can I get advise on the following, please?

• Insight on "Error finding instance" Errors: Clarification on what causes this issue in Partytown and whether there’s a way to ensure elements or instances are accessible in the worker context.
• Handling postMessage Origin Mismatch: Suggestions for enabling postMessage compatibility when GTM or other external scripts are proxied and accessed from a different domain.
• Recommended Configuration: Any guidance or best practices for securely using Partytown to proxy GTM while minimizing main-thread load.

Main 🌎 Created Partytown web worker (0.10.2)
partytown-ww-sw.js?v=0.10.2:1 Partytown 🎉 Initialized web worker
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Registered top window 1
partytown-ww-sw.js?v=0.10.2:1 Worker (1) 🎉 Created top window 1 environment
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Executed top window 1 environment scripts in 67.8ms
partytown-ww-sw.js?v=0.10.2:1 Worker (1) 🎉 Initialized top window 1 environment 🎉
partytown-ww-sw.js?v=0.10.2:1 Worker (2) 🎉 Created iframe window 2 environment
partytown-sandbox-sw.js?v=0.10.2:1 Error finding instance "m698mx92su.d" on window 2 {$winId$: 'm698mx92su', $instanceId$: 'm698mx92su.d', $applyPath$: Array(2), $debug$: 'document.open.1, (blocking)'}
q @ partytown-sandbox-sw.js?v=0.10.2:1
(anonymous) @ partytown-sandbox-sw.js?v=0.10.2:1Understand this errorAI
partytown-sandbox-sw.js?v=0.10.2:1 Web Worker Error ErrorEvent {isTrusted: true, message: 'Uncaught Error: Error finding instance "m698mx92su.d" on window 2', filename: 'https://fujifilm-x.com/wp-content/themes/fujifilm/dist/partytown/debug/partytown-ww-sw.js?v=0.10.2', lineno: 1, colno: 8773, …}
then.Y.onerror @ partytown-sandbox-sw.js?v=0.10.2:1
error
(anonymous) @ partytown-sandbox-sw.js?v=0.10.2:1
Promise.then
(anonymous) @ partytown-sandbox-sw.js?v=0.10.2:1
(anonymous) @ partytown-sandbox-sw.js?v=0.10.2:1Understand this errorAI
partytown-ww-sw.js?v=0.10.2:1 Uncaught Error: Error finding instance "m698mx92su.d" on window 2
    at fe (partytown-ww-sw.js?v=0.10.2:1:8773)
    at he (partytown-ww-sw.js?v=0.10.2:1:8246)
    at we (partytown-ww-sw.js?v=0.10.2:1:10200)
    at I.<anonymous> (partytown-ww-sw.js?v=0.10.2:1:23369)
    at Bc (bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:63:174)
    at eval (bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:77:807)
fe @ partytown-ww-sw.js?v=0.10.2:1
he @ partytown-ww-sw.js?v=0.10.2:1
we @ partytown-ww-sw.js?v=0.10.2:1
(anonymous) @ partytown-ww-sw.js?v=0.10.2:1
Bc @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:63
eval @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:77
setTimeout
eval @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:77
xc @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:56
start @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:77
eval @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:78
eval @ bootstrap?id=GTM-NWPVDB&src=GTM&cond=2&gtm=45He4b70v6887923za204:79
Me @ partytown-ww-sw.js?v=0.10.2:1
(anonymous) @ partytown-ww-sw.js?v=0.10.2:1
await in (anonymous)
at @ partytown-ww-sw.js?v=0.10.2:1Understand this errorAI
partytown-ww-sw.js?v=0.10.2:1 Worker (3) 🎉 Created iframe window 3 environment
partytown-ww-sw.js?v=0.10.2:1 Worker (4) 🎉 Created iframe window 4 environment
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Registered iframe window 3
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Executed iframe window 3 environment scripts in 20.3ms
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Registered iframe window 4
partytown-ww-sw.js?v=0.10.2:1 Worker (5) 🎉 Created iframe window 5 environment
partytown-ww-sw.js?v=0.10.2:1 Worker (6) 🎉 Created iframe window 6 environment
partytown-ww-sw.js?v=0.10.2:1 Worker (3) 🎉 Initialized iframe window 3 environment 🎉
partytown-sandbox-sw.js?v=0.10.2:1 Main 🌎 Executed iframe window 4 environment scripts in 51.9ms
partytown-ww-sw.js?v=0.10.2:1 Worker (4) 🎉 Initialized iframe window 4 environment 🎉
20Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').Understand this warningAI
6Chrome is moving towards a new experience that allows users to choose to browse without third-party cookies.Understand this warningAI
global/:1 Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received

If you require further information, such as code examples or additional logs, please let us know.

Reproduction

https://fujifilm-x.com/global/?googletagmanager=partytown

Steps to reproduce

• Use Tag Assistant Chrome Extension: https://chromewebstore.google.com/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm, alternatively I have also tested tagmanager preview to try and validate the container has loaded.
• Use URL with query parameter: https://fujifilm-x.com/global/?googletagmanager=partytown,
• View dev tools to see console errors/warnings.

Unable to verify or validate if GTM is correctly running.

Browser Info

Chrome

Additional Information

No response