Iframe, what is its role on digital marketing?
pujoljulia June 28, 2016

If you work on digital, you probably have heard about iframes but, have you ever wondered what exactly it is? Just take a look at the above image, have you seen it? Yes it’s just a window! Okay, so let’s say an iframe is everything you see through the window, the chairs, the grasp, the sea, the mountain… those things don’t belong to the home, however you can see them through the windows, right? Well, an iframe is pretty much the same.

Taking the parallelism, the house can be replaced by some website and the iframe by a window that allows to see some stuff that doesn’t belong to the website, ergo, another website. Amazing right? Let’s build up our first iframe! What about embedding the CNN News website in my site? No, I’m not kidding, here it is:

Notice that although you can see the CNN page on my website, it’s a completely different site (please click here to see the page on a new tab) and the browser treat it as such. That was the idea for what the iframes were created, to show another domain (or same domain but a different page or subdomain) in a particular page, but then the advertising and so the analytics came up and… let’s say that they started to take advantage of the iframes capabilities to accomplish another kind of goals.

If the iframe is like a window… Have you ever wondered who can be watching through that window? Have you ever also wondered who can pass through that window? Did you know that a grand part of the current tracking pixels are still invisible iframes? Did you know that ‘I like’, ‘+1’, ‘share’ and other social interactive buttons are iframes? Are you aware about all potential risks (or benefits) of embed external iframes? If you are unclear about some of these questions, I’d suggest you to keep reading.

First things first: The security

If you have read some of my previous posts, you’re starting to know me and realize that if something I care much about it’s that my readers understand how digital marketing works behind the scenes, so let’s digging deeply into the iframes. The code I’ve used to show the CNN page at my website it’s very simple, just pure HTML (and a little of CSS but never mind for this case):

As you can observe, it’s just an <iframe> tag where the source parameter ‘src’ points to http://money.cnn.com/INTERNATIONAL/, which means ‘please go to CNN page and bring its content here’, simple. The reason because the <iframe> is enclosed inside a <div> is because I want it to be responsive, and since it’s impossible to get this straight with the <iframe> tag, I’ve to rely on the <div>.

Iframes are easy to implement, however there are a lot of specs that have to be understood to know the iframe’s capabilities/limits to take advantage of them in terms of advertising/analytics without take any security risk. Below are the two main questions you should wonder yourself before even think about to use the iframes:

(1). How secure my site to be iframed?

The first question that comes up is: can I embed whatever page I desire? Hmm let’s try it! what about The New York Times website?

Ufff… something was wrong… Let’s take a look at the console (alt+cmd+i for Mac devices, F12 for Windows devices):

cross-domain-iframe-error

That means NO, we cannot embed any page we want, in fact if you DO NOT want your page to be ‘iframed’ from any other page (like New York Times site), you must set up at your page/site/subdomain the X-FRAME-OPTIONS response header as ‘DENY’. The response header could be directly implemented into .htaccess file (Apache servers) or through some server-side language, for instance with PHP would be:

Look at the iframes below, the first one is iframing http://www.analyticstestlab.com/valley.php, which allows to be iframed:

allow-iframed

And the other is iframing http://www.analyticstestlab.com/sky.php, which doesn’t allow to be iframed:

deny-iframed

Notice that the last one is carrying the header discussed earlier along with the HTTP response, which prevents the page to be iframed. Please set up this to your domain if you’re not plan to be iframed from somewhere else, otherwise anyone could potentially emulate your site and steal your users’ data by using some techniques like Click-jacking (I highly recommend you to click on the video-link). Take this point seriously, it’s really important and a lot of famous websites are not doing it, or not properly.

(2). How secure my site from the embedded iframes?

As you can imagine, when an iframe is embedded it’s able to do whatever it has been programmed to do, that includes trigger alerts, run malicious plugins, submittable forms that potentially could attempt to steal users’ information, autoplay videos, intrusive pop-ups…

HTML5 brought a new way to protect the site against some possible non-desirable actions that the iframes can carrying out, and this way is called ‘sandbox’:

‘sandbox’ is a parameter that, if present (and empty), prevents the iframe to:

  • Submit forms.
  • Open pop-ups, new windows or new tabs.
  • Lock the screen orientation.
  • Use the Pointer Lock API.
  • Have access to the parent window (the page itself).
  • Run javaScript code.
  • Read cookies or local storage from the parent, even if it’s from the same origin.

If you just want to restrict some of the above points, then you will have to fill out the ‘sandbox’ parameter with just certain values which are gonna allow to the iframes just to do certain stuff.

‘sandbox’ parameter is not gonna protect your page a 100%, for that reason before to add any iframe to your site you have to know how it works and evaluate all potential risks.

The connection between the iframe and the page

