Hey! I work for Text (LiveChat) and today I tried to test changes to our chat widget on checkout for Shopify Plus. During my tests, I discovered that checkout chat widgets fail to load in Firefox/Firefox-based browsers.
Error
Content-Security-Policy: The page's settings blocked the loading of a resource (frame-src)
at https://example.com/... because it violates the following directive:
"frame-src about://*.example.com about://example.com"
Root Cause
Firefox bug #1803475: Firefox incorrectly handles schemeless CSP host expressions in srcdoc iframes. It uses about:// instead of https://, causing CSP violations.
Shopify’s checkout creates nested iframes with CSP set via meta tag:
<iframe srcdoc="<meta http-equiv='Content-Security-Policy' content='frame-src *.example.com example.com'>
<iframe src='https://example.com/chat'></iframe>">
Firefox interprets *.example.com as about://*.example.com instead of https://*.example.com.
Chrome/Safari work correctly.
Fix Needed
Add explicit https:// to CSP directives:
content="frame-src https://*.example.com https://example.com"
Verified: I tested this locally by modifying the CSP directive to include explicit https:// schemes and confirmed it fixes the issue in Firefox.
Impact
-
All checkout chat extensions affected (LiveChat, Gorgias, etc.)
-
Firefox users can’t use chat on checkout
-
Only Shopify can fix this - chat providers don’t control iframe generation
Mozilla bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1803475
Can Shopify team add explicit schemes to checkout CSP directives?