iFrames

Need for iFrames

In some situations, we may want to insert another web page inside our web page. The iFrame element is used for this purpose. Some websites like YouTube provide the code needed for embedded their pages. On other occasions, you may want to embed one of your websites. The iFrame element can be used for this purpose.

<iframe src="https://www.example.com" height="500" width="500" allowfullscreen sandbox>


This browser does not support iFrames.

</iframe>

iFrame Attributes

src
Just like the image element we have to provide the location of the source.
height
Used for setting the height of the iFrame.
width
Used for setting the width of the iFrame.
allowfullscreen
Allows the iFrame to go full screen.
sandbox
In newer browsers a high-security setting is used for displaying iFrame content.

Security for iFrames

There are some security concerns with using iFrames. If proper steps are taken then these concerns will not be an issue.

  • If you don’t use iFrames for your websites, it is better to disable support for iFrames in your server. This is because many crackers on the internet can trick your visitors using a technique known as clickjacking. By this technique, they can embed your website on their site and trick users into submitting their information. This can be catastrophic if your website has sensitive information like passwords or emails. So in order to avoid other people to embed your pages, you can turn off support for iFrames in your server or web host.
  • Always use the sandbox attribute for iFrames. This attribute reduces the permissions available to the embedded page. This is particularly useful when embedding third-party web pages. If this attribute is not set then the embedded pages can use JavaScipt, open popup windows, submit any forms and so on. If only the sandbox attribute is used then all permissions are restricted. You can provide permissions for the web page by specifying them inside the sandbox attribute.
  • You should consider serving your websites using HTTPS. HTTPS is a secure version of HTTP. It is used instead of HTTP in many websites to ensure that the data is not tampered by crackers during transit. When it comes to iFrames HTTPS provides another layer of security. It protects embedded web pages from accessing your own web pages and vice versa. Usually, you need to pay a fee to obtain an HTTPS certificate. But due to Let’s Encrypt and other services you can add one for free with a little extra effort.
  • You should embed other pages in your website only when necessary. When embedding from third party websites make sure you are embedding the secure HTTPS version. Most reputable websites that offer embedding functionality usually provide secure embeds.
  • In addition to security concerns, there may be legal problems if you embed other people’s web pages without their permission. Make sure you receive permission from the owner of other sites when embedding their content.