DEV Community

Best way to use iframe on any website

Stackfindover on April 06, 2021

What is an iframe in HTML? The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within th...

Read full post

manu • Apr 6 '21 • Edited

One reason I don't ever use iframes in HTML is because of it's security vulnerabilities!

You may get a submittable malicious web form, phishing your users' personal data.
A malicious user can run a plug-in.
A malicious user can change the source site URL.
A malicious user can hijack your users' clicks.
A malicious user can hijack your users' keystrokes.

And it also causes bad user experience

It tends to break the browsers' "Back" button.
It confuses visually impaired visitors, using screen readers.
It confuses users, suddenly opening the iframe content in a new browser window.
Content within the iframe doesn't fit in and looks odd.
Content within the iframe is missing since the source URL changed.
Navigation of the site in the iframe stops working.
Every in a page requires increased memory and other computing resources.

Solution: Use AJAX instead of Iframes!

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("el").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "file.php", true);
xhttp.send();

Just don't use iframes too much ;)

Stackfindover • Apr 6 '21

I agree, but this article only improves web page speed, because by using this method we load iframe after clicking on the element.

Thanks for suggestion :)

Absolute001 • Apr 6 '21

What about the sandbox mode in iframes?

manu • Apr 6 '21

That works, but still, keep in mind that hackers can "intercept" data in iframes,
Basically hotlinking the site, and tracking keystrokes for example.

A way to prevent this is inserting this in your .htaccess file

header set x-frame-options SAMEORIGIN

Absolute001 • Apr 6 '21

It's just a personal feeling or nowadays,front end developers must have some skills in security field? Are best practices enough to guarantee a safe navigation to our user?

manu • Apr 6 '21

Are best practices enough to guarantee a safe navigation to our user

Well, technically, yes, but it's a good practice to write secure code, no matter what you are building!

Also, It's also not just front end devs who need to consider security, it's also backend too ;)

But this article is useful if you're embedding a youtube video in an iframe.

Otherwise, I prefer AJAX, since it "embeds" smooth, and clean. It doesn't restrict scrolling.

Absolute001 • Apr 6 '21

How can I use AJAX to achieve the same thing of Iframes? 🤔🤔🤔

manu • Apr 6 '21

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("el").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "file.php", true);
xhttp.send();

manu • Apr 6 '21 • Edited

Check out demo for further clarification

Source code: replit.com/@ManuTheCoder/ajax#inde...

Absolute001 • Apr 6 '21

Thank you! ❤️

Madza • Apr 6 '21

Although completely different technologies, the iframe tag has always reminded me of something like adobe flash. Never felt pretty confident using it, as well as had a lot of headaches on sizing and responsiveness, etc.

Stackfindover • Apr 6 '21

But this article is useful if you're embedding a youtube video in an iframe.

Yes, actually this article for Embed youtube videos, if we have used it directly it increases the page load time,
So we can use this way it can decrease page load time because by using this method we load iframe on click element