safari iframe support

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• English (US)

<iframe>: The Inline Frame element

The <iframe> HTML element represents a nested browsing context , embedding another HTML page into the current one.

Each embedded browsing context has its own document and allows URL navigations. The navigations of each embedded browsing context are linearized into the session history of the topmost browsing context. The browsing context that embeds the others is called the parent browsing context . The topmost browsing context — the one with no parent — is usually the browser window, represented by the Window object.

Warning: Because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other computing resources. While theoretically you can use as many <iframe> s as you like, check for performance problems.

This element includes the global attributes .

Specifies a Permissions Policy for the <iframe> . The policy defines what features are available to the <iframe> (for example, access to the microphone, camera, battery, web-share, etc.) based on the origin of the request.

See iframes in the Permissions-Policy topic for examples.

Note: A Permissions Policy specified by the allow attribute implements a further restriction on top of the policy specified in the Permissions-Policy header. It doesn't replace it.

Set to true if the <iframe> can activate fullscreen mode by calling the requestFullscreen() method.

Note: This attribute is considered a legacy attribute and redefined as allow="fullscreen" .

Set to true if a cross-origin <iframe> should be allowed to invoke the Payment Request API .

Note: This attribute is considered a legacy attribute and redefined as allow="payment" .

A boolean attribute that, if present, specifies that the selected topics for the current user should be sent with the request for the <iframe> 's source. See Using the Topics API for more details.

Set to true to make the <iframe> credentialless, meaning that its content will be loaded in a new, ephemeral context. It doesn't have access to the network, cookies, and storage data associated with its origin. It uses a new context local to the top-level document lifetime. In return, the Cross-Origin-Embedder-Policy (COEP) embedding rules can be lifted, so documents with COEP set can embed third-party documents that do not. See IFrame credentialless for more details.

A Content Security Policy enforced for the embedded resource. See HTMLIFrameElement.csp for details.

The height of the frame in CSS pixels. Default is 150 .

Indicates when the browser should load the iframe:

Load the iframe immediately on page load (this is the default value).

Defer loading of the iframe until it reaches a calculated distance from the visual viewport , as defined by the browser. The intent is to avoid using the network and storage bandwidth required to fetch the frame until the browser is reasonably certain that it will be needed. This improves the performance and cost in most typical use cases, in particular by reducing initial page load times.

Note: Loading is only deferred when JavaScript is enabled. This is an anti-tracking measure.

A targetable name for the embedded browsing context. This can be used in the target attribute of the <a> , <form> , or <base> elements; the formtarget attribute of the <input> or <button> elements; or the windowName parameter in the window.open() method.

Indicates which referrer to send when fetching the frame's resource:

The Referer header will not be sent.

The Referer header will not be sent to origin s without TLS ( HTTPS ).

The sent referrer will be limited to the origin of the referring page: its scheme , host , and port .

The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.

A referrer will be sent for same origin , but cross-origin requests will contain no referrer information.

Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).

Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).

The referrer will include the origin and the path (but not the fragment , password , or username ). This value is unsafe , because it leaks origins and paths from TLS-protected resources to insecure origins.

Controls the restrictions applied to the content embedded in the <iframe> . The value of the attribute can either be empty to apply all restrictions, or space-separated tokens to lift particular restrictions:

Allows downloading files through an <a> or <area> element with the download attribute, as well as through the navigation that leads to a download of a file. This works regardless of whether the user clicked on the link, or JS code initiated it without user interaction.

Allows for downloads to occur without a gesture from the user.

Allows the page to submit forms. If this keyword is not used, form will be displayed as normal, but submitting it will not trigger input validation, sending data to a web server or closing a dialog.

Allows the page to open modal windows by Window.alert() , Window.confirm() , Window.print() and Window.prompt() , while opening a <dialog> is allowed regardless of this keyword. It also allows the page to receive BeforeUnloadEvent event.

Lets the resource lock the screen orientation .

Allows the page to use the Pointer Lock API .

Allows popups (like from Window.open() , target="_blank" , Window.showModalDialog() ). If this keyword is not used, that functionality will silently fail.

Allows a sandboxed document to open a new browsing context without forcing the sandboxing flags upon it. This will allow, for example, a third-party advertisement to be safely sandboxed without forcing the same restrictions upon the page the ad links to. If this flag is not included, a redirected page, popup window, or new tab will be subject to the same sandbox restrictions as the originating <iframe> .

Allows embedders to have control over whether an iframe can start a presentation session .

If this token is not used, the resource is treated as being from a special origin that always fails the same-origin policy (potentially preventing access to data storage/cookies and some JavaScript APIs).

Allows the page to run scripts (but not create pop-up windows). If this keyword is not used, this operation is not allowed.

Allows a document loaded in the <iframe> to use the Storage Access API to request access to unpartitioned cookies.

Lets the resource navigate the top-level browsing context (the one named _top ).

Lets the resource navigate the top-level browsing context, but only if initiated by a user gesture.

Allows navigations to non- http protocols built into browser or registered by a website . This feature is also activated by allow-popups or allow-top-navigation keyword.

• When the embedded document has the same origin as the embedding page, it is strongly discouraged to use both allow-scripts and allow-same-origin , as that lets the embedded document remove the sandbox attribute — making it no more secure than not using the sandbox attribute at all.
• Sandboxing is useless if the attacker can display content outside a sandboxed iframe — such as if the viewer opens the frame in a new tab. Such content should be also served from a separate origin to limit potential damage.

Note: When redirecting the user, opening a popup window, or opening a new tab from an embedded page within an <iframe> with the sandbox attribute, the new browsing context is subject to the same sandbox restrictions. This can create issues — for example, if a page embedded within an <iframe> without a sandbox="allow-forms" or sandbox="allow-popups-to-escape-sandbox" attribute set on it opens a new site in a separate tab, form submission in that new browsing context will silently fail.

The URL of the page to embed. Use a value of about:blank to embed an empty page that conforms to the same-origin policy . Also note that programmatically removing an <iframe> 's src attribute (e.g. via Element.removeAttribute() ) causes about:blank to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.

Inline HTML to embed, overriding the src attribute. If a browser does not support the srcdoc attribute, it will fall back to the URL in the src attribute.

The width of the frame in CSS pixels. Default is 300 .

Deprecated attributes

