Sandbox CSS attribute of iFrame in Intel XDK

The Sandbox attribute provides security to your application. Sandbox attribute is like police and it restricts the iFrame related detrimental activities. Sandbox without a value applies all restrictions. You can enable one or more values for Sandbox such as, allow-forms, allow-popups, allow-same-origin, allow scripts etc.

With Sandbox attribute present:

Iframe content is assumed to be from a unique origin
You cannot submit a form
You cannot run  script
API's are disabled
Cannot have links targeting other browser context
No plugins allowed (object, applet etc)
Will block automatically triggered media features like playing a video or audio.

iFrame can take many attributes including Sandbox.

iframe {
 border: 8px solid red;
 padding: .5rem;
 margin: 1rem;
 box-shadow: 20px 20px 10px #888888;
 width: 300;
 height: 100;

Intel XDK has a < ifr/> widget described in my earlier posts.

Here I describe how it works in Intel XDK.

1. IntelXDK does not correctly point to the correct src attribute as displayed in your design.

The iFrame element in the design has its source called SandboxTest1.html. The html page has a script that is run when the Test Script is clicked. The No pop-ups is used for testing some scripts on the page.

However, the following code which should bring up the correct source brings up a different URL.

alert(document.getElementById("ifr").src); The id of the iFrame being "ifr"

There is a srcdoc attribute which brings up an empty response.

The above alert brings up the following response:


2. The following HTML code for the <iframe/> does allow the script to run. The Test Script button  can run the code

3. Now I change the HTML fragment to include Sandbox as shown.

This works like it is intended. The script cannot run.

4. The various restrictions on the <iframe/> appears to be only four of the CSS3 attributes as shown here:

Post a Comment

Popular posts from this blog

Develop a Side Menu App using Intel XDK - Part 1

UWP: XAML's ListView Control and its SelectionChanged event - Part 1

Setting up Kid's Corner on Windows 10 Phone