❗❗❗ CRITICAL Failsafe CSP injection breaks modern checkouts & Race Condition in initialization #880
Description
Description:
I am running Rybbit in a self-hosted Docker environment with OpenLiteSpeed/WordPress. I have encountered three critical issues that required manual patching to keep my checkout functional.
- Critical: Aggressive Failsafe CSP Injection
When Rybbit fails to initialize storage (e.g., due to privacy settings in Firefox Strict Mode, Tor Browser, or AdBlockers), it triggers a failsafe that injects a restrictive Content Security Policy (CSP) meta tag:
The Problem:
This CSP is too restrictive for modern e-commerce sites.
It blocks https: (breaking payment gateway iframes like Swedbank/PayEx).
It blocks data: (breaking theme assets like SVGs and fonts).
Result: The checkout page loses styling and payment forms disappear, preventing purchases.
Suggested Fix:
Remove the CSP injection entirely, or at least include https: and data: in the media-src directive.
Allow the script to fail gracefully (disable tracking) without modifying the page's global security policy.
- Initialization Race Condition (Type Error)
The Rybbit snippet initializes window.rybbit as a function (stub/queue). However, once script.js loads, it overwrites window.rybbit with an Object instance.
The Problem:
If a tracking event (e.g., view_item or add_to_cart) fires after the script has loaded, the code tries to call window.rybbit(...).
Error: Uncaught TypeError: window.rybbit is not a function.
Because window.rybbit has become an Object, it is no longer callable.
Suggested Fix:
Maintain window.rybbit as a proxy function that forwards calls to the internal instance.
Or, update documentation to warn users that window.rybbit() is only for initialization and they must use window.rybbit.event() after load.
- NetworkError on Page Navigation
When a user clicks a link to navigate away, the sendSessionReplayBatch request is often cancelled by the browser, resulting in a TypeError: NetworkError.
Suggested Fix:
Add { keepalive: true } to the fetch options in the flushEvents function. This ensures the final batch of data is sent successfully even during page unload.
Environment:
Platform: WordPress / WooCommerce
Server: OpenLiteSpeed + Docker
Browser: Firefox (Strict), Tor, Chrome (with AdBlock)