Blob as image source in SVG created by background.js

Hi! I’m creating an SVG document that is getting served up through the new filterResponseData in my background JS script. Inside the SVG document I’m trying to use a blob URL (e.g. “blob:moz-extension://”) as an image source but it is not working. I don’t believe that it is a CSP issue as I turn off CSP and I still don’t see the image, nor do I get any CSP warnings like I usually would. In theory I could probably Base64 encode the images too but it seems unnecessary.

For what it’s worth, I also have a strong reference to the blob someplace so I don’t think that’s a problem.

Is this use case supported? I understand it’s a probably a bit arcane. Thanks for any help.

I can’t find a reference for it, but I am pretty sure that blob: URLs can never be used cross origin. Since your filtered document still has it’s original origin, it can’t access the blob:moz-extension:// URL.
You can either use data:...;base64, URLs or insert a content script that looks for your replaced URLs, and replaces them with URL.createObjectURL(await (await fetch(originalBlobUrl)).blob()).
The second option works because fetch in content scripts is basically patched to use the extensions origin, but URL is not and creates the new URL with the page origin.

For what it’s worth, I also have a strong reference to the blob someplace so I don’t think that’s a problem.

Just not revoking the URL as long as you need it should work; no further references to the Blob required.

Thanks! That gave me the tip I needed. Since I had the original Blob I just ended up using FileReader to get a data URL, which then worked fine.