Inject iframe on page from content script and prevent page from modifying it's properties

[Damien Rajon]

Hi everyone,

I have an extension with a content script that adds an iframe on the page; the user can then interact with my extension from this iframe.
The source of the iframe is a web accessible resources (ie. via `chrome-extension://extensionID/...`).
I don't want the website's script to be able to read the contents of my iframe, Chromium doesn't allow this because of the same origin policy, which is nice.

But the web page is still able to modify attributes on the iframe element itself (eg. change its position). Is there a way to prevent that?
From what I gather from the docs, I don't think there is a way since the added element belongs to the page itself.

So my question for you is: is there a way to display UI for the user to interact with in a secure fashion?
Using the extension popup is not an option since it cannot be opened programatically, and I need the interaction to take place as a result of a user interaction on the page.

--

Damien.

[Simeon Vincent]

As you said, iframes are embedded in pages and even with the same origin policy the page can modify attributes of the iframe element, but I don't follow what risk this may pose. Can you share more about your concerns around secure interaction with your UI? 

You can attach event listeners from content scripts. Content scripts exist in a separate world from the page, so the page's JS can't access your content script's JS environment. If you think about the extension's structure as a classic Model View Controller, the DOM and event listeners you insert into a page are only the view layer – your application's logic and data model are safe from direct access from the page.

Simeon - @dotproto

Extensions Developer Advocate

[Damien Rajon]

On Tuesday, June 25, 2019 at 6:12:38 AM UTC+2, Simeon Vincent wrote:

As you said, iframes are embedded in pages and even with the same origin policy the page can modify attributes of the iframe element, but I don't follow what risk this may pose. Can you share more about your concerns around secure interaction with your UI? 

Hi Simeon,

Thank you for your reply.

My use case is that I want to have the user's explicit validation in order to unlock some sensitive data (let's say, the user's email address).

This explicit consent is gathered by the user interacting with my extension frame.

The issue here is that the web page can mess with some CSS properties of my frame, and I would like a way to prevent that.

The "attack" vector here being that the website could hijack my extension frame 9by modifying its aspect via CSS) and trick the user into unwillingly interacting with my frame.

I hope this is clear, thank you for your help.

Have a good one.

--

Damien.

[Alec Lavoie]

Is there any documentation surrounding containerizing an injected content script? My team has been burned quite a bit trying to isolate our extension from the host site. Things like host styles affecting ours and vis versa, event handler and focus being hijacked, etc..

[Vitec MV Support]

Hi Damien,

We are in a similar situation and have solved the issue with css encapsulation using shadow dom.

Another solution might be using custom web components - we looked into this as well, but it created another problem, since we are using react in content script.

-Wolff

[wOxxOm]

> Is there any documentation surrounding containerizing an injected content script?

There's no containerizing, there is only isolation of the JavaScript code, context, and objects/variables.

See the documentation: https://developer.chrome.com/extensions/content_scripts#isolated_world

> My team has been burned quite a bit trying to isolate our extension from the host site. Things like host styles affecting ours and vis versa, 

There's no isolation of DOM or CSS styles so you can only use the standard web technologies.

The workaround is to use ShadowDOM on your injected element, inject the style element in its shadow root and use :host {} selector with !important, the iframe will be inside shadow root as well. The site will be able to delete your element of course and although this can be detected you can't really win if the site doesn't give up.

The closest thing to a solution would be to open a separate small window (without toolbar) with your extension UI inside and use nativeMessaging API with a separate utility that sets this window always on top so it covers a small portion of the browser. That separate utility can be written in Node.js or python and should be installed by the user separately.

Currently Chrome doesn't offer any real solution out of the box. And judging by the fact the extension API is maintained by one or two developers for the last ~5 years who physically can't implement all the cool things that we extension authors want, I'd say it's quite probable we'll never see a built-in solution (maybe our children will though).