2015-06-16 22:30:02 +02:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<!--
|
|
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
##
|
|
|
|
|
# Example page with embedded Shell In A Box.
|
|
|
|
|
#
|
2015-06-16 22:30:02 +02:00
|
|
|
|
|
|
|
|
On this page we can see how Shell In A Box can be embedded in another page and
|
2015-06-17 18:11:59 +02:00
|
|
|
how can we comunicate with it.
|
2015-06-16 22:30:02 +02:00
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
##
|
|
|
|
|
# Server Side
|
|
|
|
|
#
|
2015-06-16 22:30:02 +02:00
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
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
|
|
|
|
|
#
|
2015-06-16 22:30:02 +02:00
|
|
|
|
|
|
|
|
Shell In A Box accepts messages formated as JSON strings with 'type' and 'data'
|
2015-06-17 18:11:59 +02:00
|
|
|
fields. Messages with same format can be passed back to parent (this) window.
|
2015-06-16 22:30:02 +02:00
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
Message example:
|
2015-06-16 22:30:02 +02:00
|
|
|
|
|
|
|
|
var message = JSON.stringify({
|
2015-06-17 18:11:59 +02:00
|
|
|
type : "message type",
|
|
|
|
|
data : "additional data"
|
2015-06-16 22:30:02 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
Messages are passed with function postMessage() and are received in "message"
|
|
|
|
|
events.
|
|
|
|
|
|
|
|
|
|
Following types of message can be sent to shellinabox:
|
|
|
|
|
|
2015-07-09 21:49:04 +02:00
|
|
|
* input
|
|
|
|
|
writes content of data field to terminal
|
|
|
|
|
|
|
|
|
|
* output
|
|
|
|
|
enables passing of output to parent window (data field must be set
|
|
|
|
|
to enable, disable or toggle)
|
|
|
|
|
|
|
|
|
|
* session
|
|
|
|
|
request sessions status
|
|
|
|
|
|
|
|
|
|
* onsessionchange
|
|
|
|
|
enables passing session status to parent window (data field must be
|
|
|
|
|
set to enable, disable or toggle)
|
|
|
|
|
|
|
|
|
|
* reconnect
|
|
|
|
|
reconnects the terminal
|
2015-06-16 22:30:02 +02:00
|
|
|
|
|
|
|
|
Following types of messages can be received from shellinabox:
|
|
|
|
|
|
2015-07-09 21:49:04 +02:00
|
|
|
* output
|
|
|
|
|
data field contains terminal output
|
|
|
|
|
|
|
|
|
|
* session
|
|
|
|
|
data field contains session status (alive or closed)
|
2015-06-16 22:30:02 +02:00
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
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");
|
|
|
|
|
|
2015-06-16 22:30:02 +02:00
|
|
|
Please note that message passing and JSON operations are only supported on moderen
|
|
|
|
|
browsers.
|
|
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
##
|
|
|
|
|
# Info
|
|
|
|
|
#
|
|
|
|
|
|
2015-06-16 22:30:02 +02:00
|
|
|
For working examples please see HTML and JS code bellow...
|
|
|
|
|
|
|
|
|
|
For more info and browser limitations on iframe message passing please check:
|
|
|
|
|
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
|
|
|
|
|
|
|
|
|
|
-->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
p {
|
|
|
|
|
font-size: 1.1em;
|
|
|
|
|
}
|
|
|
|
|
#shell, #output {
|
|
|
|
|
width: 640px;
|
|
|
|
|
height: 300px;
|
|
|
|
|
margin: 20px 10px;
|
|
|
|
|
}
|
|
|
|
|
#output {
|
|
|
|
|
overflow: scroll;
|
|
|
|
|
border: 2px solid #999;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
<h3>
|
|
|
|
|
Embedded Shell In A Box example page.
|
|
|
|
|
</h3>
|
|
|
|
|
|
|
|
|
|
<p>Controls:</p>
|
|
|
|
|
<div>
|
|
|
|
|
<input type="text" id="input"></input>
|
|
|
|
|
<input type="button" id="execute" value="Execute"></input>
|
|
|
|
|
<input type="button" id="output-enable" value="Output Enable"></input>
|
|
|
|
|
<input type="button" id="output-disable" value="Output Disable"></input>
|
2015-07-09 21:49:04 +02:00
|
|
|
<input type="button" id="reconnect" value="Reconnect"></input>
|
2015-06-16 22:30:02 +02:00
|
|
|
<input type="button" id="session-reload" value="Session Status"></input>
|
2015-07-09 21:49:04 +02:00
|
|
|
<input type="button" id="session-toggle" value="Session Status Toggle"></input>
|
2015-06-16 22:30:02 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<p id="session">Session status: ???</p>
|
|
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
<!--
|
|
|
|
|
Embedded shellinabox. In our case src attribute will be added with help
|
|
|
|
|
of JS. -->
|
2015-06-16 22:30:02 +02:00
|
|
|
<iframe id="shell" src=""></iframe>
|
|
|
|
|
|
|
|
|
|
<!-- Ouput -->
|
|
|
|
|
<p>Terminal output:</p>
|
|
|
|
|
<pre id="output"></pre>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
// Shellinabox url
|
|
|
|
|
var url = "https://192.168.1.150:4200";
|
|
|
|
|
|
|
|
|
|
var input = document.getElementById("input");
|
|
|
|
|
var iframe = document.getElementById("shell");
|
|
|
|
|
var output = document.getElementById("output");
|
|
|
|
|
var session = document.getElementById("session");
|
|
|
|
|
|
2015-06-17 18:11:59 +02:00
|
|
|
// Add url to our iframe. We do this, only that variable 'url' can be used
|
|
|
|
|
// throughout the whole code where needed.
|
2015-06-16 22:30:02 +02:00
|
|
|
iframe.src = url;
|
|
|
|
|
|
|
|
|
|
document.getElementById("execute").addEventListener("click", function() {
|
|
|
|
|
// Send input to shellinabox
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'input',
|
|
|
|
|
data : input.value + '\n'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("output-enable").addEventListener("click", function() {
|
|
|
|
|
// Enable output replay from shellinabox iframe
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'output',
|
|
|
|
|
data : 'enable'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("output-disable").addEventListener("click", function() {
|
|
|
|
|
// Disable output replay from shellinabox iframe
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'output',
|
|
|
|
|
data : 'disable'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
2015-06-17 18:11:59 +02:00
|
|
|
// Clear output window
|
|
|
|
|
output.innerHTML = '';
|
2015-06-16 22:30:02 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("session-reload").addEventListener("click", function() {
|
|
|
|
|
// Request shellianbox session status
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'session'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
|
|
|
|
});
|
|
|
|
|
|
2015-07-09 21:49:04 +02:00
|
|
|
document.getElementById("session-toggle").addEventListener("click", function() {
|
|
|
|
|
// Toggles shellinabox session status reporting
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'onsessionchange',
|
|
|
|
|
data : 'toggle'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.getElementById("reconnect").addEventListener("click", function() {
|
|
|
|
|
// Request shellianbox session status
|
|
|
|
|
var message = JSON.stringify({
|
|
|
|
|
type : 'reconnect'
|
|
|
|
|
});
|
|
|
|
|
iframe.contentWindow.postMessage(message, url);
|
|
|
|
|
});
|
|
|
|
|
|
2015-06-16 22:30:02 +02:00
|
|
|
// Receive response from shellinabox
|
|
|
|
|
window.addEventListener("message", function(message) {
|
|
|
|
|
|
|
|
|
|
// Allow messages only from shellinabox
|
|
|
|
|
if (message.origin !== url) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Handle response according to response type
|
|
|
|
|
var decoded = JSON.parse(message.data);
|
|
|
|
|
switch (decoded.type) {
|
|
|
|
|
case "output" :
|
|
|
|
|
// Append new output
|
|
|
|
|
output.innerHTML = output.innerHTML + decoded.data;
|
|
|
|
|
break;
|
|
|
|
|
case "session" :
|
|
|
|
|
// Reload session status
|
|
|
|
|
session.innerHTML = 'Session status: ' + decoded.data;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}, false);
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
