为 React 和 Java 应用程序实现实时安全推送通知

在现代Web应用领域，向用户提供实时更新不仅是一种期望，更是一种必要。

然而，除了提供无缝通信外，安全性也是一个首要问题。

在本文中，我们将探讨如何使用 React 作为前端和 Java 作为安全的后端即服务来实现安全的实时推送通知。

确保 Java 后端的安全：

为了增强 Java 后端的安全性，我们将使用 Spring Security 来确保 WebSocket 通信的安全。让我们修改现有的 WebSocket 配置，加入安全措施。

// WebSocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket-endpoint").withSockJS();
    }
    
    @Override
    public void configureClientInboundChannel(ChannelRegistration registration) {
        registration.setInterceptors(new AuthChannelInterceptorAdapter());
    }
}

现在，让我们创建 AuthChannelInterceptorAdapter 来处理身份验证和授权。

// AuthChannelInterceptorAdapter.java

public class AuthChannelInterceptorAdapter extends ChannelInterceptorAdapter {

    @Override
    public Message<?> preSend(Message<?> message, MessageChannel channel) {
        StompHeaderAccessor accessor = StompHeaderAccessor.wrap(message);

        if (StompCommand.CONNECT.equals(accessor.getCommand())) {
            // Perform authentication and authorization checks here
            // Example: Authenticate user based on credentials in accessor.getNativeHeader("Authorization")
        }

        return message;
    }
}

在 AuthChannelInterceptorAdapter 中，您可以根据应用程序的要求实现自定义身份验证和授权逻辑。

前端与安全 WebSocket 集成：

为了确保 React 前端 WebSocket 连接的安全，我们将使用 SockJS 库和 stompjs 库。使用 npm 安装这些库：

npm install sockjs-client stompjs

现在，让我们修改 NotificationComponent，使其包含一个安全的 WebSocket 连接：

// NotificationComponent.jsx

import React, { useState, useEffect } from 'react';
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

const NotificationComponent = () => {
  const [notifications, setNotifications] = useState([]);

  useEffect(() => {
    const socket = new SockJS('http://localhost:8080/websocket-endpoint');
    const stompClient = Stomp.over(socket);

    // Replace with your authentication token
    const authToken = 'Bearer YOUR_AUTH_TOKEN';

    stompClient.connect({ Authorization: authToken }, () => {
      stompClient.subscribe('/topic/notifications', (notification) => {
        handleNotification(JSON.parse(notification.body));
      });
    });

    return () => {
      stompClient.disconnect();
    };
  }, []);

  const handleNotification = (notification) => {
    setNotifications([...notifications, notification]);
  };

  return (
    <div>
      <h1>Secure Real-Time Notifications</h1>
      <ul>
        {notifications.map((notification, index) => (
          <li key={index}>{notification.message}</li>
        ))}
      </ul>
    </div>
  );
};

export default NotificationComponent;

确保将 “Bearer YOUR_AUTH_TOKEN “替换为从身份验证过程中获取的实际身份验证令牌。

结论

通过将安全措施集成到 Java 后端并确保 React 前端 WebSocket 连接的安全，我们为实时推送通知创建了一个安全的基础架构。

身份验证和授权检查有助于确保只有授权用户才能接收敏感的实时更新，从而增强网络应用程序的整体安全态势。

与任何安全实施一样，请始终考虑您的特定应用需求，并相应调整代码以满足这些需求。