Since we’re moving to PWA’s (Progressive Windows Apps) that can be downloaded, and run in full-screen or in windowed mode (Chrome), full-fledged desktop applications are now in a transition to the web. However there are some shortcomings that need to be addressed. One of them is embedding content.
Our product needs to have a quick documentation and browser to search for content and get inspiration from. We don’t want the user to yet open another chrome browser tab and make their workflow slow. We instead want to integrate a small browser frame within the current window/document, (similar to YouTube on mobile, but its a webpage instead of a video) or twitters webview inside a mobile app.
There is a hacky way to approach this shortcoming.
iframe
But there is a limitation: Websites such as twitter disallow the iframe.
How do we get around it in current alpha:
We proxy twitter’s website through our server, and tell the user to login from our proxied iframe. Now websites such as Google search and Twitter will recognize us as bots because of multiple request from same ip address. How do we successfully get around that? We have leased entire block of ipv6 addresses from a residential ISP to proxy. We reserve 1 ipv6 address per user. We also block ads server side and other annoyances for a clean experience.
Why not make it easy instead of making us proxy content and going through different hoops.
What we propose: The browser element
Overview of the proposal:
-
browser element is an iframe that disrespects the X-FRAME-OPTIONS header.
-
browser element has its 3rd party cookies/storage partitioned under current origin.
-
browser element allows the parent frame to inject anything (i.e: javascript, css etc) even if the embedded website is a different origin that disallows embedding.
-
browser element should be able to control the network requests that happen within the browser element.
-
browser element should be able to control the useragent string inside its own window.
-
browser element should be able to set and read cookies/storage for the embedded websites that were created after the partitioning under current origin.
-
browser element should be able to set custom cookies for the embedded websites.
In simple words: the browser element is literally a browser inside a browser. Just like a webview in iphone apps or microsoft edge view embedded in windows software.