These attributes are deprecated and may no longer be supported by all user agents. You should not use them in new content, and try to remove them from existing content.

The alignment of this element with respect to the surrounding context.

The value 1 (the default) draws a border around this frame. The value 0 removes the border around this frame, but you should instead use the CSS property border to control <iframe> borders.

A URL of a long description of the frame's content. Due to widespread misuse, this is not helpful for non-visual browsers.

The amount of space in pixels between the frame's content and its top and bottom borders.

The amount of space in pixels between the frame's content and its left and right borders.

Indicates when the browser should provide a scrollbar for the frame:

Only when the frame's content is larger than its dimensions.

Always show a scrollbar.

Never show a scrollbar.

Inline frames, like <frame> elements, are included in the window.frames pseudo-array.

With the DOM HTMLIFrameElement object, scripts can access the window object of the framed resource via the contentWindow property. The contentDocument property refers to the document inside the <iframe> , same as contentWindow.document .

From the inside of a frame, a script can get a reference to its parent window with window.parent .

Script access to a frame's content is subject to the same-origin policy . Scripts cannot access most properties in other window objects if the script was loaded from a different origin, including scripts inside a frame accessing the frame's parent. Cross-origin communication can be achieved using Window.postMessage() .

Positioning and scaling

As a replaced element , the position, alignment, and scaling of the embedded document within the <iframe> element's box, can be adjusted with the object-position and object-fit properties.

error and load event behavior

The error and load events fired on <iframe> s could be used to probe the URL space of the local network's HTTP servers. Therefore, as a security precaution user agents do not fire the error event on <iframe> s, and the load event is always triggered even if the <iframe> content fails to load.

A simple <iframe>

This example embeds the page at https://example.org in an iframe.

Accessibility concerns

People navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content. The title's value should concisely describe the embedded content:

Without this title, they have to navigate into the <iframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple <iframe> s and/or if embeds contain interactive content like video or audio.

Technical summary

Specifications, browser compatibility.

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

• CSP: frame-ancestors
• Privacy, permissions, and information security

Advisory boards aren’t only for executives. Join the LogRocket Content Advisory Board today →

• Product Management
• Solve User-Reported Issues
• Find Issues Faster
• Optimize Conversion and Adoption
• Start Monitoring for Free

The ultimate guide to iframes

The iframe element (short for inline frame) is probably among the oldest HTML tags and was introduced in 1997 with HTML 4.01 by Microsoft Internet Explorer. Even though all modern browsers support them, many developers write endless articles advising against using them.

I believe that their bad reputation should not prevent you from relying on them; they have many legitimate uses cases. Besides, it’s not that hard to secure them, so you won’t have to worry about your user’s machine becoming compromised.

To help you form your own opinion and sharpen your developer skills, we will cover all the essentials you should know about this controversial tag. We’ll go through most of the features the iframe element provides and talk about how you use them, as well as how iframes can be useful for overcoming some tricky situations. Finally, we’ll talk about how you can secure your iframes to avoid potential vulnerabilities.

What is an iframe, and when do you use it?

Developers mainly use the iframe tag to embed an HTML document within another. You may have crossed paths with it when you had to include a third-party widget (like the famous Facebook like button), a YouTube video, or an advertising section on your website.

For instance, the code below will display a 500px square with the Google homepage within:

Here is another example in which we display a button to tweet your webpage on Twitter:

What you must keep in mind when thinking about iframes is that they let you embed an independent HTML document with its own browsing context. Thus, it will be isolated from the JavaScript and CSS of the parent.

That is one of the valid purposes to use an iframe: to provide a measure of separation between your application and the iframe content. Nevertheless, as you will see in this guide, the separation is not so perfect.

The iframe can still behave in annoying or malicious ways — triggering a popup or autoplaying videos, for instance. To illustrate how this isolation from the JavaScript and CSS is handy, let’s take a look at these two situations.

In an application, a user could create emails and save them as templates. On a particular page, I needed to list them to let the user preview and choose one.

But to prevent the CSS of the current website from affecting the style of these templates, I figured out that using an iframe with the srcdoc attribute was the cleanest solution.

The other situation when iframes saved my life was when I had to build a WYSIWYG editor for a customer. But the thing with these editors is that you have to find a way to keep the focus and the selection when the user is clicking on all the buttons across the interface.

Because an iframe offers an isolated environment, this means that the focus or the selection is never lost when you are clicking outside of it. By using communication events between the iframe and the parent (more on how to do so later in this article), I managed to design a powerful editor in a snap.

Over 200k developers use LogRocket to create better digital experiences

The iframe attributes you need to know

To this day, there are eight attributes we can use to customize the behavior or styling of an iframe.

You may find more than the ones listed above, but keep in mind that they are not supported in HTML5 anymore: align , frameborder , longdesc , marginheight , marginwidth and scrolling .

Note that, by default, the iframe element has a border around it. To remove it, you can use the style attribute to set the border CSS property to none:

iframe events and communication

Loading and errors.

Because an iframe is a document, you can use most global event handlers .

When you are initiating the iframe, two of these event handlers come in handy to improve the experience, like displaying a spinner or a specific message to assist the user:

• The load event : This is triggered when the iframe is fully loaded. In other words, all static assets have been downloaded, and all the elements in the DOM tree have fired their load event
• The error event : This is triggered when loading fails

You can listen to them with the onload and onerror attribute, respectively:

Or if you can add the listeners to your iframe programmatically.

Communication with iframes

It is quite easy to send messages between the parent and the iframe. You have to use the postMessage function, which is documented here .

From the parent to the iframe

Send the message from the parent element:

And listen to it in the iframe:

From the iframe to the parent

Send the message from the iframe:

And listen to it in the parent:

N.B. , keep in mind that you can end up in some tricky situations when you need to debug something as messages are fire-and-forget (i.e., there is no real error handling).

iframe security

When you are using an iframe, you are mostly dealing with content coming from a third party over which you have no control. Thus, you are increasing the risk of having a potential vulnerability in your application or simply having to deal with a bad user experience (like annoying video autoplay ).

Thankfully, you can block or allow specific features. You have to use the sandbox and allow the attributes we discussed earlier.

Keep in mind that a good rule of thumb is to always grant the minimum level of capability necessary to a resource to do its job. Security experts refer to this concept as “the principle of least privilege.”

