在前端开发中，Server-sent Events（SSE）是一种用于实时推送数据到客户端的技术。它可以使用纯 JavaScript 编写，通过与服务器建立一条持久连接，以减少对服务器的轮询请求，从而更高效地传递数据。然而，如何保证 SSE 传输的数据的安全性，也是我们需要考虑的问题。
SSE 的安全性问题
在 SSE 中，服务器端的推送消息可以通过 event stream 发送到客户端，并由 JavaScript 代码进行处理。因此，一旦 SSE 建立，所有的消息都将被自动传递到客户端，这种自动传递的机制可能导致 XSS 和 CSRF 的安全威胁。
XSS
由于在 SSE 中，服务器推送的消息可以是任意文本，包括 HTML、CSS 和 JavaScript 代码。如果这些推送消息中包含恶意代码，则会有 XSS 的风险。攻击者可以通过恶意代码让受害者在自己的浏览器上执行攻击者想要的操作，例如在用户对网站进行操作时，弹出地址欺骗或窃取用户信息的页面。
CSRF
SSE 的推送消息也可以修改客户端的状态，例如使用 document.cookie 将 cookies 传递到服务器或在用户不知情的情况下向服务器发送 AJAX 请求。这也会引起 CSRF 的威胁。
SSE 的解决方案
为了解决 SSE 中的安全问题，我们可以采取以下方法：
过滤并转义推送消息
在服务器端，我们可以通过过滤和转义推送消息，从而避免 XSS 和 CSRF 的风险。推送消息应该被视为任意文本，并进行严格的转义，以确保其不包含恶意代码，并且不会以任何方式影响客户端。例如，在 PHP 中，可以使用 htmlspecialchars 函数进行转义：
header('Content-Type: text/event-stream');
$data = htmlspecialchars($data, ENT_QUOTES, 'UTF-8');
echo "data: $data\n\n";
flush();使用 HTTPS 协议
为了防止已连接的数据交换中的信息泄漏，强烈建议使用 HTTPS 来传输 SSE。通过使用 HTTPS 协议，可以对消息进行加密，防止劫持和篡改。这可以有效地降低 XSS 和 CSRF 的风险。
使用 CSRF Token
为了防止 CSRF 攻击，我们可以在 SSE 推送消息中嵌入一个 CSRF token，这个 token 应该是每个用户不同的，并且只有与 token 匹配的请求才会被服务端处理。在客户端中，我们可以使用 XMLHttpRequest API 在 SSE 推送消息到达之前获取 CSI token：
-- -------------------- ---- -------
-- -- ---- ----- ---- -------------- -
---------------------
--------- -- -----------
---------- -- ------------------------------------ -------------
-- - --- ----- ---- -----
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- -- - -- ---------- -- ---- -
--- ----- - -------------------------------------
-- ------- -
--------------------------- ---- -- ------ --
--- ---- - -------------- - --------------------------- ---- - -----
--------------- - ------
------------ - ---------------------------------- ----- - -----
-
-
-总结
在使用 SSE 时，安全性是一个非常关键的问题。我们必须意识到 SSE 可能引起的安全问题，并且采取适当的措施来保护客户端和服务器的安全。在服务器端进行推送消息过滤和转义、使用 HTTPS 协议以及嵌入 CSRF token，都是保证 SSE 安全性的有效方式。
参考链接：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e7582af6b2d6eab32ea247