Since upgrading to Safari 16.4 our React web app is having problems loading blobs that have worked fine for years. Only Safari 16.4 gives these errors, older safari, firefox, and chrome still work great with our web app and we have not touched this logic in years.
The errors shown are:
[Error] Refused to load blob:https://[ourSiteHere] because it does not appear in the frame-ancestors directive of the Content Security Policy.
And:
[Error] Sandbox access violation: Blocked a frame at "https://[ourSiteHere]" from accessing a frame at "null". The frame being accessed is sandboxed and lacks the "allow-same-origin" flag.
We added the allow-same-origin sandbox flag and tweaked the Content Securyity Policy, neither seem to improve the loading at all.
The docs below mention "revoking Blob URLs across same-origin contexts" as well as 5 other mentions of updates to how blobs are loaded. Is there a bug somewhere in this new update to how blobs are handled or is there something we as developers need to do to update how we load our blobs to be able to show them like they have worked for years?
https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#html
Also See: https://forums.macrumors.com/threads/ios-16-4-embedded-video-error-sandbox-error-on-browsers.2385213/