[EUR Billing] Add Payment Card - "This Content Is Blocked. Contact The Site Owner To Fix The Issue."
Experiencing issues while adding a payment card for EUR billing on Expensify? This article details a recent problem encountered on the platform, specifically the "This content is blocked. Contact the site owner to fix the issue." error that users are facing during the payment card addition process. We'll delve into the specifics of the problem, its impact, and potential workarounds.
The Issue: Blocked Content During Payment Card Addition
When attempting to add a GBP card on Expensify, users are encountering an error message stating, "This content is blocked. Contact the site owner to fix the issue." This problem arises during the Secure Customer Authentication (SCA) modal presentation, which is a crucial step for authenticating payments with the card provider, especially for GBP and EUR currency cards. The error prevents users from completing the payment method addition, disrupting their ability to manage subscriptions and billing within the Expensify platform.
Problem Details and Scope
- Version Number: v9.1.67-2
- Reproducibility: The issue is reproducible in both staging and production environments, indicating a widespread problem affecting all users.
- Affected Tester: tom+gbpcard1@expensifail.com
- Logs: Request ID 951b35dac853002e-SJC (Logs available for the period between 2025-06-18 and 2025-06-19)
- Reported by: @twisterdotcom
- Slack Conversation: #product
The issue primarily affects users attempting to add GBP cards, with expectations for similar issues for EUR currency cards in the near future. The SCA modal's failure to load correctly is a critical roadblock in the payment process, necessitating immediate attention and resolution.
Steps to Reproduce
- Navigate to new.expensify.com.
- Create a new workspace.
- Go to Account > Subscription > Add Payment Card.
- Attempt to add a GBP card.
- Observe the SCA modal, which displays the error message: "This content is blocked. Contact the site owner to fix the issue."
Expected vs. Actual Result
- Expected Result: The SCA modal should facilitate authenticating the payment with the card provider for GBP and EUR currency cards.
- Actual Result: The SCA modal fails to load, displaying the error message and preventing payment authentication.
Visual Representation
The screenshot clearly illustrates the blocked content error within the SCA modal, highlighting the user interface issue preventing successful payment card addition.
Technical Details: Content Security Policy Violation
The root cause of this issue appears to be a Content Security Policy (CSP) violation. The browser console reveals an error indicating that the framing of https://hooks.stripe.com/ is refused due to CSP directives. Specifically, the frame-src directive does not include https://hooks.stripe.com/ in its allowed sources. The error message is as follows:
Refused to frame 'https://hooks.stripe.com/' because it violates the following Content Security Policy directive: "frame-src 'self' https://cdn.plaid.com/ https://www.expensify.com/ https://sdk.onfido.com/ https://*.sardine.ai/ https://accounts.google.com/gsi/ https://td.doubleclick.net/ https://app.storylane.io/ new-expensify://new.expensify.com".
This CSP violation prevents the Stripe hooks from being properly framed within the Expensify application, leading to the blocked content error. The CSP is a crucial security mechanism that helps protect users from various types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. By explicitly defining the origins from which resources (such as frames) can be loaded, CSP helps mitigate the risk of malicious content injection into trusted web pages.
In this case, the absence of https://hooks.stripe.com/ in the frame-src directive is the direct cause of the SCA modal failing to load. Stripe is a widely used payment processing platform, and hooks.stripe.com is likely a necessary endpoint for handling payment authentication flows. Resolving this issue requires updating the CSP to include https://hooks.stripe.com/ as a permitted source for frames.
Workaround
Fortunately, a workaround exists for users encountering this issue. The SCA flow functions correctly on OldDot, the previous version of Expensify. Users can add their GBP or EUR cards using the OldDot platform as a temporary solution until the issue is resolved on the new version.
Platform Impact
The issue has been reproduced on the following platforms:
- MacOS: Chrome / Safari
Testing across other platforms is essential to ensure the issue's scope is fully understood. The following platforms have been tested:
- MacOS: Chrome / Safari
Further testing on Android and iOS (both App and mWeb), Windows Chrome, and MacOS Desktop is recommended to provide a comprehensive view of the problem's impact across the Expensify ecosystem.
Solution and Next Steps
To resolve the issue, the Content Security Policy must be updated to include https://hooks.stripe.com/ in the frame-src directive. This will allow the Stripe hooks to be framed correctly within the Expensify application, enabling the SCA modal to load and function as expected.
Immediate Actions
- Update CSP: The Expensify development team needs to modify the CSP configuration to include
https://hooks.stripe.com/as an allowed source for frames. - Deploy Changes: After updating the CSP, the changes must be deployed to both staging and production environments.
- Verify Fix: Post-deployment, thorough testing should be conducted to verify that the SCA modal loads correctly and that users can add GBP and EUR cards without encountering the blocked content error.
Longer-Term Strategy
- CSP Monitoring: Implement monitoring tools to track CSP violations in real-time. This will help identify and address CSP-related issues proactively.
- CSP Review: Conduct regular reviews of the CSP to ensure it remains up-to-date and aligned with the application's security requirements. As new services and resources are integrated, the CSP should be updated accordingly.
- Developer Training: Provide training to developers on CSP best practices. A strong understanding of CSP principles is essential for preventing future violations.
User Communication
Expensify should communicate the issue and its workaround to affected users. This proactive communication will help reduce user frustration and provide a clear path for users to manage their payment methods while the issue is being resolved.
- In-App Notification: Display an in-app notification to users encountering the error, informing them of the issue and the workaround (using OldDot).
- Status Page Update: Update the Expensify status page to reflect the issue and its progress toward resolution.
- Email Communication: Consider sending an email to users who have recently attempted to add a GBP or EUR card, providing them with the same information.
Contributing and Support
For those interested in contributing to the resolution of this and other issues, Expensify encourages community involvement. Check out the contributing guidelines for onboarding information. You can also email contributors@expensify.com to request to join the Expensify Slack channel for real-time discussions and updates.
Conclusion
The blocked content error during the payment card addition process on Expensify is a critical issue stemming from a Content Security Policy violation. By addressing the CSP, deploying the necessary changes, and implementing monitoring and review processes, Expensify can resolve this issue and prevent future occurrences. Clear communication with users and a commitment to continuous improvement in security practices are key to maintaining a robust and user-friendly platform.
If you are encountering this issue, please use the OldDot workaround and stay tuned for updates from Expensify regarding the permanent fix. Your patience and cooperation are greatly appreciated as the Expensify team works to resolve this matter.