<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>
root