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

背景
近期在自研如何通过实现与官网一样的聊天对话效果。
用到了 html5++ 三项技术 , 于是用一天时间自学了一下这方面技术。当实现了功能之后，就得考虑安全问题：
在用 html5 实现与通讯时，如何保证网页源代码检查时看不到 ws 的后端地址？进而保证安全？
先给大家显摆一下我的成果（雏形），哈哈~
一个 html 文件+一个文件搞定的与对话。
为了在网页源代码检查时隐藏的后端地址，您可以采用以下方法：
方法一：使用动态生成连接地址
在 HTML 页面中，不要直接写入连接地址。而是通过动态生成连接地址。这样，当用户查看网页源代码时，将无法直接看到的后端地址。
例如：
WebSocket Example>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 连接已关闭");};}WebSocket Example

文章插图
方法二：使用后端代码生成连接地址
在后端代码中生成连接地址，并将其传递给前端。这样，当用户查看网页源代码时，将无法直接看到的后端地址。
例如，在的 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 模板中使用传递的变量：
【网页源代码检查时隐藏 WebSocket 的后端地址】

WebSocket Example>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 连接已关闭");};}WebSocket Example

需要注意的是，虽然这些方法可以在一定程度上保护连接地址，但无法完全阻止有恶意意图的用户找到地址。因此，建议您在后端实现一定的安全措施，例如验证用户身份、限制连接速率等，以确保通信的安全。