Why Iframes are Considered a Security Risk and How to Secure Them

How do you spell “iframe”?

When I began writing this, I noticed people would spell iframe in one of two ways: iframe (all lower case) or iFrame (upper case F). I’ve asked all my AI chatbot friends and they all agree it’s a lowercase word. iframe is spelled iframe.

Glad we cleared that up.

What is an iframe?

An iframe – or inline frame – is an HTML element that loads a different HTML asset inside of a web page. The iframe essentially creates a small window on your website that points directly to another element. Iframes are for websites as well as software applications. Chimney, a provider of technology that helps credit unions and banks grow across digital banking and the web, describes an iFrame as, “Basically an easy way to plop a third-party element onto your web page.”

Why is trust important in web interactions?

Trust is vital to online commerce. Website visitors and app users must trust that the content they’re interacting with is legitimate. This means free of malware or deceptive, malicious practices.

If trust is eroding, visitors are reluctant to share content or enter payment information for purchases. If users even suspect a site is rife with attacks, they’ll seek other application vendors.

In online transactions, a foundation of digital trust is built with HTTPS protocol as the foundation. Then trust builds with professional design and transparent information. Unfortunately, iframes can damage that vital trust.

Security Threats are a Top Concern Among Developers

Website visitors, application users, and developers are all concerned about security. LeadDev asked 1,100+ engineering leaders how their roles are evolving in response to a rapidly changing economic landscape in 2024. The top areas of concern pertained to economics, particularly recession and reduced potential for compensation. 

Most importantly, 45% of developers report concerns about increases in security threats.

Why are Iframes a Security Risk?

Google any topic or question and below the top result, you’ll see, “People also ask.” This is where Google offers helpful related questions that users frequently search.

When you search “What is an iframe,” the very first related query is, “What is an iframe and why is it bad?” I got a chuckle from that. Clearly, there’s widespread agreement with the thesis of this blog.

Chimney even titled their article, “How iFrames Are Killing Your Website.” Google Says Do Not Use iFrames.

By definition, iFrames were a late addition to your website. The parts didn’t come from the factory, they’re mismatched, and create more risk. This includes a negative impact on your site’s overall user experience. Not to mention they also have a deadly impact on your traffic goals.

Mismatched, Frankenstein-like parts have been a problem in software development for years. This is one of the many reasons we only use javascript-based embedded widgets at Qrvey.

Iframes create risk because they are a method of exploitation by hackers in the following ways.

Attackers can exploit iframes for XSS.

Iframes are vulnerable to some common attacks. XSS – cross-site scripting attacks – are one of the many ways.

OWASP, the Open Worldwide Application Security Project, writes, “Cross-Frame Scripting (XFS) is an attack that combines malicious JavaScript with an iframe that loads a legitimate page in an effort to steal data from an unsuspecting user.”

First, the page drives users to a web page that the attacker controls. Then the page loads malicious JavaScript and an HTML iframe pointing to a legitimate site. Once the user enters credentials into the legitimate site within the iframe, the malicious JavaScript steals the keystrokes.

OWASP notes that cross-site scripting attacks are typically successful only when combined with social engineering. For example, an attacker could email a PDF “receipt” that is plausibly legitimate. When the person opens it, they either:

• unintentionally download malware or
• the site directs users to an attacker-controlled web page.

They then ask them to enter credentials in the name of gaining access to their user data.

Personal story: An XSS attack was executed when my orthodontist’s office database was breached. 

Attackers can exploit iframes for clickjacking.

Clickjacking is when an attacker tricks a user into clicking on a link on one page by using hidden layers. The user thinks they are clicking on the top-level page, but they are actually clicking on a different page.” A combination of stylesheets, iframes, and text boxes can also hijack keystrokes.

How do Iframes Affect Application Performance 

Iframes negatively impact website and application performance in numerous ways.

Iframes Slow Page Loading

A website page or SaaS app page with an iframe must load not only the primary page but also the content within the iframe. The need to load additional, external assets can slow down page loading.

Iframe injections are problematic and more iframes = more problems.  Every <iframe> in a page requires increased memory. Combining iframes on a page compounds the issues.

Iframes can be Detrimental to SEO & Marketing

Iframes can also be detrimental to SEO (Search Engine Optimization). This affects an organization’s efforts to appear higher in search rankings. Iframes harm SEO in multiple ways.

• First, the slow loading time can harm SEO. Site performance is among the criteria search engines used to determine rank.
• Second, you get no ‘credit’ for content provided via iframe. Your site may have great, highly relevant components and tools, such as a quiz or mortgage calculator. However, as far as the search engine is concerned – No, you don’t. While the search engines crawl it, it doesn’t increase page rank.

