iFrames have long been part of the HTML standard. In HTML 4.0, however, they were packed into the frameset HTML variant together with the now frowned upon frames. Frames are no longer included in HTML5, but embedded frames (iFrames) are.
Other websites can be integrated via iFrames. The browser therefore renders another HTML file within the current website. The content of the iFrame window can be formatted individually.
When it comes to iFrames, the security of this HTML technology must of course be considered separately. One problem here is malicious code that can be infiltrated unnoticed into websites via iFrames. This is of course a huge nuisance.
In HTML5, however, there are now appropriate security mechanisms that can be used to circumvent these problems. More on this later in this tutorial. Before using iFrames, however, it should be borne in mind that they are potentially dangerous, especially because the new security attributes are not yet supported by all browsers.
In HTML5, iFrames are therefore a fixed standard and bring some additional attributes with them. The following example shows how iFrames can be defined.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
The result looks like this in the browser:
The src attribute is assigned to the iframe element. This src contains the page to be displayed as the value. This can be a local file. However, it is also possible - as in the example shown - to call up an external resource.
The two attributes width and height are used to determine the width and height of the iFrame. If the integrated content is larger than the specified size of the iFrame, scrollbars are displayed.
Any content can be defined between the opening and closing <iframe> tag. However, these can only be seen in browsers that do not recognize the iframe element.
In HTM5, some new attributes are introduced with regard to iFrames, which mainly have something to do with the so-called sandbox behavior.
In browsers, the Same Origin Policy ensures that an embedded website cannot be manipulated while it is being displayed. This security function makes perfect sense. However, it is not always ideal. This is why the sandbox attribute was introduced in HTML5, which can be used to explicitly tell browsers which authorizations should be assigned to the content embedded from an external page in an iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
iFrames with the sandbox attribute are not granted access to the DOM of the embedded website. They are also not allowed to execute scripts or save cookies. These restrictions can be lifted using various sandbox values.
Different values can be assigned to the sandbox attribute. Allow-forms allows the embedded website to obtain information from the user via forms. Users do not know that the form does not originate from the current page.
If, on the other hand, allow-some-origin is specified, the embedded website is treated as if it originates from the same host. This value overrides the same-origin policy.
The value allow-top-navigation allows the embedded content to change the content of the top browsing context.
And then there is allow-script. This allows the embedded website to contain JavaScript that can manipulate the embedding page.
Here is an example of what a corresponding sandbox instruction could look like:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
You can also assign multiple values. These must then be separated by spaces. Here is another example:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
iFrames are normally designed to embed external content. Alternatively, these can also be included.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
This attribute has a lot to offer. Link targets in the included document - unless otherwise defined - are displayed in the browser window in which the iframe element was defined. (With normal embedding, link targets are displayed in the iFrame window if nothing else has been defined).seamless is currently only supported by Google Canary, i.e. the developer version of this browser.
The other effect concerns the stylesheets. This is because the stylesheets of the included file also apply to the included document. (However, the stylesheet specifications do not apply to normal inclusion).
Another new attribute has been added. With srcdoc you can directly define the content to be included. Take a look at the following example:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <script> top.location.href=" http://www.psd-tutorials.de/" </script>"> </iframe>
In this case, the src attribute, which is otherwise used to specify the file to be included, is missing.
The content specified via srcdoc is treated as if it originates from a third-party server. It is therefore fully subject to the Same Origin Policy. This behavior is interesting, for example, in connection with script definitions. Any HTML and JavaScript code is permitted. However, quotation marks and the ampersand symbol must be described by the named characters " and & respectively.
You can also define a page directly here and thus output the desired content.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.en</title> </head> <body> <p>...</p> </body> </html>"> </iframe>.
Incidentally, this does not have to be a complete HTML file. Something like this is of course also possible:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
In the browser it looks like this:
So this is just normal HTML syntax, without scripts etc.
A few more notes on the attributes that were previously used for the visual design: Things like scrolling, marginwidth and marginheight are no longer permitted in HTLM5. These attributes are replaced by CSS.
