| | <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: 50px; |
---|
| | padding-left: 10px; |
---|
| | } |
---|
| | .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="checkCSWSH()"/> |
---|
| | <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="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 stopSnooping(){ |
---|
| | $('#startSnoop').show(); |
---|
| | $('#stopSnoop').hide(); |
---|
| | websocket.close(); |
---|
| | } |
---|
| | |
---|
| | function checkCSWSH(){ |
---|
| | var wsUri = $("#cswshURL").val(); |
---|
| | $('#startSnoop').hide(); |
---|
| | $('#stopSnoop').show(); |
---|
| | 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()); |
---|
| | } |
---|
| | |
---|
| | 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> |
---|
| | |