网页源代码检查时隐藏 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_templateapp = 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>