Saturday, May 28, 2011

HTML in AIR: Part 17

Today we will learn about bridging sandboxes in AIR.

In the last tutorial, we've learned about sandboxes and limitations that files have in application and non application domains. Today we'll learn how to bypass these limitations using the briging method.

To bridge application and non application sandboxes, we need to have a HTML page that is loaded into an iframe object of another HTML page. This way, the two pages can exchange data, even though they might be located in different places - one on the local computer, and the other on a web server.

So, to create a bridge between a HTML page in application domain and a HTML page in non application domain, we need to create an iframe in the local HTML file, that we will use to load the external HTML page to.

The interfaces that each of the pages can use can be defined with the parentSandboxBridge and childSandboxBridge variables. We create an object with properties that has values or references to functions, and set it as a variable with the name parentSandboxBridge or childSandboxBridge inside the HTML content that is loaded into iframe.

Let's use this method to create a simple application where the user can write a message in the iframe part of the page (the one that is stored on a web server) and then press a button in the same iframe to save a text file with this text message on the user's computer. Normally, we wouldn't be able to do that, but thanks to the bridge we create - it is now possible.

Here is the local file:

<html>
<script>
var mybridge = new Object();
mybridge.writeMessage = writeMessage;

function onLoad(){
window.document.getElementByID("myframe").contentWindow.parentSandboxBridge = mybridge;
}

function writeMessage(message){
var file = window.runtime.flash.filesystem.File.documentsDirectory.resolvePath("message.txt");
var stream = new window.runtime.flash.filesystem.FileStream;
stream.open(file, "write");
stream.writeUTFBytes(message);
stream.close();
}
</script>
<body onload="onLoad()">
<iframe id="myframe" src="http://www.mysite.com/myeditor.html" width="100%" height="100%"></iframe>
</body>
</html>

And here is what is supposed to be the code for the myeditor.html, which should be loaded into the iframe.

<html>
<body>
<textarea id="myarea"></textarea>
<br>
<input type="button" onclick="parentSandboxBridge.writeMessage(myarea.value)" value="Save file">
</body>
</html>

This way you can bypass the sandbox limitations. Keep in mind though, that they were put there for a reason, and you should only use this method when it is absolutely necessary to do so.

Thanks for reading!

Related:

HTML in AIR: Part 1
HTML in AIR: Part 2
HTML in AIR: Part 3
HTML in AIR: Part 4
HTML in AIR: Part 5
HTML in AIR: Part 6
HTML in AIR: Part 7
HTML in AIR: Part 8
HTML in AIR: Part 9
HTML in AIR: Part 10
HTML in AIR: Part 11
HTML in AIR: Part 12
HTML in AIR: Part 13
HTML in AIR: Part 14
HTML in AIR: Part 15
HTML in AIR: Part 16

1 comment:

Jens Eckervogt said...

Nice tutorial but where is Externalinterface with Javascript to call and callback? :)

I know htmlloader needs same externalinterface too like loaded html file need to access to as3 example custom default utility alert like Prompt with text or error message and other way. If you create own air custom browser than scammers can't get chance. ? XD thanks

Post a Comment