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