The sandbox attribute

Here is the complete list of sandboxing flags and their purposes:

It is up to you to define which privileges you can grant to each iframe.

For instance, if your iframe only needs to submit forms and to open new modal windows, here is how you would configure the sandbox attribute:

For a situation when the sandbox attribute is configured, and one feature is not working correctly within the resource, it might be because it lacks a specific flag. Make sure you know more about them to debug things quickly.

More great articles from LogRocket:

• Don't miss a moment with The Replay , a curated newsletter from LogRocket
• Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
• Use React's useEffect to optimize your application's performance
• Switch between multiple versions of Node
• Discover how to use the React children prop with TypeScript
• Explore creating a custom mouse cursor with CSS
• Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Also, keep in mind that using an empty sandbox attribute will fully sandbox the iframe. This means that the JavaScript inside the iframe will not be executed, and all the privileges listed above will be restricted (like creating new windows or loading a plugin).

The empty sandbox attribute is mostly used for static content but will drastically reduce the capability required for other resources to work properly.

N.B. , the sandbox attribute is unsupported in Internet Explorer 9 and earlier.

The allow attribute

This allow attribute lets you allow specific features like letting the iframe access the accelerometer, the battery information, or the camera. Be sure to check Can I Use… for details on cross-browser support.

There are more than 25 available flags, so I will not list them all here. You can browse them on the Mozilla Feature Policy Documentation . I summarized the most popular in the table below:

Things to know about iframes

How to deal with browsers that do not support iframes.

If a browser does not support an iframe, it will display the content included between the opening <iframe> tag and the closing </iframe> tag.

Thus, you should always think about placing a warning message as a fallback for those poor users.

How can you render the iframe like it is actually part of the parent document (i.e., no borders and scrollbars)?

🤓 The seamless attribute has been introduced for this exact purpose. It is still experimental and poorly supported among browsers . It’s also not part of the W3C HTML5 specification at the time of this writing.

Can iframes affect my website’s SEO?

I did not know much about this, so I had to dig a little. There’s a lot of speculation around this subject.

For a long time, crawlers could not understand iframes, but this is no longer the case. The most relevant answer I found was from this article , and today’s conclusion seems to be:

Since search engines consider the content in iframes to belong to another website, the best you can hope for is no effect. iframes tend to neither help nor hurt your search engine ranking.

Thus, it is best to assume that the content displayed via iframes may not be indexed or available to appear in Google’s search results. A workaround would be to make sure to provide additional text-based links to the content they display so that Google crawlers can find and index this content.

N.B. , you should also not worry about duplicate content issues since today’s web crawlers usually recognize that.

Can iframes affect my website’s loading speed?

Every iframe on a page will increase the memory used, as well as other computing resources like your bandwidth. So you should not use iframes excessively without monitoring what’s going on, or you might end up harming your page performance.

To avoid having your iframes slow down your pages, a good technique is to lazy load them (i.e., loading them only when they are required, like when the user scrolls near them). This can be achieved easily just by adding the loading="lazy" attribute to the tag.

Keep in mind that all modern Chromium-based browsers support this at the time of writing. For something that works everywhere, you may be interested in the lazyload library .

N.B. , the loading="lazy" attribute also works with the img tag, in case you didn’t know that already. 😜

How can I make an iframe responsive?

As more people browse the web using their phones, it is essential to make sure every one of your interfaces is responsive. But how can you do so when you have an iframe in your page?

We could dedicate an entire guide to the myriad ways to make your iframe responsive. Instead, I will just link to two excellent articles:

• This article (with probably the simplest solution) will show you how you can achieve this by wrapping your iframe in another HTML element and by adding a few CSS properties to it
• This second article will show you how you can make an iframe responsive by dealing with aspect ratios

There is also the iframe-resizer library , but keep in mind that it comes with a lot of additional features you may not actually need.

If you are using Bootstrap in your project , there are the embed-responsive and embed-responsive-16by9 classes that you can use straight out of the box to make your iframes responsive:

How to prevent the white flash that occurs while the iframe is loading

Yes, my friends, there is a solution for this. In this article , Chris Coyier shares a little snippet that hides all the iframes on the page with some CSS, removes it until the window is loaded, and then makes them visible.

How to reload the content of an iframe

Easy peasy lemon squeezy! As you can access the window element of the iframe with contentWindow , you have to do this:

Bonus: About iframe accessibility

Most of the time, a screen reader will indicate that an iframe is present on the page.

Many will even enable you to navigate inside. If your iframe does not contain another webpage but instead contains external content like a video player or an ad, it is essential to add a title to the tag.

Adding a title to the tag gives users more context for what is the iframe is about.

Some will say that this attribute is not essential since most screen readers will only read the document’s title when available and skip the title attribute on the iframe tag.

However, for the same title to be read correctly across various screen readers, it remains good practice to provide both and to make sure they match each other.

Another thing to keep in mind is that when your iframe includes non-readable content (like, for instance, a video game built with JavaScript), you will have to hide its contents from screen reader users using the aria-hidden attribute.

We talked about this at the beginning of this guide, but make sure to include some content inside the iframe for all the older browsers that do not support them.

This will give more context to everyone about what should be displayed in the space.

LogRocket : Monitor iframe performance and how users interact with them

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. When implementing iframes, it’s critical that you understand how they impact the performance of the overall app or page as well as the user experience.

Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

Try it for free .

I hope this guide has helped you to improve your knowledge of iframes.

While they can be insecure if you’re loading untrusted content, they also offer some significant advantages. So you should not ban them entirely from your developing arsenal but only use them in relevant situations.

If you have anything to add to this article, you can reach me in the comments below or just ping me on Twitter @RifkiNada .

Share this:

• Click to share on Twitter (Opens in new window)
• Click to share on Reddit (Opens in new window)
• Click to share on LinkedIn (Opens in new window)
• Click to share on Facebook (Opens in new window)

Stop guessing about your digital experience with LogRocket

Recent posts:.

Comparing React state tools: Mutative vs. Immer vs. reducers

Mutative processes data with better performance than both Immer and native reducers. Let’s compare these data handling options in React.

Radix UI adoption guide: Overview, examples, and alternatives

Radix UI is quickly rising in popularity and has become an excellent go-to solution for building modern design systems and websites.

