"Fossies" - the Fresh Open Source Software Archive

Member "shellinabox-2.20/misc/embedded.html" (9 Nov 2016, 6037 Bytes) of package /linux/privat/shellinabox-2.20.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) HTML source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file.

    1 <!DOCTYPE HTML>
    2 <!--
    3 
    4     ##
    5     # Example page with embedded Shell In A Box.
    6     #
    7 
    8     On this page we can see how Shell In A Box can be embedded in another page and
    9     how can we comunicate with it.
   10 
   11     ##
   12     # Server Side
   13     #
   14 
   15     For communication with Shell In A Box we need to set '-m' (messages-origin)
   16     command line option with appropriate messages origin. Origin should be set to
   17     URL of parent (this) window. If origin is set to '*' Shell In A Box won't check
   18     origin on received messages. This is usually unsafe option.
   19 
   20     Command line example:
   21 
   22         shellinaboxd -p 4200 -m 'https://192.168.1.150'
   23 
   24     ##
   25     # Client Side
   26     #
   27 
   28     Shell In A Box accepts messages formatted as JSON strings with 'type' and 'data'
   29     fields. Messages with same format can be passed back to parent (this) window.
   30 
   31     Message example:
   32 
   33         var message = JSON.stringify({
   34             type : "message type",
   35             data : "additional data"
   36         });
   37 
   38     Messages are passed with function postMessage() and are received in "message"
   39     events.
   40 
   41     Following types of message can be sent to shellinabox:
   42 
   43     * input
   44         writes content of data field to terminal
   45 
   46     * output
   47         enables passing of output to parent window (data field must be set
   48         to enable, disable or toggle)
   49 
   50     * session
   51         request sessions status
   52 
   53     * onsessionchange
   54         enables passing session status to parent window (data field must be
   55         set to enable, disable or toggle)
   56 
   57     * reconnect
   58         reconnects the terminal
   59 
   60     Following types of messages can be received from shellinabox:
   61 
   62     * ready
   63         signals that shellinabox is ready to send and receive messages
   64 
   65     * output
   66         data field contains terminal output
   67 
   68     * session
   69         data field contains session status (alive or closed)
   70 
   71     Example for passing command to Shell In A Box frame:
   72 
   73         iframe.contentWindow.postMessage(JSON.stringify({
   74             type : "input",
   75             data : "ls -l\n"
   76         }), "https://192.168.1.150:4200");
   77 
   78     Please note that message passing and JSON operations are only supported on moderen
   79     browsers.
   80 
   81     ##
   82     # Info
   83     #
   84 
   85     For working examples please see HTML and JS code bellow...
   86 
   87     For more info and browser limitations on iframe message passing please check:
   88     https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
   89 
   90 -->
   91 <html>
   92 <head>
   93     <style>
   94         p {
   95             font-size:  1.1em;
   96         }
   97         #shell, #output {
   98             width:      640px;
   99             height:     300px;
  100             margin:     20px 10px;
  101         }
  102         #output {
  103             overflow:   scroll;
  104             border:     2px solid #999;
  105         }
  106     </style>
  107 </head>
  108 <body>
  109 
  110     <h3>
  111         Embedded Shell In A Box example page.
  112     </h3>
  113 
  114     <p>Controls:</p>
  115     <div>
  116         <input type="text"   id="input"></input>
  117         <input type="button" id="execute" value="Execute"></input>
  118         <input type="button" id="output-enable"  value="Output Enable"></input>
  119         <input type="button" id="output-disable" value="Output Disable"></input>
  120         <input type="button" id="reconnect" value="Reconnect"></input>
  121         <input type="button" id="session-reload" value="Session Status"></input>
  122         <input type="button" id="session-toggle" value="Session Status Toggle"></input>
  123     </div>
  124 
  125     <p id="session">Session status: ???</p>
  126 
  127     <!--
  128         Embedded shellinabox. In our case src attribute will be added with help
  129         of JS. -->
  130     <iframe id="shell" src=""></iframe>
  131 
  132     <!-- Ouput -->
  133     <p>Terminal output:</p>
  134     <pre id="output"></pre>
  135 
  136     <script>
  137 
  138         // Shellinabox url
  139         var url = "https://192.168.1.150:4200";
  140 
  141         var input   = document.getElementById("input");
  142         var iframe  = document.getElementById("shell");
  143         var output  = document.getElementById("output");
  144         var session = document.getElementById("session");
  145 
  146         document.getElementById("execute").addEventListener("click", function() {
  147             // Send input to shellinabox
  148             var message = JSON.stringify({
  149                 type : 'input',
  150                 data : input.value + '\n'
  151             });
  152             iframe.contentWindow.postMessage(message, url);
  153         });
  154 
  155         document.getElementById("output-enable").addEventListener("click", function() {
  156             // Enable output replay from shellinabox iframe
  157             var message = JSON.stringify({
  158                 type : 'output',
  159                 data : 'enable'
  160             });
  161             iframe.contentWindow.postMessage(message, url);
  162         });
  163 
  164         document.getElementById("output-disable").addEventListener("click", function() {
  165             // Disable output replay from shellinabox iframe
  166             var message = JSON.stringify({
  167                 type : 'output',
  168                 data : 'disable'
  169             });
  170             iframe.contentWindow.postMessage(message, url);
  171             // Clear output window
  172             output.innerHTML = '';
  173         });
  174 
  175         document.getElementById("session-reload").addEventListener("click", function() {
  176             // Request shellianbox session status
  177             var message = JSON.stringify({
  178                 type : 'session'
  179             });
  180             iframe.contentWindow.postMessage(message, url);
  181         });
  182 
  183         document.getElementById("session-toggle").addEventListener("click", function() {
  184             // Toggles shellinabox session status reporting
  185             var message = JSON.stringify({
  186                 type : 'onsessionchange',
  187                 data : 'toggle'
  188             });
  189             iframe.contentWindow.postMessage(message, url);
  190         });
  191 
  192         document.getElementById("reconnect").addEventListener("click", function() {
  193             // Request shellianbox session status
  194             var message = JSON.stringify({
  195                 type : 'reconnect'
  196             });
  197             iframe.contentWindow.postMessage(message, url);
  198         });
  199 
  200         // Receive response from shellinabox
  201         window.addEventListener("message", function(message) {
  202 
  203             // Allow messages only from shellinabox
  204             if (message.origin !== url) {
  205                 return;
  206             }
  207 
  208             // Handle response according to response type
  209             var decoded = JSON.parse(message.data);
  210             switch (decoded.type) {
  211             case "ready":
  212                 // Shellinabox is ready to communicate and we will enable console output
  213                 // by default.
  214                 var message = JSON.stringify({
  215                     type : 'output',
  216                     data : 'enable'
  217                 });
  218                 iframe.contentWindow.postMessage(message, url);
  219                 break;
  220             case "output" :
  221                 // Append new output
  222                 output.innerHTML = output.innerHTML + decoded.data;
  223                 break;
  224             case "session" :
  225                 // Reload session status
  226                 session.innerHTML = 'Session status: ' + decoded.data;
  227                 break;
  228             }
  229         }, false);
  230 
  231         // Add url to our iframe after the event listener is installed.
  232         iframe.src = url;
  233 
  234     </script>
  235 
  236 </body>
  237 </html>