网页源代码检查时隐藏 WebSocket 的后端地址网站首页 其他

网页源代码检查时隐藏 WebSocket 的后端地址

javastarboy 2023-06-10 12:00:02

简介网页源代码检查时隐藏 WebSocket 的后端地址

背景

近期在自研如何通过 OpenAI 实现与ChatGPT 官网一样的聊天对话效果。
用到了 html5+websocket+python 三项技术 , 于是用一天时间自学了一下这方面技术。当实现了功能之后，就得考虑安全问题：
在用 html5 实现与 websocket 通讯时，如何保证网页源代码检查时看不到 ws 的后端地址？进而保证安全？

先给大家显摆一下我的成果（雏形），哈哈~
一个 html 文件+一个 python 文件搞定的与 chatgpt 对话。
在这里插入图片描述

为了在网页源代码检查时隐藏 WebSocket 的后端地址，您可以采用以下方法：

方法一：使用 JavaScript 动态生成 WebSocket 连接地址

在 HTML 页面中，不要直接写入 WebSocket 连接地址。而是通过 JavaScript 动态生成 WebSocket 连接地址。这样，当用户查看网页源代码时，将无法直接看到 WebSocket 的后端地址。

例如：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
  <script>
    function setupWebSocket() {
      // 动态生成 WebSocket 连接地址
      var wsUrl = "wss://" + window.location.hostname + "/websocket";
      var websocket = new WebSocket(wsUrl);

      websocket.onopen = function(event) {
        console.log("WebSocket 连接已打开");
      };

      websocket.onmessage = function(event) {
        console.log("收到消息: " + event.data);
      };

      websocket.onclose = function(event) {
        console.log("WebSocket 连接已关闭");
      };
    }
  </script>
</head>
<body onload="setupWebSocket()">
  <h1>WebSocket Example</h1>
</body>
</html>

方法二：使用后端代码生成 WebSocket 连接地址

在后端代码中生成 WebSocket 连接地址，并将其传递给前端。这样，当用户查看网页源代码时，将无法直接看到 WebSocket 的后端地址。

例如，在 Python 的 Flask 框架中，可以这样做：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    ws_url = "wss://" + request.host + "/websocket"
    return render_template("index.html", ws_url=ws_url)

if __name__ == "__main__":
    app.run()

然后，在 HTML 模板中使用传递的 ws_url 变量：

<!DOCTYPE html>
<html>
<head>
  <title>WebSocket Example</title>
  <script>
    function setupWebSocket() {
      var websocket = new WebSocket("{{ ws_url }}");

      websocket.onopen = function(event) {
        console.log("WebSocket 连接已打开");
      };

      websocket.onmessage = function(event) {
        console.log("收到消息: " + event.data);
      };

      websocket.onclose = function(event) {
        console.log("WebSocket 连接已关闭");
      };
    }
  </script>
</head>
<body onload="setupWebSocket()">
  <h1>WebSocket Example</h1>
</body>
</html>