网页源代码检查时隐藏 WebSocket 的后端地址
背景
近期在自研如何通过 实现 与 官网一样的聊天对话效果。
用到了 html5++ 三项技术 , 于是用一天时间自学了一下这方面技术。 当实现了功能之后，就得考虑安全问题：
在用 html5 实现与 通讯时，如何保证网页源代码检查时看不到 ws 的后端地址？ 进而保证安全？
先给大家显摆一下我的成果（雏形），哈哈~
一个 html 文件+一个 文件搞定的与 对话。
为了在网页源代码检查时隐藏 的后端地址，您可以采用以下方法：
在 HTML 页面中，不要直接写入 连接地址。而是通过 动态生成 连接地址。这样，当用户查看网页源代码时，将无法直接看到 的后端地址。
例如：
DOCTYPE html>
<html>
<head><title>WebSocket Exampletitle><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 Exampleh1>
body>
html>
方法二：使用后端代码生成 连接地址
在后端代码中生成 连接地址，并将其传递给前端。这样，当用户查看网页源代码时，将无法直接看到 的后端地址。
例如，在 的 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 模板中使用传递的 变量：
DOCTYPE html>
<html>
<head><title>WebSocket Exampletitle><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 Exampleh1>
body>
html>需要注意的是，虽然这些方法可以在一定程度上保护 连接地址，但无法完全阻止有恶意意图的用户找到 地址。因此，建议您在后端实现一定的安全措施，例如验证用户身份、限制连接速率等，以确保 通信的安全。