This part is really important, and has been a very common topic of discussion over the years. The HTTP protocol itself and the W3C Consortium (the folks that establish how browsers have to behave and the Internet guidelines in general) tends to be highly protectors regarding the communication between different domains (www.domainA.com and www.domainB.com) or even between subdomains of the same domain (www.domainA.com and org.domainA.com) for security reasons. Over the years the developers have been finding workarounds to connect this gap, until HTML5 shows up and establishes the proper rules to accomplish it.

To understand the communication between iframes and the parent pages (page that host the iframe, in this case, this page) is essential to split the subject in two parts: Internal connection and External connection.

(1). Internal connection: Between different subdomains of the same domain

Back in a days used to be usual to build websites by framing them (note that ‘framed’ means embedding pages of the same domain, meanwhile ‘iframed’ means embedding pages of different domain), that is by calling different frames to construct the page, let’s say for instance for the menu (like the black top menu of my blog), just to keep it visible when the user scrolls down. That feature is nowadays deprecated since the latest versions of CSS takes care of it but still, some times for example in case of the forms, a web developer may want just code it once and then just framed it at different pages of the site.

This is the web developer approach, what about our approach? Apparently could seem that it’s not necessary for us, but don’t be confused, it is. Have you ever heard about Item Storage? It’s like cookies but with more storage capacity and one big and fat downside: the information cannot be shared across sub domains… can you believe that? (I’m going to keep it down…) So well, thanks to the iframes we can bypass this restriction, but this will be the entire topic at my next post, by now let’s focus at the current matter.

So far so good, let’s invoke an iframe from one of my subdomains, specifically from http://analytics.pujoljulia.com. Here it is:

The way a parent window (www.pujoljulia.com) can access to the child window (analytics.pujoljulia.com) of the same website is by the window.frames method, which returns an array with all frames/iframes that the window contains. To get the below iframe among all others, is necessary the iframe’s name  window.frames[‘iframe_name’]  (would be convenient to add the name parameter in all iframes you want to embed from now on) and the document call window.frames[‘iframe_name’].document. To know the name of the iframe below, just press Ctrl+Shift+c on Window devices or Cmd+Shift+c on Mac devices, then click over the iframe:

Okay, so let’s try to place window.frames[‘iframe_name6’].document at the browser console:

iframe-cross-domain-error-console

Wow… why the error says something about cross-origin frame if the parent window (www.pujoljulia.com) and the child window (analytics.pujoljulia.com) are under the same domain? By default the iframe’s rules prevent the connection attempt from the parent window to access to child iframe (or vice versa) hosted on different subdomain, so to establish the connection and therefore access all child’s iframe information (again, into the same domain), we have to call the document.domain and set it up on both, parent and child with the host name:

Okay, so let’s do it. To make the things easy for you, I embedded the above code on the above iframe’s button (green button of above) and on below parent’s window button (below green one), once pressed BOTH, the code will be applied at both windows. So… yes, press them!

I want to be friend of the iframe window!

Have you already press both of them? Okay, try to type again window.frames[‘iframe_name6′].document’ on the console (make sure to selected ‘top’ at the console’s dropdown, at the right of the funnel icon):

iframe-cross-domain-success-console

It works! So now the parent window (www.pujoljulia.com) can access to the entire document of the iframe (analytics.pujoljulia.com), take a look:

iframe-access

The parent window can access to the cookies, item storage, to the DOM, to the URL… everywhere, in a nutshell, with cleverly javaScript the parent can change everything from the child (iframe) but… what about what the iframe can does with the parent? Basically the same, but instead of the seen code is used the window. parent method (to get the immediately superior parent of the iframe in case there would be more than one) and window.top method (which grabs the real page that keeps all iframes).

If you already have pressed the two green buttons, the parent/iframe connection is already established. If you scroll up again to the iframe and press the blue button, at the right should appear the parent window’s URL, basically the URL you’re seeing at the top of the browser. That fact means the iframe has got access to parent’s window stuff (cookies, local storage, DOM…), if you refresh the page (which will reset all javaScript variables and so the parent/iframe connection will be cut off) and press the blue button without previously press the green ones, non URL will appear and you will see the console’s error showed before, warning about the cross domain policy.

To summarize everything seen it, once document.domain is setting up on the parent (www.pujoljulia.com) and on the iframe (analytics.pujoljulia.com) windows with the domain name ‘pujoljulia.com’, the connection is established, so the parent can access to iframe’s stuff thanks to window.frames[‘name_of_iframe’] and the child can access to the parent’s stuff thanks to window.parent or window.top.

(2). External connection: Between different domains

Embedding the CNN page like I’ve done at the beginning of this post is the main purpose of external iframes: show a domain’s page content on another domain page. Also Facebook, Twitter and Youtube relies on this feature for the out-page logins (that is when other page allows you to login through ‘Facebook login’) or for embed videos.