In addition to search engine rankings, marketers losing tracking for conversion metrics. With iframes, you won’t even know if the user converts if the iframe is serving from another website.

Iframes can Negatively Impact User Experience

Finally, iframes can result in an overall poor user experience. You have no control over the look and feel of the content within the iframe, and therefore you’re unable to customize it to match your app. The result can be a clunky user experience that frustrates and confuses users.

Why are Iframes Difficult to Maintain & Scale

Iframes make debugging more demanding for the simple fact that it’s difficult to know where an error is happening: the host page or the page within the frame. Again, more iframes equals more difficulty diagnosing problems, as developers must cope with a larger quantity of moving parts.

Iframes can also hinder responsive design. Iframes may not display consistently across all browsers and devices, which can result in an inconsistent, poor user experience. The lack of control of the content within the iframe means you’re unable to ensure it’s accessible for users with disabilities. Specifically, iframes can cause confusion for visually impaired visitors using screen readers. 

Iframes make maintenance a hassle as well. Whenever the content within the iframe changes, you must update your own page to ensure it points to the new source.

When Do Iframes Make Sense?

Iframes make sense when the user is expecting to interact with content from another domain. If you embed a YouTube video or Google Maps, users understand they’re viewing content from third-party sources.

Embedded YouTube videos in particular are a common use case. Users are interacting with a highly trusted domain. They know they have the option to easily visit YouTube to view additional details such as video comments. 

How to Secure Iframes

There are several ways to secure iframes. Here’s a list of 10 common ways to secure iframes in web applications.

1. Content Security Policy (CSP):
   • Implement a strict CSP to control which sources can load content in iframes.
   • Use the ‘frame-src’ directive to specify allowed iframe sources.
2. X-Frame-Options header:
   • Set this header to prevent clickjacking attacks.
   • Use ‘SAMEORIGIN’ or ‘DENY’ values as appropriate.
3. Sandbox attribute:
   • Apply the sandbox attribute to iframes to restrict their capabilities.
   • Carefully enable only necessary permissions (e.g., ‘allow-scripts’, ‘allow-forms’).
4. Always Use HTTPS:
   •  Ensure all iframe content is loaded over HTTPS to prevent man-in-the-middle attacks.
5. Cross-Origin Resource Sharing (CORS):
   • Configure CORS policies to control which domains can interact with your iframe content.
6. Frame ancestors:
   • Use the ‘frame-ancestors’ CSP directive to specify which parent pages can embed your content.
7. Subresource Integrity (SRI):
   • Use SRI for external resources loaded within iframes to ensure they haven’t been tampered with.
8. Event listeners:
   • Implement secure postMessage communication between the parent page and iframe.
   • Validate the origin and structure of messages.
9. Cookie security:
   • Set the ‘SameSite’ attribute on cookies to prevent CSRF attacks.
   • Use ‘HttpOnly’ and ‘Secure’ flags for sensitive cookies.
10. Regular security audits:
    • Periodically review and update iframe security measures.

Using Iframes for Embedded Analytics

Iframes are a “nested” element, or embedded into another HTML page. If using iframes to “embed” one element inside a web page, embedding analytics into a SaaS app is a use case for it.

Iframe is the common method of embedding by business intelligence software vendors.

This is basically the easy way for these BI vendors. When you look at Tableau or QuickSight or PowerBI, embedded analytics is an afterthought. Using iframes is simply easier. They’re not as concerned with the overall user experience, they need to check a box on the functionality.

Qrvey Uses No Iframes

Qrvey enables SaaS companies to create richer analytics experiences and bring them to market faster, while lowering development costs. Qrvey is the only complete approach to embedded analytics for SaaS, offering both embedded data visualizations and a multi-tenant data lake designed for advanced analytics.

Every component of Qrvey is embeddable using simple, JavaScript-based widgets. Developers can seamlessly embed the Qrvey platform’s functionalities. This includes embedding dashboards and self-service dashboard builders directly into their front-end applications. With no need for iframes, Qrvey works seamlessly with all application frameworks, web design models, and customization/styling options.

Qrvey is also deployed to your cloud environment. This means you to keep the Qrvey system within the control of your cloud platform. As a cloud-native analytics platform, Qrvey is both scalable and cost-effective. 

Our goal at Qrvey is to empower you to ship better analytics while building less software in-house. Security is always our top priority. Let’s talk and we’ll show you how we’re different.