Discussion on: Best way to use iframe on any website

[manu]

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]

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]

What about the sandbox mode in iframes?

[manu]

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]

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]

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]

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

[manu]

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]

Check out demo for further clarification

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

[Absolute001]

Thank you! ❤️