Skip navigation

Blog > Playing around with HTML iFrames

There has been mentions recently in the press about websites using the browser full screen mode for spoofing websites. This can help those Phishing attacks trap even more users.

With this in mind we thought it might be interesting to see how far we could go spoofing a website by simply using HTML iFrames with separate websites content.

In this example we thought it would be amusing to include a negative news story about Microsoft regarding Apple within the Microsoft website.

You can view our efforts right away by clicking on the following link: iFrame Joke

Method

We used separate iFrames so we could maintain the structure of the Microsoft news site and to only include the news article text that we wanted to insert. We then fixed the width and height of each iFrame with the 'overflow' style set to hidden so we could just display the portion of the website we wanted.

We ended up using four iFrames, one for the header, the right column, the footer and the main news content. We also set the background colour of the spoof website to match that of the Microsoft news website to add authenticity.

Issues with this method

The main issue with using iFrames is that you can't amend anything within them, including HTML and CSS. This makes faking sites in this way very restrictive and leads to just trying to copy fairly basic sites with content that doesn't change much.

We did first try using a couple of the main news sites but this proved quite a struggle. These sites are very advert heavy with many different widgets on them, this leads to a long load time and therefore makes it a lot easier to spot the fake site. These sites also usually have adverts in the header of the website and these occasionally change in height. Due to having to specify a height for the iFrame content this causes issues if the height of the content changes.

Another issue we came across is the links within the iFrames. If a user clicks a link then the iFrame page may change it's layout therefore messing up the page.

One final issue is the styling of the two websites, especially the font style since this is different. Although in this case we don't think it is too noticeable but in many other websites it would be.