dark mode

Block pop-ups when loading external content

Block pop-ups when loading external content

The problem

My family purchased Smart TV running Saphi OS. Streaming movies with Bulgarian subtitles or audio are out of the question as Netflix and Rakuten TV are not bothering with translations and HBO GO doesn’t have a native app.

Using a smartphone to stream movies is not a suitable alternative, because the phone needs to be fast and not an iPhone to Miracast.

I prefer to stream movies from the TV and the only way is through the native web browser.

Most small businesses advertise for financial support, which is all right, but some of them are full of aggressive pop-ups. And while Firefox or Chrome block such pop-ups, Saphi OS browser doesn’t, which is discouraging. To play a movie in full-screen on a small streaming service I needed to close approximately 10 pop-ups, which takes a long time with a remote control.

The solution

I spotted the perfect solution, at least for me to keep the ads for support, but prevent the pop-ups. And the solution is iframes.

Iframe tag is not the favourite html tag of many, but it's powerful and can carry out amazing things.

Iframe has the attribute sandbox, which applies extra restrictions to the embedded web page. In our case we need to block pop-ups, but to accept scripts and everything else the page requires. After tweaking the settings, I ended with these:

<iframe
  sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation"
  src="https://webpage.com/"
  allowfullscreen
/>
iframe {
  width: 100%
  height: 100vh;
  border: none;
}

The styles are simple enough, remove the border and make the width and height equal to the browser window.

In our iframe we can set or make it dynamic with the variable the URL of the embedded page in the src attribute.

In the sandbox attribute as value I allow the page to submit forms, to run scripts, to run same origin scripts and to navigate the top-level browsing context. You can check all other values on the MDN.

I added the attribute allowfullscreen to watch movies on full screen.

Finally, I uploaded the page containing the iframe and visited from my TV browser. This way all the embedded pages are without pop-ups and I can relax and enjoy watching movies on my TV.

Related articles

© 2021 All rights reserved.