As explained, anytime that you add an external iframe at your page, would be wise to take the adequate precautions and give to it just the necessary sandbox’s privileges discussed earlier. With all of that being said, let’s embed an external iframe from my tester domain http://analyticstestlab.com/post-message.html:

Got it! Scroll down!

Here the things were a bit tough before HTML5 came up and brought the postMessage() window’s method, which allows the communication between two windows of different domains. The process is really simple and there is no need to disgusting between parent and child or iframe window, here there is just the sender window (the window that sends the message) and the receiver window (the window that receives it). The first thing that needs to be done is the message, take a look at the below code:

On the first line of the code, essentially what I’m doing is assigning to the iframeTest variable the window’s reference of the iframe (like I’ve done previously), in other words, the iframeTest variable is now the iframe itself. Regarding the second line, take it as when someone writes and sends a letter on the real live, where:

  • iframeTest : Is the mail box.
  • postMessage: Is the letter envelope.
  • document.location.URL: Is the message, which in this case is the sender’s window URL.
  • http://analyticstestlab.com/post-message.html : Is the receiver address.

Easy to get it right? Okay, now that the sender has sent the letter and dropped it at the mail box, the postman is going to pick it up and deliver to the receiver. Next part of the history happens at the receiver’s home:

The first block is adding an event listener to the window object. Coming back to the letter example:

  • window: Now that we’re on the receiver home, the window is the receiver.
  • addEventlistener or attachEvent: Is the doorbell. Like when you listen your doorbell ring you know that something happens, the window knows that something happens when addEventlistener/attachEvent ‘listen’ an event.
  • message: Is the postman telling you that he has a letter. With the same way different people (a friend, your mum, your boss) can press the doorbell, a window can contain several events (click, mousover, mousemove…) . ‘message’ means that the window will be informed when some other windows send to him a message.
  • receiveMessage: Is the receiver’s floor and door number, in other words, where the postman has to deliver the message.
  • false: It’s an advanced feature, let’s postpone the explanation for another post.

You may be wondering why in the first block I repeat the code twice, once for addEventlistener and other for attachEvent. That’s because all Internet Explorer versions earlier than IE9 don’t recognize addEventlistener, so in case this is unknown, attachEvent is used, which basically does the same job. Good so far, now the postman is moving forward to the receiver’s door (receiveMessage), in javaScript slang, to the function that handle the event. Once there:

  • event: Is the letter itself. The fact that the letter is enclosed into receiveMessage() represents the action when the postman delivers the letter to de receiver.
  • origin: Origin is the sender address, so the condition into the if sentence represents the act when the receiver checks the sender’s address to know if he knows him or maybe is some propaganda or error. If the address’ sender is unknown, he asks for take the letter back to the sender, as the receiver was not expecting this letter, otherwise if the address’ sender is known, the receiver accepts the letter.
  • event.source: Is the receiver itself. Finally the receiver sends an SMS to the sender thank him for the letter through another postMessage().

Uou, nice history right? Now let’s cross the fingers and see if it works. The second snippet seen it is already placed at the iframe, so the receiver (the iframe) is ready to receives a message from the sender (this page/window). Okay, everything seems to be ready, let’s send the message! Please, press de below button!

Send it!

Have you noticed? The iframe gets the page’s URL and the page, gets the iframe URL; that means we’ve established the connection between the page and the iframe. Is important that you realize about the advantages of the external iframes, but at the same time be aware of the possible associated damages. I just want you to know that if somebody places a javaScript (which as seen it can generate a transparent iframe) in your page and you don’t take the proper precautions seen at the first section, he can covertly send data from your page to their page without your approval.

The iframe's marketing purposes

If in something we are good the digital marketing folks is to take advantage of the stuff to develop websites and turn them to reach our goals (that’s why I love my job). The iframe along with the cookies is one of the first tools that the digital industry took to deploy the advertising into internet. Let’s see some examples:

(1). Banners: The advertising display industry

If you scroll up and navigate through the CNN iframe embedded at the beginning of this post, you will realize that the page contains some spaces dedicated for advertisement purposes: Banners. If we take a quick look through the console by inspecting the generated HTML (Ctrl+Shift+c on Window devices or Cmd+Shift+c on Mac devices, and click over the image) on some banner in the page:

banner-iframe

It’s clear that the banner fits into an iframe. But something is strange, look at the ‘src’ parameter, is not pointing to any page, instead of that we find some strange code:

What it’s doing is basically creating a new document inside the iframe and then start to push stuff (javaScripts for tracking purposes, the banner image, css to fix the look&feel…) into it, in fact if you check the real source code of the CNN page (Ctrl+u on Windows devices and Alt+Cmd+u on MAC devices) you will never find this iframe Why? Because it is generated through javascript, in this case, from a google script http://www.googletagservices.com/tag/js/gpt.js which creates that iframe and append it to a CNN page’s div (<div> means a kind of space on the page), which is reserved for that purpose, something like that:

However there is other kind of banners that certainly call an external page hosted on some server, those usually are animated banners. In fact all banners are served through platforms called AdServers, which are pieces of code placed on pages that allow to randomly serve banners. Check the below video:

I hope this section has helped you to be more mindful about how display advertising works. Your responsibility as a digital marketer is understand the technologies applied at your site and know exactly what are they doing and what data they take, since obviously through Google or whatever other AdServer you’re using, a bunch of cookies and javascript are placed at your site to recognize users.

How important the iframes are for digital advertising, right?

(2). Data transferring: Information between servers

You have already seen how between parents and iframes the data can be exchanged, in my example it’s with URLs, but as I’ve been repeating, them can exchange everything, and that includes all storage’s tools that the browsers dispose, as for example cookies or item storage.

I’ve already talked about how drop a third party cookie with a single image pixel, which it’s possible because the cookies travel from the page to the server and come back for each HTTP request, so server side languages can push ahead cookies in the response from a requested image, but this approach not applies to Item Storages, as them are only accessible and modifiable through javaScript. This approach neither work for cookies on Safari users, as by default this navigator prevents the third party cookies to be set them up.

I think there is no need to explain you how important is for the advertising side to set up cookies or Item Storage in a third party domains for re target purposes, but what about for analytics? Yes right, both Google Analytics and Adobe Analytics provides solutions to share the User Identifier’s cookie across domain, but what about extra cookies you could use for another purposes? Are them also keep their values and functionalities across domains? How keep their value updated with the latest changes? This kind of situations are more frequent than you might think since a lot of sites use functionalities stored into third party domains, think for example about car configurators, booking engines, forms, videos… 

Good news for you is that in my next post, I will go trough this subject and provide the Data Layer with methods to make Item Storage to work cross domain (even on Safari), thus taking advantage of their big storage capabilities across domains and subdomains.

Are you starting to realize the importance of the iframes?

(3). The asynchronous way: Keep the page safe

We already discuss about synchronous an asynchronous javaScript in order to set up the Data Layer into a site, also I’d recommend you a good read about the order in which javaScript is interpreted and executed by the browsers. If you already read that (I hope you did) you notice how important is to decide in which way fire javaScript snippets, as on it depends how the browser are gonna execute them, but… where were we? we were talking about iframes right? Yes! And it’s completely related, since another way to execute something asynchronous is by doing it inside an external iframe, as it follows their own execution process and that is what Dynamic Tag Manager from Adobe does.

Each time you fire a Non-Sequential HTML snippet on DTM, it creates an iframe that points to DTM’s host subdomain (assets.adobedtm.com):

DTM-iframe

That iframe pushes all javaScript into the iframe through document.write, fact that allows it to load asynchronously. One important thing to know for DTM users (and not well documented) is to avoid to place here pixels/javaScripts that grabs data from the window (URL, domain, DOM scrapping…) or playing with the storage tools (cookies, item storage…) inasmuch as the code is running literally into other domain (unless, as I already explained, you establish the connection between the page and the iframe).

Iframes are everywhere, isn’t it?

(4). Tracking: The old way

In my post Tracking pixels, tags, web beacons… Do you really think you control your own data? I already had briefed you how set up a tracking pixel and how it can drop a cookie in your browser. Iframe follows essentially the same concept, as it has also the ‘src’ parameter which points to somewhere asking for resources. Let’s take a look at one of the most uses tracking iframes, the Floodlight iframes for DBM/DCM:

The <noscript> part is a fallback method just in case the browser doesn’t allow javaScript (weird situation nowadays), and if this happens I’d say that you will not grab any penny of the users using non-javasScript-browsers. The <script> part it’s the one is gonna execute on the 99% of the cases. The unique difference between <noscript> is that it appends a random number to one of the src’s URL parameter in order to prevent to cache the image.

Besides the above, the interesting part is the iframe executed through document.write, which as you can see, the ‘src’ parameters contains a URL that points to doubleclick.net (Google) to track the conversions and, at the same time, drop some cookie on your browser attached to doubleclick.net domain:

cookie-floodlight

This could be done through an image as well, so it’s a kind of ‘old tracking way’ however is still used on a plenty of sites.

Wow… iframes are able to do everything!

Final thoughts

If you’ve come this far, definitely you are a hero! If you are a marketer, that post could help you to take some precautions at time to decide what tools need to be part of your tech stack, if you’re a digital marketing developer you already have taken an overview about the iframes’ role on digital.

If some of above information is confusing to you, don’t hesitate to leave a message down here, I’m always happy to help others to understand this strange and fast-changing world in which we are working at.

Your comment

Your email address will not be published. Required fields are marked *