imagesafarisafari-extensionweb-extension

Safari hides image (modify image src) from my Web Extension

I have built a web extension for Chrome and Firefox. After that, I wanted to be able to use it on Safari as well.

For that, I used the xcrun command with the option safari-web-extension-converter.

Now, there is a strange problem which I don't find any answer on the internet.

For some images that I put on the web extension contentscript code with the tag <img src="browser.runtime.getURL("images/my-image.svg")">, their src values are replace with "webkit-masked-url://hidden/", causing the image to be displayed with a little blue square with an interrogation mark inside.

For more detailed, I have the impression that it replaces all images src with the url "webkit-masked-url://hidden/", but for some of them, safari allows them to be queried. Indeed, I got these messages in the console when I open my extension on a page :

The page at https://fr.wikipedia.org/wiki/Test was allowed to display insecure content from webkit-masked-url://hidden/.

Causing these specifics images to be rendered properly. On top of that, if I copy/paste the not-working <img src="browser.runtime.getURL("images/my-image.svg")"> just next to a working image, this time the supposed not-working image is rendered correctly.

I have of course declared my images in the manifest.json inside the property web_accessible_resources. They are all under the the images folder at the root of my project, and here is how I declared them :

"web_accessible_resources": [
    "images/my-image.svg"
]

My manifest version is version 2 as for now.

And all the images are in the Xcode build under the Shared (Extension)/Resources/images package.

I tried to see if putting images with css class and property background-image works and with this solution it actually works. But i am not really happy with this workaround, I would like to keep the img tag, as it works for some images at least.

Solution

  • I've actually found why it does this.

    In my content script, I was building the extension page thanks to

    myExtensionBody.innerHTML += "<div>blablabla</div>"

    Modifying the DOM through innerHTML causes the browser to rebuild all the content (https://stackoverflow.com/a/2305677/25448835). I think that this is causing Safari to trigger some sort of security mechanisms, but I did not found any resource about this assumption.

    Anyway, refactoring my code with the following pattern solved the problem :

    const myElement: Element = fromHTML("<div>blablabla</div>");
myExtensionBody.appendChild(myElement);

    The fromHTML method comes from here : https://stackoverflow.com/a/35385518/25448835