Understanding the CSS revert-layer keyword

In this article, we’ll explore CSS cascade layers — and, specifically, the revert-layer keyword — to help you refine your styling strategy.

Exploring Nushell, a Rust-powered, cross-platform shell

Nushell is a modern, performant, extensible shell built with Rust. Explore its pros, cons, and how to install and get started with it.

45 Replies to "The ultimate guide to iframes"

Seamless attribute was removed from both W3C and WHATWG hrml specs, and implementation was removed from the browsers due to the security and other reasons https://caniuse.com/#feat=iframe-seamless

Missing guide: how to make iframe height automatically use it’s content height 🤔

Thank you for the information, I thought it was only experimental for the time being.

Hello Ariona, what do you mean exactly? 🙂

Nada, great art. Thanks. Just remove unnecessary “)” from postMessage link.

Nice catch. All set.

You talked nothing about “friendly iframe” when the iframe source is and that we do not need to send message events as those iframes can get all functionality from the parent window object…

Thank you, Nada, for this informative article! A helpful addition would be addressing accessibility issues with iframes.

There is a lot to be said about WCAG conformance an iframes. Technique H64: Using the title attribute of the frame and iframe elements ( https://www.w3.org/TR/WCAG20-TECHS/H64.html ) addresses how this applies to WCAG Success Criteria 2.4.1 Bypass Blocks (level A) and 4.1.2 Name, Role, Value (level A). While conformance is more nuanced than a pass/fail, at least acknowledging the challenge and risk of being flagged by automated accessibility testing tools should be in this article.

I have a question.

I’m using an iframe to load a media file. Click the link to the file and it loads into the named iframe.

My link has a target=”media” attribute on it and the first video loads fine. However when I try to load the second video it will not load in the iframe, it loads in a new tab.

Just wondering how you got the google.com example to work. I get a “Blocked by X-Frame -Options Policy” for google, and “Blocked by Content Security Policy” for some other domains that I tried, But the Twitter button and the Logrocket examples work fine. I am using localhost/ 127.0.0.1 for testing, which might be the issue.

I have a lot of content on my site, and I recently implemented the use of (loading=”lazy”) to defer the loading of an iframe until the viewer opens the window. I noticed that it did not interfere with the laoding of the iframe content, however, the code was flagged as “not allowed” when validating my html. I also noticed that when using speed testing sites such as Google insights and GTMetrics, the browser is seeing and loading the content within the iframe even though I am using the lazy loading tag in the iframe?

Hi Don, can you tell me which browser (and version) you’re using ?

Hi, thanks for this guide, really interesting. You wrote “Because an iframe offers an isolated environment, this means that the focus or the selection is never lost when you are clicking outside of it.” I am actually facing a situation where my iFrame is losing its focus when clicking elsewhere… Any way to prevent that ?

Hi, thanks for this comprehensive iframe documentation , But frankly , I was looking for an answer to a difficult question , a question that no one online , even the Top Programming websites , could answer it till now .. This question is , how can we play a video game inside iframe , without the keyup or keydown forcing the whole page to scroll up or down , instead of focusing inside the iframe ?

Why don’t you simply disable the scroll when people are using the keyboard arrows? Something like https://stackoverflow.com/questions/8916620/disable-arrow-key-scrolling-in-users-browser

If you want to check when an iframe is not focused anymore, you can check this thread https://stackoverflow.com/questions/5456239/detecting-when-an-iframe-gets-or-loses-focus Then, you only have to refocus the iframe with javascript when it happens

Hi, Thanks for this excellent information with unique content and it is very useful to know about the information based on comprehensive iframe documentation.

Thanks for your guide! I tried to use it for error handling if the iFrame could not be loaded, but this does not seem to be possible, since the onerror event never gets triggered. Ans it also seems like (at least for Chrome), they are not going to fix that: https://bugs.chromium.org/p/chromium/issues/detail?id=365457

Is there something im missing?

Any idea how to use IFRAME in windows application?

Yes , it worked that way . Thanks again .

thx Nada – I really like the overview quality of your article. if I integrate content via iFrame into a WP page is there a way I can avoid thrd parties to open the iFrame content without opening the complete page?

Can you please tell me how we can display a PDF file inside the iframe html element without download & print option in the frame window?

For some you can’t use external resources from iframe using a development server, especially when trying to fetch resources from Google. As a security measure google doesn’t allow that… hence a development server with a “localhost” in it’s domain is automatically blocked. There is a way to trick the system by changing your “localhost” domain or using https, I read somewhere tho I never actually tried it before just a friendly coder who stumbled on this article to learn more about iFrames.

Hello. Great post. I had a question about using iframe and jump links together. I am building a recipe site with a list of links to recipes from different sites. When the links are clicked the recipes are displayed within the iframe window at the top of the same page. I wanted to add jump links so the user to taken to the top of the page where the recipe is being displayed. Any suggestions?

set your target attibute: target=’_parent’

Great Article Nada – well done. I came to the sight to get some information on how cookies work within an iframe. I’m using .Net Core 2.2. and application (session) cookies are not being recognized in the same way as if the application runs outside the iframe. Any insight on cookie limitations and using sameSite=None/Lax/Strict (etc), and the meaning of these would be a great add to your article.

im trying to add a iframe into elementor on wordpress and i cannot figure out to adjust the height, there is also a rule for scrolling in a an iframe i didnt see that here.

I wrote a set of pages a while ago. In fact last changed 2011! Now I am trying to resurrect them. But they were built around frameset(s) and frame(s) – I did write a kind of “file explorer”. I can work out what to change. But the main problems is how to move the iframe to be along the right, e.g. width=85% but I can’t see (in several different pages) how to have the iframe set right. I’ve seen talk of attribute object-position, but I can’t how to work it.

nice guide. got the info, what im looking for.

I’ve done all I want, almost…(I worked out the rightside by using tables).

Something like file explorer but with my photos across the world.

I insert one (one of a number of pages) into the right side. On its own it’s fine, but inside an iframe, it does allow js. OK with variable but not OK with fumctions. I guess this tweaking some kind of attribute I need to use, but I can’t hack it. Help —–

All I have to do after that is visibility:collapse

And add or the places I travelled – mostly China / SE Asiia; and Europe. About 50000 photos, only about 1000 for this album.

it helped us a lot

How can I stop the refresh of iframe on button click or opening a pop up?

Great overview!

Regarding security – please note that it’s considered unsecure to specify the origin domain as a wildcard (*) in your example – postMessage(‘message’, ‘*’). It’s best to be specific about the domains used for communications to prevent unwanted information discolusre/XSS attacks.

I wrote a library that simplify communication between frames – it’s called iFramily ( https://github.com/EkoLabs/iframily ). Basically it has a simpler API than postMessage, which includes Promise-based responses, message queuing, and managing the connection until both frames are ready to talk. It also takes a responsible approach to security…

Would love to hear your thoughts!

Nice Nada, lazy load really help. I use it hundreds of times for images, It also works for iframe. LoL

I am planning to embed a third party survey url as a source to my modal window iframe. I want the user to take that survey only once and want to prevent view source or inspect element to show up the src somehow. Or at least want to make it obscure and unreadable. I tried setting it via JavaScript and I obfuscated the js setting this src but still after load of the iframe, src is viewable in plain text which earlier was set to unknown. Any help in securing the survey link?

@Nada Rifki Is there any way to get the text from click inside iframe. Explaination: I have an iframe on my page using window.getSelection() i get the selected text, similarly i want to get the selected text from iframe. Can we do that? if yes how?

Chris Coyier snippet is a really a good one, the white flash is not there any more. Thanks

Nice. Addressing accessibility concerns that are caused by iframes would be a valuable addition.

I found your article when searching for a solution to deal with my use case. Thank you for what I hope will be the solution!

After adding iframe the website speed shows slow. How can i optimize the iframe?

Hello, i want to open a link in two iframes. how its possible ?

This guide was very helpful for me

I have tried https://github.com/EkoLabs/iframily and https://github.com/SpringRoll/Bellhop . Finally I choose Bellhop over iframily

Leave a Reply Cancel reply

Photo by pine watt on Unsplash

Third-Party Cookie Restrictions for Iframes in Safari

Table of contents

What do you need to know before, introduction, storage access apis, we are hiring.

What is an iframe ?

What are cookies?

What is a third-party cookie?

Have you ever wondered why some websites ask for storage permissions or why some features don't work in certain browsers? Let's dive into the intricacies of third-party cookie restrictions in Safari and how we tackled them!

Safari , Apple's flagship browser, has always been a pioneer in the quest for user privacy and security . In recent years, it has made significant strides in protecting its users from the prying eyes of online trackers by restricting third-party cookies .

In the following discussion, we will delve into a specific challenge encountered within this privacy-focused paradigm. This blog aims to unravel the complexities of seeking storage permission in Safari, particularly when our content is loaded within an iframe and relies on third-party cookies.

The predicament arose as we endeavored to integrate our React-based web app into an iframe hosted on a different domain. This intersection of domains posed a unique challenge, prompting us to explore innovative solutions to seamlessly navigate the intricacies of Safari's third-party cookie restrictions.

Our application uses cookies for authentication. In one of the use cases, it was being rendered inside an iframe. The parent HTML document that was rendering the iframe was being hosted on an entirely different domain.

In other browsers, our application within the iframe was able to access the cookies but not in Safari. Safari uses Intelligent Tracking Prevention(ITP ) to control the access of third-party cookies.

ITP aims to prevent third-party cookies, making them inaccessible in iframes unless certain conditions are met. These conditions can be found in the Webkit's official announcement .

"Third-party cookie access can only be granted through the Storage Access API."

Let's look at parts of this API that concern our problem:

document.hasStorageAccess API Doc

This API is used to check cookie storage access. This will return false for third-party cookies in the case of the Safari browser.

document.requestStorageAccess API Doc

This API is used to ask for third-party storage(cookie) access explicitly from the user.

Both of the above APIs are available in Safari as well as in other browsers .

Webkit's official documentation explains the steps to use these APIs & the rest of the user flow(which is the basis for the following solution). We recommend giving it a read before moving ahead with this post.

The solution described below is not the only one but will help you in designing solutions for your use cases. You can also design a solution as per your needs by following the guide mentioned here .

We are using react so the above-mentioned solution is written in the concepts of react.

We have created separate utility functions in the helper file.

The above code is to make the browser API abstract from the actual implementation. These functions are what we are going to call.

Then after, we created a new file named useStoragePermissions.tsx and added the below-mentioned code.

Using the above hook we have exposed below three states:

needPermission : This will be true when the browser is Safari and it has support for hasStorageAccess and requestStroageAccess

Hint: Use this boolean while consuming this hook to decide when to call askForPermission and haveCheckedPermission .

askForPermission : This is the function that the consumer could call to request the user to give storage access permission

haveCheckedPermission : This is a boolean which will be true after calling askForPermission in the case of needPermission is true initially.

To consume the above hook, we have followed the below-mentioned steps:

We have mounted and created a hook in #2 at the initialization part of the app. Use the needPermission state from it and proceed ahead as normal when needPermission is false .

We created some other routes user-access-flow that show a button with some text like Set Cookie . And onClick of it, we set the cookie.

This is where we are actually calling authentication-related APIs and then the server is setting up cookies.

Once this cookie is set, close this tab using window.close()

Now when, needPermission is true

We show the user some text like, " Click here and click on the Set-Cookie button on the newly opened tab " and on click of it, redirect the user to the route created in above step 2.

Now, when a user comes back from that route, call askForPermission on click of some button. Which should ask the user to give storage permission.

Once the user clicks on Allow the button, your website is authorized to store and access third-party cookies and now you can continue with business logic.

We have also kept this thing in mind that this consent will be revoked if the user cleans up the browser history and does not visit that domain for 7 days. These constraints are already mentioned here

If you have faced such issues while developing or browsing such issues, please share those in the comments. We will be more than happy to read and comment more on those.

If solving challenging problems at scale in a fully remote team interests you, head to our careers page and apply for the position of your liking!

• Español – América Latina
• Português – Brasil
• Tiếng Việt

It's time to lazy-load offscreen iframes!

Browser Support

Lazy-loading of <iframe> elements defers offscreen iframes from being loaded until the user scrolls near them. This saves data, speeds up the loading of other parts of the page, and reduces memory usage.

As with lazy-loading for images , use the loading attribute to tell the browser you want to lazy-load an iframe.

This demo of <iframe loading=lazy> shows lazy-loading video embeds:

Why lazy-load iframes?

Third-party embeds cover a wide range of use cases, from video players to social media posts to ads. This content is often not immediately visible in the user's viewport, but users still pay the cost of downloading data and costly JavaScript for each frame, even if they don't scroll to it.

Based on Chrome's research into automatically lazy-loading offscreen iframes for Data Saver users , lazy-loading iframes could lead to 2-3% median data savings, 1-2% First Contentful Paint reductions at the median, and 2% First Input Delay (FID) improvements at the 95th percentile.

Lazy-loading off-screen iframes can also improve your page's Largest Contentful Paint (LCP) . Because iframes often need a significant amount of bandwidth to load all their subresources, lazy-loading offscreen iframes can reduce bandwidth contention on network-constrained devices, leaving more bandwidth to load resources that contribute to a page's LCP.

How does built-in lazy-loading for iframes work?

The loading attribute lets a browser defer loading offscreen iframes and images until users scroll near them. loading supports two values:

• lazy : a good candidate for lazy-loading.
• eager : not a good candidate for lazy-loading. Load right away.

Using the loading attribute on iframes works as follows:

Not specifying the attribute has the same impact as explicitly eagerly loading the resource.

If you need to dynamically create iframes using JavaScript, setting iframe.loading = 'lazy' on the element is also supported :

How does lazy-loading popular iframe embeds impact the user experience?

Making lazy-loading iframes the default would make websites much more responsive. The following examples show Time to Interactive (TTI) improvements and data savings for media embeds, but lazy-loading advertising iframes can give similar benefits.

Lazy-loading YouTube video embeds saves around 500KB on initial page load:

Instagram embeds provide a block of markup and a script that injects an iframe into your page. Lazy-loading this iframe avoids having to load all the script the embed needs, and can save about 100 kB on initial load. Because these embeds are often displayed below the viewport in most articles, this is a reasonable candidate for iframe lazy-loading.

Lazy-loading Spotify embeds can save 514 KB on initial load.

Facebook's social plugins

Facebook social plugins let developers embed Facebook content in their web pages. The most popular of these is the Like plugin , a button that shows how many users have "liked" the page. By default, embedding the Like plugin in a web page using the Facebook JSSDK pulls in around 215 KB of resources, 197 KB of which is JavaScript. The plugin often appears at the end of an article or near the end of a page, so loading it eagerly when it's offscreen can be suboptimal.

Thanks to engineer Stoyan Stefanov, all of Facebook's social plugins now support standardized iframe lazy-loading . Developers who opt into lazy-loading through the plugins' data-lazy configuration can now prevent these plugins loading until the user scrolls nearby. This lets the embed keep functioning for users that need it, while saving data for users who don't scroll all the way down a page. We are hopeful this is the first of many embeds to explore standardized iframe lazy-loading in production.

Cross-browser iframe lazy-loading

You can apply iframe lazy-loading to your site as a progressive enhancement. Browsers that support loading=lazy on iframes lazy-load the iframe, and browsers that don't support the loading attribute safely ignore it.

You can also lazy-load offscreen iframes using the lazysizes JavaScript library. You might want to do this if you:

• Require more custom lazy-loading thresholds than standardized lazy-loading offers
• Want to offer users a consistent iframe lazy-loading experience across browsers.

Use the following pattern to feature detect lazy-loading and fetch lazysizes when it's not available:

Are there exceptions to offscreen iframe lazy loading?

An early experiment with automatically lazy-loading iframes for Data Saver users in Chrome had an exception for hidden iframes, often used for communications or analytics. These were prevented from loading lazily, and always loaded to prevent breaking those features.

The loading attribute doesn't apply these heuristics, so the developer always gets to choose what gets lazy-loaded. The loading attribute should always be honored, subject to distance limits and other browser choices (such as printing).

For more lazy-loading ideas, see web.dev's image and video lazy-loading collection .

With thanks to Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley, and Stoyan Stefanov for their reviews.

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License , and code samples are licensed under the Apache 2.0 License . For details, see the Google Developers Site Policies . Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2023-12-12 UTC.

HTML: The Living Standard

4.8.5 the iframe element.

The iframe element represents its content navigable .

The src attribute gives the URL of a page that the element's content navigable is to contain. The attribute, if present, must be a valid non-empty URL potentially surrounded by spaces . If the itemprop attribute is specified on an iframe element, then the src attribute must also be specified.

The srcdoc attribute gives the content of the page that the element's content navigable is to contain. The value of the attribute is used to construct an iframe srcdoc document , which is a Document whose URL matches about:srcdoc .

The srcdoc attribute, if present, must have a value using the HTML syntax that consists of the following syntactic components, in the given order:

Here a blog uses the srcdoc attribute in conjunction with the sandbox attribute described below to provide users of user agents that support this feature with an extra layer of protection from script injection in the blog post comments:

Notice the way that quotes have to be escaped (otherwise the srcdoc attribute would end prematurely), and the way raw ampersands (e.g. in URLs or in prose) mentioned in the sandboxed content have to be doubly escaped — once so that the ampersand is preserved when originally parsing the srcdoc attribute, and once more to prevent the ampersand from being misinterpreted when parsing the sandboxed content.

Furthermore, notice that since the DOCTYPE is optional in iframe srcdoc documents , and the html , head , and body elements have optional start and end tags , and the title element is also optional in iframe srcdoc documents , the markup in a srcdoc attribute can be relatively succinct despite representing an entire document, since only the contents of the body element need appear literally in the syntax. The other elements are still present, but only by implication.

In the HTML syntax , authors need only remember to use U+0022 QUOTATION MARK characters (") to wrap the attribute contents and then to escape all U+0026 AMPERSAND (&) and U+0022 QUOTATION MARK (") characters, and to specify the sandbox attribute, to ensure safe embedding of content. (And remember to escape ampersands before quotation marks, to ensure quotation marks become &quot; and not &amp;quot;.)

In XML the U+003C LESS-THAN SIGN character (<) needs to be escaped as well. In order to prevent attribute-value normalization , some of XML's whitespace characters — specifically U+0009 CHARACTER TABULATION (tab), U+000A LINE FEED (LF), and U+000D CARRIAGE RETURN (CR) — also need to be escaped. [XML]

If the src attribute and the srcdoc attribute are both specified together, the srcdoc attribute takes priority. This allows authors to provide a fallback URL for legacy user agents that do not support the srcdoc attribute.

If, when the element is created, the srcdoc attribute is not set, and the src attribute is either also not set or set but its value cannot be parsed , the element's content navigable will remain at the initial about:blank Document .

If the user navigates away from this page, the iframe 's content navigable 's active WindowProxy object will proxy new Window objects for new Document objects, but the src attribute will not change.

The name attribute, if present, must be a valid navigable target name . The given value is used to name the element's content navigable if present when that is created .

The sandbox attribute, when specified, enables a set of extra restrictions on any content hosted by the iframe . Its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive . The allowed values are:

When the attribute is set, the content is treated as being from a unique opaque origin , forms, scripts, and various potentially annoying APIs are disabled, and links are prevented from targeting other navigables . The allow-same-origin keyword causes the content to be treated as being from its real origin instead of forcing it into an opaque origin ; the allow-top-navigation keyword allows the content to navigate its traversable navigable ; the allow-top-navigation-by-user-activation keyword behaves similarly but allows such navigation only when the browsing context's active window has transient activation ; the allow-top-navigation-to-custom-protocols reenables navigations toward non fetch scheme to be handed off to external software ; and the allow-forms , allow-modals , allow-orientation-lock , allow-pointer-lock , allow-popups , allow-presentation , allow-scripts , and allow-popups-to-escape-sandbox keywords re-enable forms, modal dialogs, screen orientation lock, the pointer lock API, popups, the presentation API, scripts, and the creation of unsandboxed auxiliary browsing contexts respectively. The allow-downloads keyword allows content to perform downloads. [POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

The allow-top-navigation and allow-top-navigation-by-user-activation keywords must not both be specified, as doing so is redundant; only allow-top-navigation will have an effect in such non-conformant markup.

Similarly, the allow-top-navigation-to-custom-protocols keyword must not be specified if either allow-top-navigation or allow-popups are specified, as doing so is redundant.

To allow alert() , confirm() , and prompt() inside sandboxed content, both the allow-modals and allow-same-origin keywords need to be specified, and the loaded URL needs to be same origin with the top-level origin . Without the allow-same-origin keyword, the content is always treated as cross-origin, and cross-origin content cannot show simple dialogs .

Setting both the allow-scripts and allow-same-origin keywords together when the embedded page has the same origin as the page containing the iframe allows the embedded page to simply remove the sandbox attribute and then reload itself, effectively breaking out of the sandbox altogether.

These flags only take effect when the content navigable of the iframe element is navigated . Removing them, or removing the entire sandbox attribute, has no effect on an already-loaded page.

Potentially hostile files should not be served from the same server as the file containing the iframe element. Sandboxing hostile content is of minimal help if an attacker can convince the user to just visit the hostile content directly, rather than in the iframe . To limit the damage that can be caused by hostile HTML content, it should be served from a separate dedicated domain. Using a different domain ensures that scripts in the files are unable to attack the site, even if the user is tricked into visiting those pages directly, without the protection of the sandbox attribute.

In this example, some completely-unknown, potentially hostile, user-provided HTML content is embedded in a page. Because it is served from a separate domain, it is affected by all the normal cross-site restrictions. In addition, the embedded page has scripting disabled, plugins disabled, forms disabled, and it cannot navigate any frames or windows other than itself (or any frames or windows it itself embeds).

It is important to use a separate domain so that if the attacker convinces the user to visit that page directly, the page doesn't run in the context of the site's origin, which would make the user vulnerable to any attack found in the page.

In this example, a gadget from another site is embedded. The gadget has scripting and forms enabled, and the origin sandbox restrictions are lifted, allowing the gadget to communicate with its originating server. The sandbox is still useful, however, as it disables plugins and popups, thus reducing the risk of the user being exposed to malware and other annoyances.

Suppose a file A contained the following fragment:

Suppose that file B contained an iframe also:

Further, suppose that file C contained a link:

For this example, suppose all the files were served as text/html .

Page C in this scenario has all the sandboxing flags set. Scripts are disabled, because the iframe in A has scripts disabled, and this overrides the allow-scripts keyword set on the iframe in B. Forms are also disabled, because the inner iframe (in B) does not have the allow-forms keyword set.

Suppose now that a script in A removes all the sandbox attributes in A and B. This would change nothing immediately. If the user clicked the link in C, loading page D into the iframe in B, page D would now act as if the iframe in B had the allow-same-origin and allow-forms keywords set, because that was the state of the content navigable in the iframe in A when page B was loaded.

Generally speaking, dynamically removing or changing the sandbox attribute is ill-advised, because it can make it quite hard to reason about what will be allowed and what will not.

The allow attribute, when specified, determines the container policy that will be used when the permissions policy for a Document in the iframe 's content navigable is initialized. Its value must be a serialized permissions policy . [PERMISSIONSPOLICY]

In this example, an iframe is used to embed a map from an online navigation service. The allow attribute is used to enable the Geolocation API within the nested context.

The allowfullscreen attribute is a boolean attribute . When specified, it indicates that Document objects in the iframe element's content navigable will be initialized with a permissions policy which allows the " fullscreen " feature to be used from any origin . This is enforced by the process permissions policy attributes algorithm. [PERMISSIONSPOLICY]

Here, an iframe is used to embed a player from a video site. The allowfullscreen attribute is needed to enable the player to show its video fullscreen.

Neither allow nor allowfullscreen can grant access to a feature in an iframe element's content navigable if the element's node document is not already allowed to use that feature.

Because they only influence the permissions policy of the content navigable 's active document , the allow and allowfullscreen attributes only take effect when the content navigable of the iframe is navigated . Adding or removing them has no effect on an already-loaded document.

The iframe element supports dimension attributes for cases where the embedded content has specific dimensions (e.g. ad units have well-defined dimensions).

An iframe element never has fallback content , as it will always create a new child navigable , regardless of whether the specified initial contents are successfully used.

The referrerpolicy attribute is a referrer policy attribute . Its purpose is to set the referrer policy used when processing the iframe attributes . [REFERRERPOLICY]

The loading attribute is a lazy loading attribute . Its purpose is to indicate the policy for loading iframe elements that are outside the viewport.

When the loading attribute's state is changed to the Eager state, the user agent must run these steps:

Descendants of iframe elements represent nothing. (In legacy user agents that do not support iframe elements, the contents would be parsed as markup that could act as fallback content.)

The HTML parser treats markup inside iframe elements as text.

Here is an example of a page using an iframe to include advertising from an advertising broker:

4.8.6 The embed element

The embed element provides an integration point for an external application or interactive content.

The src attribute gives the URL of the resource being embedded. The attribute, if present, must contain a valid non-empty URL potentially surrounded by spaces .

If the itemprop attribute is specified on an embed element, then the src attribute must also be specified.

The type attribute, if present, gives the MIME type by which the plugin to instantiate is selected. The value must be a valid MIME type string . If both the type attribute and the src attribute are present, then the type attribute must specify the same type as the explicit Content-Type metadata of the resource given by the src attribute.

The embed element supports dimension attributes .

4.8.7 The object element

The object element can represent an external resource, which, depending on the type of the resource, will either be treated as an image or as a child navigable .

The data attribute specifies the URL of the resource. It must be present, and must contain a valid non-empty URL potentially surrounded by spaces .

The type attribute, if present, specifies the type of the resource. If present, the attribute must be a valid MIME type string .

The name attribute, if present, must be a valid navigable target name . The given value is used to name the element's content navigable , if applicable, and if present when the element's content navigable is created .

The form attribute is used to explicitly associate the object element with its form owner .

The object element supports dimension attributes .

In this example, an HTML page is embedded in another using the object element.

Blocked a frame with origin " https://www.xyz.com " from accessing a frame with origin " https://www.abc.com ". Protocols, domains, and ports must match.

iframes on Safari

Jan 3, 2024 • knowledge, information.

• Sauce DevOps Test Toolchain
• Sauce Cross-Browser
• Sauce Mobile
• Sauce Orchestrate
• Sauce Low-Code
• Sauce Error Reporting
• Sauce API Quality
• Sauce Visual
• Sauce Performance
• Sauce Insights
• Integrations & plugins
• Supported browsers and devices
• Platform configurator
• Resources by topic
• Documentation
• Systems status
• Terms of Service
• Privacy Policy

sandbox attribute for iframes

Method of running external site pages with reduced privileges (e.g. no JavaScript) in iframes.

• 4 - 123 : Supported
• 124 : Supported
• 125 - 127 : Supported
• 12 - 123 : Supported
• 3.1 - 4 : Not supported
• 5 - 17.3 : Supported
• 17.4 : Supported
• 17.5 - TP : Supported
• 2 - 16 : Not supported
• 17 - 27 : Partial support
• 28 - 124 : Supported
• 125 : Supported
• 126 - 128 : Supported
• 9 - 12.1 : Not supported
• 15 - 108 : Supported
• 109 : Supported
• 5.5 - 9 : Not supported
• 10 : Supported
• 11 : Supported

Chrome for Android

Safari on ios.

• 3.2 - 4.1 : Not supported
• 4.2 - 17.3 : Supported
• 17.5 : Supported

Samsung Internet

• 4 - 23 : Supported
• 24 : Supported
• all : Not supported

Opera Mobile

• 10 - 12.1 : Not supported
• 80 : Supported

UC Browser for Android

• 15.5 : Supported

Android Browser

• 2.1 : Not supported
• 2.2 - 4.4.4 : Supported

Firefox for Android

• 14.9 : Supported

Baidu Browser

• 13.52 : Supported

KaiOS Browser

• 2.5 : Supported
• 3 : Supported

Safari Support

Get to know safari.

Safari profiles

Create separate profiles for things like home and work, so you can keep your browsing activities organized.

• Watch the video about profiles

Use passkeys

Passkeys replace passwords for an easier and more secure way to sign in to your accounts. And you can find them right on your device.

• On your iPhone
• On your Mac

Add your favorite websites to the Dock for an app-like experience.

• Learn how to use web apps

Customize your start page

Choose a background image and other options such as Favorites, Siri Suggestions, iCloud Tabs, and Reading List.

• Personalize your start page

Add extensions

Safari extensions add functionality and are a great way to personalize and enhance your browsing experience.

• Learn how to install extensions

Privacy Report

See a list of known trackers who’ve been blocked from tracking you across all the websites you’ve visited.

• View your Privacy Report
• Manage your privacy

Autofill passwords

Use the AutoFill feature to easily fill in saved user names and passwords, and suggest strong passwords when you sign up for websites.

• Learn about Autofill

Import bookmarks

You can import your bookmarks, history, and saved passwords from Google Chrome or Mozilla Firefox, and pick up right where you left off.

• Import from other browsers

Increase your online security

Learn how to identify and avoid  phishing and other scams , and how to get a warning if the site you’re visiting is a suspected phishing website. 

• Update Safari Security preferences for Mac

Learn about features and discover all that Safari can do.

• Browse the guide

Set up iCloud

Select and set up the iCloud features you want to use like Photos, Contacts, Calendars, and more.

Search for more topics

Apple Communities

Find answers, ask questions, and connect with other Apple users.

• Ask or search now

Get Support

We can help you find the best support options.

Support app

Get personalized access to solutions for your Apple products.

• Download the Apple Support app

Datalist Support in Safari

Is there any way to get full datalist support in Safari?

Originally basic support came a long time after other browsers but it still does not fully support datalists where for example a datalist has a value and a description.

In Safari only the value/code is displayed and not the title/description which makes it very difficult to know what the code/option relates to.

This example demonstrates it well:

HTML5 <datalist> autocomplete examples (codepen.io)

Examples 3 and 4 show a value and a description for each option if viewed in Chrome or Edge as is common in select lists too but it only shows AF, AX and AL... in Safari and then it is difficult to know what these countries are.

Support has been in Chrome since 2012 and Edge since 2014 and being able to use a searchable drop-down for something long like country and ethnicity would seem pretty important but 12 years after Chrome supported it, it is still not usable for this scenario in Safari.

Other than have to add JavaScript to convert datalists to selects on Safari and lose the benefits will datalists be properly supported at some point?

Posted on Apr 26, 2024 8:13 AM

Loading page content

Page content loaded

There are no replies.