WebOS 2 Devlog #7: Web Browser Implementation

I reached the final couple of phases of my project and this is one is one of the crucial ones: building a web browser. My plan was to use iframe. But the thing about building a webbrowser inside a webbrowser or inside a sandboxed environment like a website is most websites (about 99%) like google, youtube, or github use X-Frame-Options and Content-Security-Policy: frame-ancestors ‘none’ which means they specifically block their websites from being displayed in cases like this ot prevent clickjacking. So every time i tried loading a webpage, it just says this webpage refused to connect or sth. I used ai to try bypassing it but it didnt work, so with the help of the same aforementioned ai, i implemented a solution.

The solution:

Since I cannot disable host browser security policies, and i dont have a backend proxy server, I had an idea to just build my own native ‘browser’: EpochOS IntraNet (just decided on the name EpochOS btw). This didnt take too long cus i had someone (ai) helping me cus it was almost midnight and i was tired as hell. Here are the features:

• I wrote a parser that intercepts navigation requests. If the user navigates to webos://home or webos://directory, the engine injects a large data:text/html;charset=utf-8 string directly into the iframe’s src attribute. This opens a local, HTML dashboard without triggering cross-origin blocks. Essentially, i wrote html in js and injected that html into the iframe src, so i essentially made my own ‘web-page’.

• Standard links inside a data URI iframe will try to navigate the iframe itself, which doesn’t update the OS address bar. To fix this, I set up a window.addEventListener(‘message’) listener on the parent OS. The buttons inside the iframe use parent.postMessage() to pass the target URL up to the OS, allowing the JavaScript engine to handle the routing and update the UI properly.

A real browser alse doesn’t lose a page’s state (like scroll position) when you switch tabs. And im trying to make a real browser. So, to achieve this, the browser engine now doesn’t share a single iframe but rather new ones get created:

• Every time the user clicks the “New Tab” button, a new node is generated and appended to the container. Switching tabs simply toggles the CSS display property between none and block. This keeps inactive pages fully loaded in memory.

• Because cross-origin security rules (the ones i mentioned before) lock us out of accessing the iframe’s native window.history object, I had to build a custom history router. Every tab object in the JS array maintains its own history array and a historyIndex pointer. The back/forward buttons just decrement or increment this pointer and re-apply the URL to the iframe. Kinda genius ngl (this was an idea from ai btw)

But for a browser to be useful, it needs to have some proper webpages. After some scouring, i found some webpages that do work in iframe and dont have the restrictions that websites like google do. I’m not gonna tell you what websites those are, you just have to see yourself. I found like 10 or sth so there’ll be plenty of stuff to do.

Other features of the browser include: bookmarking, reloading (i also added a reloading spinner btw) and some more stuff.