随着前端技术的快速发展，越来越多的应用程序涉及到前端和后端的交互。在这种情况下，安全就成为了一个重要的问题。XSRF 和 XSSI 是常见的安全漏洞，影响着前端应用程序的安全性。本文将介绍如何使用 ECMAScript 2020 中的新特性来防止 XSRF 和 XSSI 漏洞。
XSRF 和 XSSI
XSRF（跨站请求伪造）是一种攻击，它发送伪造的请求，借助使用了用户凭据的浏览器cookie 或基于 Http 认证，强迫用户执行意外的操作，例如在用户未意识到的情况下将其转账给攻击者。攻击者可以通过向用户发送一些危险的链接来利用这种漏洞。
XSSI（跨站脚本包含攻击）是一种类似于 XSRF 的攻击，它利用了 JSONP 和其他 Web API 来执行包含攻击。攻击者可以将恶意脚本注入 Web 链接和 Web 内容中，并在页面被加载时执行这些脚本。这使得攻击者能够在没有用户知情的情况下获取用户的敏感数据。
防止 XSRF
为了防止 XSRF 攻击，可以使用同源策略来限制脚本机制的数据访问。同源策略要求脚本只能从与启动脚本相同协议，主机和端口的源访问数据。这意味着不同域的页面无法访问数据。
在 ECMAScript 2020 中，可以使用新的 globalThis 对象来实现跨窗口通信，并防止 XSRF 攻击。globalThis 对象是一个全局对象，用于提供跨宿主迁移，使得与 Web 宿主无关的 JavaScript 代码能够跨宿主平台运行。通过使用诸如 globalThis 等新特性，你可以限制访问跨站点信息和cookie，从而确保安全执行前端和后端的交互操作。
以下示例代码演示了 globalThis 如何可以用于防止 XSRF 攻击：
-- -------------------- ---- -------
-- ------------- --------- - -------
--------------- - ------------------- ---------------- --------
-- ----- ---- ----- ---- -----------
------------------------------------ -
------- -------
-------- -
--------------- ------------------------------------
--
----- --------------------
--在这里，我们设置了一个名为 csrfToken 的 Cookie，并将其限制为仅用于 SameSite（限制 Cookie 传输到同一站点）。我们然后在执行 AJAX 请求时，将 CSRF 令牌添加到请求头中。
防止 XSSI
要防止 XSSI 攻击，则需要在发送 JSON 响应之前将其包装在 while(1) {...} 的语句中。这样做可以防止攻击者通过包含攻击来获取JSON的数据。我们在 JavaScript 中使用 try...catch 块来解析 JSON 响应。
以下代码演示了如何在 ECMAScript 2020 中使用 while(1) {...} 语句来保护 JSON 响应：
-- -------------------- ---- ------- -- ------------- --- ---- - ----------- ----- ------- -------- -- ---------------------- --- ---- - --------------------- -- ----------------- --- ------ - ------------ -- --------- --- -------- - ------ - ----- -- --------- --- - --- ------ - ------------------------------------------ -------------------- - ----- --- - ------------------------ - - ----------- -
在这里，我们先将 JSON 响应进行序列化，然后将其包装在 while(1) {...} 语句中。这可以防止 XSSI 攻击者通过包含攻击获取数据。然后，在尝试解析 JSON 响应时，我们使用 try...catch 块来处理任何错误。
结论
ECMAScript 2020 中引入的新特性可以帮助前端开发者更好地保护其应用程序不受 XSRF 和 XSSI 攻击的影响。通过使用 globalThis 对象来实现跨窗口通信，并将 JSON 响应包装在 while(1) {...} 语句中，我们可以确保安全的前后端交互和数据传输。为了保持应用程序的安全性，我们建议开发者在开发和维护前端应用程序时积极采用这些安全措施。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672d77fd508f8f5bb8422517