Cannot load local development apps in Safari due to CSP #146
Description
Describe the bug
When running stripe-preview apps start locally and using the Safari browser, the Stripe dashboard cannot find the local app. This is because Safari content security policies prevent the necessary scripts from loading.
To Reproduce
Steps to reproduce the behavior:
Run stripe-preview apps start from the CLI
Assuming Safari is set at default browser, hit Enter to navigate to the Stripe dashboard
Wait for app preview screen to show "No apps found. Please make sure your development server is running."
See console logs.
Expected behavior
The Stripe dashboard should allow me to select my user in order to preview the app in the dashboard.
Screenshots
Desktop (please complete the following information):
- OS: macOS Monterey 12.2
- Browser: Safari 15.3
- Version: v0.1.6-apps-preview
Additional context
Full console output from Safari:
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~dashboard~modals.87b86a8f5acbbe313435.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~copilot~dashboard~login~myinfo_popup~register.d25392f934a3c8e4d55c.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~banking~tailor.b7545cd01f87bf1ec034.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~account~atlas~banking~connect~coupons~customers~emerald~extensions~gelato~invoices~issuing~p~e77ff159.d631d58acb910d223871.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~tailor.a84681bd730b5ebb8c8b.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''unsafe-hashes''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] Unrecognized Content-Security-Policy directive 'prefetch-src'.
[Error] Unrecognized Content-Security-Policy directive 'worker-src'.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'frame-ancestors' is ignored when delivered in a report-only policy.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''report-sample''. It will be ignored.
[Error] The Content Security Policy directive 'sandbox' is ignored when delivered in a report-only policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime~tailor.a13149e6874cf6cc2dec.min.js.map, line 0)
[Error] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] [Report Only] Blocked mixed content http://localhost:4242/.build/ext.js because 'block-all-mixed-content' appears in the Content Security Policy.
[Error] Failed to load resource: the server responded with a status of 404 () (dashboard.vendors~extension_runtime.cfc8172ed81b19d029d2.min.js.map, line 0)