MV3 and securely embedding a web app (CSPs)

[Andreas J. Virkus]

Hi community!

I'm migrating an extension from MV2 to MV3 and thought this refactoring is a great opportunity to extend its functionality. It previously used to be a Vue app that lived in the popup, but that's very limiting for our users in terms of UX and a little slow to render.

I'm now working on a content script that embeds a web app in an iframe. I'm aware of the nested iframe trick to get around a host's CSPs and that is already working fine.

However, I would also like to make sure that only my extension can embed the app and nothing else. I have a Node.js server that's serving the web app and I can generate a dynamic frame-ancestors directive, but I'm not sure what condition it should rely on? It seems that the Origin header is not passed by Chrome for `chrome-extension://` schemas and as the Referer header could easily be faked by a service worker of a malicious site, I don't know what header to trust on my server.

Is there a best practise in these scenarios? I see a lot of examples of people embedding their sites via content scripts but no one seems to mention the CSP setup for their site that gets embedded. 

All and any ideas are welcome
Thanks,
Andreas

[wOxxOm]

Check location.ancestorOrigins in your web app. This property is unforgeable so another extension won't be able to spoof it. They would have to copy your extension's id by copying `key` from manifest.json of an installed extension, but that means the copy has to be loaded locally in unpacked mode because the web store wouldn't allow a duplicate id, AFAICT.

[Andreas J. Virkus]

Ah, this is perfect & should work out great. Thank you so much, wOxxOm!