Improved message passing info and examples

This commit is contained in:
KLuka 2015-06-17 18:11:59 +02:00
parent 4f32ae3f2f
commit fb4ebaf01f
2 changed files with 43 additions and 16 deletions

View file

@ -1,24 +1,38 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<!-- <!--
Example page with embedded Shell In A Box. ##
# Example page with embedded Shell In A Box.
#
On this page we can see how Shell In A Box can be embedded in another page and On this page we can see how Shell In A Box can be embedded in another page and
how can we comunicate with it. For communication with Shell In A Box we need to set how can we comunicate with it.
'-m' (messages-origin) command line option with appropriate message origin.
Example: ##
# Server Side
#
shellinaboxd -p 4200 -m 'https://192.168.1.150:4200' For communication with Shell In A Box we need to set '-m' (messages-origin)
command line option with appropriate messages origin. Origin should be set to
URL of parent (this) window. If origin is set to '*' Shell In A Box won't checki
origin on received messages. This is usually unsafe option.
Command line example:
shellinaboxd -p 4200 -m 'https://192.168.1.150'
##
# Client Side
#
Shell In A Box accepts messages formated as JSON strings with 'type' and 'data' Shell In A Box accepts messages formated as JSON strings with 'type' and 'data'
fields. Messages with same formate can be passed back to parent (this) window. fields. Messages with same format can be passed back to parent (this) window.
Example: Message example:
var message = JSON.stringify({ var message = JSON.stringify({
type = "type", type : "message type",
data = "data" data : "additional data"
}); });
Messages are passed with function postMessage() and are received in "message" Messages are passed with function postMessage() and are received in "message"
@ -33,12 +47,23 @@
Following types of messages can be received from shellinabox: Following types of messages can be received from shellinabox:
output - data field contains terminal output (of last request) output - data field contains terminal output
session - data field contains session status (active or closed) session - data field contains session status (active or closed)
Example for passing command to Shell In A Box frame:
iframe.contentWindow.postMessage(JSON.stringify({
type : "input",
data : "ls -l\n"
}), "https://192.168.1.150:4200");
Please note that message passing and JSON operations are only supported on moderen Please note that message passing and JSON operations are only supported on moderen
browsers. browsers.
##
# Info
#
For working examples please see HTML and JS code bellow... For working examples please see HTML and JS code bellow...
For more info and browser limitations on iframe message passing please check: For more info and browser limitations on iframe message passing please check:
@ -79,9 +104,9 @@
<p id="session">Session status: ???</p> <p id="session">Session status: ???</p>
<!-- Embedded shellinabox, in out case src attribute will be added with help <!--
of JS Embedded shellinabox. In our case src attribute will be added with help
--> of JS. -->
<iframe id="shell" src=""></iframe> <iframe id="shell" src=""></iframe>
<!-- Ouput --> <!-- Ouput -->
@ -98,8 +123,8 @@
var output = document.getElementById("output"); var output = document.getElementById("output");
var session = document.getElementById("session"); var session = document.getElementById("session");
// Add url to our iframe. We do this, only that variable 'url' is used // Add url to our iframe. We do this, only that variable 'url' can be used
// throughout the whole code. // throughout the whole code where needed.
iframe.src = url; iframe.src = url;
document.getElementById("execute").addEventListener("click", function() { document.getElementById("execute").addEventListener("click", function() {
@ -127,6 +152,8 @@
data : 'disable' data : 'disable'
}); });
iframe.contentWindow.postMessage(message, url); iframe.contentWindow.postMessage(message, url);
// Clear output window
output.innerHTML = '';
}); });
document.getElementById("session-reload").addEventListener("click", function() { document.getElementById("session-reload").addEventListener("click", function() {

View file

@ -389,7 +389,7 @@ ShellInABox.prototype.messageInit = function() {
} }
}(this), false); }(this), false);
} else { } else {
// For IE8 or lower // For IE8
if (window.attachEvent) { if (window.attachEvent) {
window.attachEvent('onmessage', function(shellInABox) { window.attachEvent('onmessage', function(shellInABox) {
return function(message) { return function(message) {