| | <html> |
---|
| | <head> |
---|
| | <title>WSSSnoop</title> |
---|
| | <style type="text/css"> |
---|
| | body{ |
---|
| | background-color: #333; |
---|
| | color:#bbb; |
---|
| | margin:0; |
---|
| | |
---|
| | } |
---|
| | .topBar { |
---|
| | background-color: #444; |
---|
| | position:fixed; |
---|
| | top:0; |
---|
| | width:100%; |
---|
| | z-index:100; |
---|
| | padding: 10px; |
---|
| | } |
---|
| | .topTitle{ |
---|
| | position:absolute; |
---|
| | top:10px; |
---|
| | left:10px; |
---|
| | color:#7fffd4; |
---|
| | } |
---|
| | .topcorner{ |
---|
| | position:absolute; |
---|
| | top:10px; |
---|
| | right:30px; |
---|
| | } |
---|
| | #cswsh-output{ |
---|
| | margin-top: 50px !important; |
---|
| | font-family: 'Source Code Pro', |
---|
| | sans-serif;font-size: 0.7em; |
---|
| | padding-bottom: 65px; |
---|
| | padding-left: 10px; |
---|
| | } |
---|
| | .sendBar { |
---|
| | background-color: #333; |
---|
| | position:fixed; |
---|
| | bottom:30px; |
---|
| | width:100%; |
---|
| | z-index:100; |
---|
| | padding: 0px; |
---|
| | height: 30px; |
---|
| | font-family: 'Source Code Pro', sans-serif; |
---|
| | } |
---|
| | .sendBar #label { |
---|
| | margin-right: 20px; |
---|
| | width: 110px; |
---|
| | } |
---|
| | /*.sendBar #wssCommand { |
---|
| | width: 100%; |
---|
| | }*/ |
---|
| | .sendBar #wssSendText { |
---|
| | display: flex; |
---|
| | width:100%; |
---|
| | flex-grow: 1; |
---|
| | margin-left: 20px; |
---|
| | margin-top: -20px; |
---|
| | background-color: #333; |
---|
| | color:#DDD; |
---|
| | font-family: 'Source Code Pro', sans-serif; |
---|
| | border:none; |
---|
| | text-decoration: none; |
---|
| | } |
---|
| | *:focus { |
---|
| | outline: none; |
---|
| | } |
---|
| | .bottomBar { |
---|
| | background-color: #444; |
---|
| | position:fixed; |
---|
| | bottom:0; |
---|
| | width:100%; |
---|
| | z-index:100; |
---|
| | padding: 10px; |
---|
| | height: 20px; |
---|
| | } |
---|
| | .bottomClear{ |
---|
| | position:absolute; |
---|
| | bottom:10px; |
---|
| | right:30px; |
---|
| | } |
---|
| | a:link,a:visited { |
---|
| | color: #00ccff; |
---|
| | text-decoration: none; |
---|
| | } |
---|
| | /* mouse over link */ |
---|
| | a:hover, a:active { |
---|
| | color: #99ebff; |
---|
| | text-decoration: none; |
---|
| | } |
---|
| | </style> |
---|
| | <link href='http://fonts.googleapis.com/css?family=Source+Code+Pro' rel='stylesheet' type='text/css'> |
---|
| | </head> |
---|
| | <body> |
---|
| | <div class="topBar"> |
---|
| | <div class="topTitle"> |
---|
| | WSSSnoop |
---|
| | </div> |
---|
| | <center> |
---|
| | <input type="text" name="cswshURL" id="cswshURL" value="" placeholder="wss://snoop.me"> |
---|
| | <input type="button" id="startSnoop" value="start snooping" onclick="startSnooping()"/> |
---|
| | <input type="button" id="stopSnoop" value="stop snooping" style="display:none" onclick="stopSnooping()"/> |
---|
| | <br /> |
---|
| | <div class="topcorner"> |
---|
| | Status: <div id="status" style="display:inline-block; color:red"/>Offline</div> |
---|
| | </div> |
---|
| | </center> |
---|
| | </div> |
---|
| | |
---|
| | <div id="cswsh-output" ></div> |
---|
| | |
---|
| | <div class="sendBar" style="display:none"> |
---|
| | <form name="wssCommand" id="wssCommand" action="" onsubmit="return false"> |
---|
| | <label id="label">$></label> |
---|
| | <input type="text" name="wssSendText" id="wssSendText" value="" placeholder=""> |
---|
| | <!--<input type="submit" id="wssSendbutton" value="" />--> |
---|
| | </form> |
---|
| | </div> |
---|
| | |
---|
| | <div class="bottomBar"> |
---|
| | By <a href="https://rossmarks.uk" target="_new">Ross Marks</a> |
---|
| | <div class="bottomClear"> |
---|
| | <input type="button" id="clearPage" value="clear page" onclick="clearPage();"/> |
---|
| | </div> |
---|
| | </div> |
---|
| | |
---|
| | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> |
---|
| | <script> |
---|
| | |
---|
| | function clearPage(){ |
---|
| | $('#cswsh-output').empty(); |
---|
| | $('html, body').scrollTop($(document).height()); |
---|
| | } |
---|
| | |
---|
| | function startSnooping(){ |
---|
| | $('#startSnoop').hide(); |
---|
| | $('#stopSnoop').show(); |
---|
| | $('.sendBar').show(); |
---|
| | $('#wssSendText').focus(); |
---|
| | writeToScreen("Start snooping: " + $("#cswshURL").val()); |
---|
| | checkCSWSH(); |
---|
| | } |
---|
| | |
---|
| | function stopSnooping(){ |
---|
| | $('#startSnoop').show(); |
---|
| | $('#stopSnoop').hide(); |
---|
| | $('.sendBar').hide(); |
---|
| | websocket.close(); |
---|
| | writeToScreen("Stop snooping"); |
---|
| | } |
---|
| | |
---|
| | function checkCSWSH(){ |
---|
| | var wsUri = $("#cswshURL").val(); |
---|
| | |
---|
| | statusWaiting(); |
---|
| | websocket = new WebSocket(wsUri); |
---|
| | websocket.onopen = function(evt) { onOpen(evt) }; |
---|
| | websocket.onclose = function(evt) { onClose(evt) }; |
---|
| | websocket.onmessage = function(evt) { onMessage(evt) }; |
---|
| | websocket.onerror = function(evt) { onError(evt) }; |
---|
| | } |
---|
| | |
---|
| | function onOpen(evt){ |
---|
| | writeToScreen("CONNECTED"); |
---|
| | statusConnected() |
---|
| | doSend("origin policy unchecked!"); |
---|
| | } |
---|
| | |
---|
| | function onClose(evt){ |
---|
| | writeToScreen("DISCONNECTED"); |
---|
| | statusOffline() |
---|
| | if( $('#stopSnoop').css('display') != 'none' ){ |
---|
| | checkCSWSH() |
---|
| | } |
---|
| | } |
---|
| | |
---|
| | function onMessage(evt){ |
---|
| | writeToScreen('<span style="color: #A7E734;">RESPONSE: ' + evt.data+'</span>'); |
---|
| | //websocket.close(); |
---|
| | } |
---|
| | |
---|
| | function onError(evt){ |
---|
| | writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data); |
---|
| | } |
---|
| | |
---|
| | function doSend(message){ |
---|
| | writeToScreen("SENT: " + message); |
---|
| | websocket.send(message); |
---|
| | } |
---|
| | |
---|
| | function writeToScreen(message){ |
---|
| | output = document.getElementById("cswsh-output"); |
---|
| | var pre = document.createElement("div"); |
---|
| | pre.style.wordWrap = "break-word"; |
---|
| | pre.innerHTML = message; |
---|
| | output.appendChild(pre); |
---|
| | $('html, body').scrollTop($(document).height()); |
---|
| | } |
---|
| | |
---|
| | $("#wssCommand").submit(function(e) { |
---|
| | doSend( $('#wssSendText').val() ); |
---|
| | $('#wssSendText').val(""); |
---|
| | $('#wssSendText').focus(); |
---|
| | e.preventDefault(); |
---|
| | }); |
---|
| | |
---|
| | function statusConnected(){ |
---|
| | $('#status').html("Connected"); |
---|
| | $('#status').css("color","lightgreen"); |
---|
| | } |
---|
| | function statusOffline(){ |
---|
| | $('#status').html("Offline"); |
---|
| | $('#status').css("color","red"); |
---|
| | } |
---|
| | function statusWaiting(){ |
---|
| | $('#status').html("Waiting..."); |
---|
| | $('#status').css("color","yellow"); |
---|
| | } |
---|
| | </script> |
---|
| | </body> |
---|
| | </html> |
---|
| | |