乐闻世界logo
搜索文章和话题

为什么 React 元素有一个 $$typeof 属性

浏览23
6月24日 16:43

React 元素有一个 $$typeof 属性的原因主要是出于安全考虑,它是用来防止一种名为 XSSI(跨站脚本包含)的攻击。$$typeof 属性可以帮助确保在 React 应用中引入的数据是有效的 React 元素,而非恶意对象。

在过去,攻击者可能会尝试利用 JSONP 等技术将恶意脚本插入到网站中。JSONP 是一种通过 <script> 标签载入跨域的 JSON 数据的方法。在 JSONP 中,由于 <script> 标签会执行载入的内容,如果返回的数据不是纯粹的 JSON 而是可执行的 JavaScript 代码,那么它就可能被用于执行恶意脚本。

为了防止这种攻击,React 开发团队引入了 $$typeof 属性。每个通过 React.createElement 创建的元素都会自动添加这个属性。这个属性的值是一个特殊的符号(在支持 Symbol 的 JavaScript 环境中)或者一个特定的数字(在不支持 Symbol 的环境中)。这样,在 React 对元素进行处理之前,它可以检查元素是否具有正确的 $$typeof 值,确保该元素是由 React 创建的,从而防止可能的 XSSI 攻击。

例如,如果我们通过网络请求获取了一个对象,并且直接将其作为子元素传递给 React 来渲染,React 会检查这个对象是否具有正确的 $$typeof 属性。如果没有,React 将不会将其作为 React 元素进行处理,这样就能防止恶意对象被当作 React 元素来渲染,从而避免潜在的安全风险。

总之,$$typeof 属性是 React 为了增强应用安全而引入的一个机制,用于验证被处理的元素确实是通过 React 的正确方式创建的,从而避免了某些类型的安全漏洞。

标签:React前端