前言
之前在寫“一套簡單的web即時通訊”,寫到第三版的時候沒什么思路,正好微信公眾號看到一篇講API交互加密,於是就自己搞了一套AES與RSA混合加密,無意中產生應用在WebSocket想法,好在思路都差不多,稍微改動一下就能實現,特意寫這篇博客記錄下來
WebSocket是HTML5 開始提供的一種瀏覽器與服務器進行全雙工通訊的網絡技術,屬於應用層協議。它基於 TCP 傳輸協議,並復用 HTTP 的握手通道。
1、建立連接,客戶端通過 HTTP 請求與服務端協商升級協議。協議升級完成后,后續的數據交換則遵照 WebSocket 的協議。
2、數據交換,建立連接后,后續的操作通過TCP協議以數據幀的格式傳輸交換。
通過TCP進行數據交換,不像http請求,websocket數據交換在瀏覽器上使用開發者工具(F12)是看不到數據,但使用抓包軟件仍然可以獲取到這些TCP傳輸數據,例如Charles和Fiddler等,以明文的方式直接傳輸很容易被第三方監聽,因此,我覺得是有必要的
前面我們實現了一套AES與RSA混合加密(詳情請戳:前后端API交互數據加密——AES與RSA混合加密完整實例),我們現在用它實現一下WebSocket數據加密
思路、代碼
工具類我們直接用之前API加密那一套就行,操作也與之前的API加密類似,發送前加密、收到數據后解密再交給業務處理,有個地方要注意的是,我們在進行消息轉發時,要用的是接收方的前端公鑰進行加密
按照我們目前的規則,項目啟動后生成后端密鑰對,訪問登錄頁面時響應后端公鑰給前端,前端保存到后端RSA公鑰並存到sessionStorage,每個頁面都引入頭部head.html(使用thymeleaf的<script th:replace="head::static"></script>),在head里面獲取前端RSA公鑰密碼、AES的key,並放到window,這些都跟之前的一樣,不需要改變,需要改動的是下面這些:
建立WebSocket連接時,將當前用戶的前端公鑰發送到后端,后端進行Map保存
//判斷當前瀏覽器是否支持WebSocket if ('WebSocket' in window) { //因為是url的方式傳值,公鑰中的/需要進行轉換一下,傳到后端再轉回來(PS:因為生成的公鑰里是不存在","的,所以這里轉成逗號) websocket = new WebSocket("ws://localhost:10086/websocket/" + userId + "/" + window.jsPublicKey.replace(/\//g,",")); } else { console.error("不支持WebSocket"); }
/** * WebSocket服務 */ @Component @ServerEndpoint(value = "/websocket/{userId}/{publicKey}", configurator = MyEndpointConfigure.class) public class WebSocketServer { //省略其他代碼 /** * 登錄用戶的前端公鑰Map集合(其實應該放在Redis) */ private static Map<Session, String> loginPublicKeyList = new HashMap<Session, String>(); /** * 連接建立成功調用的方法 */ @OnOpen public void onOpen(Session session, @PathParam("userId") String userId, @PathParam("publicKey") String publicKey) { //省略其他代碼 //設置前端公鑰,因為是url的方式傳值,公鑰中的/需要進行轉換一下,傳到后端再轉回來,然后將每個用戶的前端公鑰存儲起來 loginPublicKeyList.put(session,publicKey.replaceAll(",", "/")); } }
前端發送前加密
//發送消息 function send(but) { //業務操作不變,省略代碼 //先加密 let aesKey = aesUtil.genKey(); let data = { data: aesUtil.encrypt(JSON.stringify({ "type": "1", "toUser": {"userId": toUserId}, "fromUser": {"userId": fromUserId}, "message": message, "date": nowTime }), aesKey),//AES加密后的數據 aesKey: rsaUtil.encrypt(aesKey, sessionStorage.getItem('javaPublicKey')),//后端RSA公鑰加密后的AES的key publicKey: window.jsPublicKey//前端公鑰 }; websocket.send(JSON.stringify(data)); //業務操作不變,省略代碼 }
后端收到后先解密
/** * 服務器接收到客戶端消息時調用的方法 */ @OnMessage public void onMessage(String message, Session session) { try { //jackson ObjectMapper mapper = new ObjectMapper(); //jackson 序列化和反序列化 date處理 mapper.setDateFormat(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss")); mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false); //JSON字符串轉 HashMap HashMap map = mapper.readValue(message, HashMap.class); //先解密 String data = (String) map.get("data"); String aesKey = (String) map.get("aesKey"); //后端私鑰解密的到AES的key byte[] plaintext = RsaUtil.decryptByPrivateKey(Base64.decodeBase64(aesKey), RsaUtil.getPrivateKey()); aesKey = new String(plaintext); //RSA解密出來字符串多一對雙引號 aesKey = aesKey.substring(1, aesKey.length() - 1); //AES解密得到明文data數據 String decrypt = AesUtil.decrypt(data, aesKey); //JSON字符串轉 HashMap HashMap hashMap = mapper.readValue(decrypt, HashMap.class); //得到hashMap,下面的業務操作跟前面的一樣,這里就不貼出來了 } catch (Exception e) { e.printStackTrace(); } }
后端發送之前先加密,這里要用消息接收方的前端公鑰進行加密
/** * 封裝一個send方法,發送消息到前端 */ private void send(Session session, String message) { try { //發送前加密 //每次響應之前隨機獲取AES的key,加密data數據 String key = AesUtil.getKey(); String data = AesUtil.encrypt(message, key); //用前端的公鑰來解密AES的key,並轉成Base64,注意:這里需要用接收方的前端公鑰進行加密,從loginPublicKeyList集合獲取 String aesKey = Base64.encodeBase64String(RsaUtil.encryptByPublicKey(key.getBytes(), loginPublicKeyList.get(session))); //發送過去的是AES加密后的data,跟RSA加密后的aesKey session.getBasicRemote().sendText("{\"data\":\"" + data + "\",\"aesKey\":\"" + aesKey + "\"}"); } catch (Exception e) { e.printStackTrace(); } }
前端收到消息后先解密
//接收到消息的回調方法 websocket.onmessage = function (event) { let data = eval("(" + event.data + ")"); //先解密 let msgObj = aesUtil.decrypt(data.data, rsaUtil.decrypt(data.aesKey, window.jsPrivateKey)); //業務操作不變,省略代碼 };
效果演示
按照程序流程:
前端加密前、加密后
后端解密前、解密后
后端加密前、加密后
前端解密前、解密后
完整頁面演示:
好友上線在線系統通知沒有問題
聊天沒有問題
后記
WebSocket的加密就先記錄到這里,其他的后面再補充