Question

我正在开发一个小项目，需要为我的团队成员提供一种替代方法，以便在非生产服务器上进行端口连接，并为SSH流量打开端口22（访问在10分钟后再次关闭）。由于某些敲门方法不适用于不同设备上的不同用户，我们需要创建一个“最后的敲门客户端”，可以作为独立的网页打开并启动敲门序列。当然，出于安全原因，这个文件绝不会放在Web服务器上。

我是jQuery，javascript和CSS的新手，但能够让它工作。但是，它并不适用于所有浏览器，有时我们必须重新启动，如果它不再在特定的机器上工作。

经过大量搜索，我真的不确定如何在保持单个html文件中包含的所有功能的同时改进我的代码。我真的很感激一些意见。

<!DOCTYPE HTML>
<html>
<head>
<title>Gain Access- Beta version 1.0</title>
<style>
* {
    font-family: Verdana, Arial, Sans-Serif;
}
#top{
    margin-left:80px;
}
#heading {
    margin-left: 0px;
    font-size:22px;
    font-weight:bold;
}
#subhead {
    margin-left: 10px;
    font-size:12px;
}
button {
    font-size:16px;
    margin-left:100px;
}
#button {
    font-size: 12px;
    font-family: Verdana, Arial, Sans-Serif;
    position: absolute;
    margin-left: 100px;
    margin-top: 50px;
}
#status {
    margin-left:90px;
    margin-top: 80px;
    position: absolute;
    font-size:16px;
    font-weight:bold;
}
#knocks {
    margin-left:110px;
    margin-top: 100px;
    position: absolute;
    font-size:14px;
    color:blue;

}
#portals {
    position: absolute;
    margin-left: 110px;
    margin-top: 155px;
    display:none;
}
.tinyimg {
    width: 1px;
    height: 1px;
}

</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">


$(document).ready(function(){
$('button').click(function(){
    $('#knocks').append('<p>Knocking...</p>');
    setTimeout(function(){
        $('#portals').append('<img class="tinyimg" src="https://some.url.com:1111/test/url.jpg/" />');
        $('#knocks').append("<p>Knock 1 of 5 complete...</p>");
        }, 500);    
    setTimeout(function(){
        $('#portals').append('<img class="tinyimg" src="https://some.url.com:2222/test/url.jpg/" />');
        $('#knocks').append("<p>Knock 2 of 5 complete...</p>");
        }, 3500);
    setTimeout(function(){
        $('#portals').append('<img class="tinyimg" src="https://some.url.com:3333/test/url.jpg" />');
        $('#knocks').append("<p>Knock 3 of 5 complete...</p>");
        }, 6500);
    setTimeout(function(){
        $('#portals').append('<img class="tinyimg" src="https://some.url.com:4444/test/url.jpg" />');
        $('#knocks').append("<p>Knock 4 of 5 complete...</p>");
        }, 9500)
    setTimeout(function(){
        $('#portals').append('<img class="tinyimg" src="https://some.url.com:5555/test/url.jpg/" />');
        $('#knocks').append("<p>Knock 5 of 5 complete...</p>");
        }, 12000);
    setTimeout(function(){
        $('#knocks').append("<p>Knocking is complete... <br>Proceed to site: <a href='http://secureurl.someurl.com'>http://secureurl.someurl.com/a></p>");
        }, 13000);
});
});


</script>

</head>
<body>
<div id="top">
<p><span id="heading">Gain Access</span><br><span id="subhead">Beta version 1.0</span></p>
</div>
<button type="button">Click to Knock</button>
<div id="portals"></div> <!--The image references created by the port knocks land in this div.-->
<p id="status">Status:</p>
<div id="knocks"><p>Click button to knock</p></div> <!--The status updates generated concurrently with each port knock are displayed here.-->
</body>
</html>

Answer 1

您正在使用GET图像请求来端口敲击您的服务器。我假设服务器没有回复这些请求，甚至过滤它们，所以它们最终会超时。

如果先前的尝试超时，某些浏览器可能不愿意执行相同的请求。它们也可能实现一个队列，并且只能同时发送一些请求，如果你必须发送下一部分敲门声（标准TCP超时为30秒），这些请求仍然未决时会导致问题。

如果可能，请使用WebSockets重新实现敲门协议。

如果您遇到图片问题，请尝试将"?" + $.now()附加到您的网址，以便它们对每个请求都是唯一的。它可能有助于防止浏览器放弃特定请求。

基于jquery的独立端口门环

1 个答案: