javascript - EventSource/SSE(服务器发送事件)- 安全

标签 javascript html security server-sent-events

我关注了This主题,但由于我还没有完全理解我的情况的答案,所以我想再次发帖。

我在前端使用 EventSource,后端使用 echo将与无人机相关的数据流式传输到我的应用程序的事件。

var source = new EventSource(`blabla:3000/sse?channel=myProject${projectID}`);
source.addEventListener(`myDrone${droneID}`, function(e){
    console.log('Received an update message:', e.data);
});

在后端,默认情况下没有任何流式传输,连接上的用户将请求后端开始发出事件。此调用使用 jwt_token 进行保护。因此,要使服务器启动流,需要 token 。

我的问题是,当服务器已经在流式传输时。

假设我未连接(因此没有有效 token ),并且我决定连接到 SSE 流,因为我知道 channel 名称并且服务器已经在流式传输。如果我在 blabla:3000/sse?channel=myProject${projectID} 上启动一个新的 EventSource。我仍然可以看到通过此 channel 发送的所有消息吗?我相信是的。

如何确保这些事件流仅针对注册用户?

例如:(从上到下阅读)

enter image description here

如何防止知道 channel 名称的用户接收服务器的所有事件流?

由于前端和后端目前托管在同一域上,但这可能会改变,所以我需要一个广泛的答案。

最佳答案

这取决于您如何设置 SSE 服务器以及您是否正在寻找经过身份验证的用户。您需要配置您的 echo 服务器以使用 Go 的 http.Handler 处理身份验证

一旦你这样做了,那么无论你是否知道 channel 名称和服务器,后端仍然可以拒绝向没有 token 的用户发送消息。不要将其视为用于创建 channel 的 token ,而是将其视为所需的订阅请求 - 然后根据请求是否经过身份验证,服务将允许或允许拒绝。推送服务应该持续为所有订阅请求执行此操作。

服务器在身份验证时发出 token ,一旦您收到 key ,您可以通过将 token 附加为名为“key”的查询字符串参数来让服务器知道您已经注册,或者您可以提供您的请求中的 header 。方法如下:

var key ='xVLyHw.HSvCPg:d1RaNTqnY3s4EZZh';
var url ='https://realtime.ably.io/event-stream?channels=myChannel&v=1.1&key=' + key;
var eventSource = new EventSource(url);

eventSource.onmessage = function(event) {
  var message = JSON.parse(event.data);
  console.log('Message: ' + message.name + ' - ' + message.data);
};

示例取自: https://www.ably.io/documentation/sse

您还可以接收身份验证 token ,并且可以将其传递到“accessToken”查询字符串中 - 类似于使用上例中的 key 执行此操作的方式。但请注意,您可以从字面上复制此 key 并将其提供给那里的任何人,然后他们就可以收听同一 channel 。您还可以将身份验证 token 保存到本地存储中,并将其作为 header 传递。您可以使用此库来实现此目的:

var EventSource = EventSourcePolyfill; 
const eventSource = new EventSource(`blabla:3000/sse?channel=myProject${projectID}`,{
  headers: {
    'Authorization': 'my secret jwt token' // or localStorage.getItem("myToken")
  }
});

可在此处找到添加 header 的库:https://github.com/Yaffle/EventSource

或者您可以使用可以生成 cookie 的基本身份验证,并通过设置 withCredentials = true 将订阅请求与 cookie 一起发送:

var source = new EventSource(`blabla:3000/sse?channel=myProject${projectID}`, { withCredentials: true });

关于javascript - EventSource/SSE(服务器发送事件)- 安全,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60750760/

相关文章:

php - 有什么方法可以阻止人们上传带有注入(inject)的 GIF 动图?

javascript - 显示 2 次差异

html - 使用 HTML/CSS 制作两个行的 div

html - 全视口(viewport)元素

html - 解析 HTML 表单数据

asp.net - 此站点无法提供安全连接 (ERR_SSL_PROTOCOL_ERROR)

javascript - 如何一次进行两个验证并得到两个结果

javascript - 加载模板 dom 时 angular2 模板/ Hook 中的脚本标记

javascript - 减少代码行

java - 加密的 AES key 太大,无法使用 RSA (Java) 解密