扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >详解React 如何防止 XSS 攻击论$$typeof 的作用
  • 956

0
分享到

详解React 如何防止 XSS 攻击论$$typeof 的作用

2024-04-02 19:04:59 956人浏览 安东尼
摘要

目录jsXXSS 攻击防止 XSS 攻击的方法React 对于文本节点的处理dangerouslySetInnerhtml 处理富文本节点$$typeof 的作用JSX 先来简单复习

JSX

先来简单复习一下 JSX 的基础知识。JSX 是React.createElement的语法糖

<div id="container">hello</div>

经过 babel 编译后：

React.createElement(
  "div" ,
  { id: "container" } ,
  "hello" 
);

React.createElement最终返回的结果就是一个对象，如下：

{
  type: 'div',
  props: {
    id: 'container',
    children: 'hello',
  },
  key: null,
  ref: null,
  $$typeof: Symbol.for('react.element'),
}

这就是一个 React element 对象。

我们甚至可以在代码中直接写 React element 对象，React 照样能正常渲染我们的内容：

render() {
  return (
    <div>
      {{
        $$typeof: Symbol.for('react.element'),
        props: {
          dangerouslySetInnerHTML: {
            __html: '<img src="x" onerror="alert(1)">'
          },
        },
        ref: null,
        type: "div",
      }}
    </div>
  );
}

可以复制这段代码本地运行一下，可以发现浏览器弹出一个弹窗，并且img已经插入了 dom 中。

这里，$$typeof 的作用是啥？为什么使用 Symbol() 作为值？

在了解之前，我们先来简单看下 XSS 攻击

XSS 攻击

我们经常需要构造 HTML 字符串并插入到 DOM 中，比如：

const messageEl = document.getElementById("message");
var message = "hello world";
messageEl.innerHTML = "<p>" + message + "</p>";

页面正常显示。但是如果我们插入一些恶意代码，比如：

const messageEl = document.getElementById("message");
var message = '<img src onerror="alert(1)">';
messageEl.innerHTML = "<p>" + message + "</p>";

此时页面就会弹出一个弹窗，弹窗内容显示为 1

因此，直接使用 innerHTML 插入文本内容，存在 XSS 攻击的风险

防止 XSS 攻击的方法

为了解决类似的 XSS 攻击方法，我们可以使用一些安全的 api 添加文本内容，比如：

  • 使用 document.createTextnode('hello world') 插入文本节点。
  • 或者使用 textContent 而不是 innerHTML 设置文本内容。
  • 对于一些特殊字符，比如 <、>，我们可以进行转义，将其转换为 &#60; 以及 &#62;
  • 对于富文本内容，我们可以设置黑名单，过滤一些属性，比如 onerror 等。

React 对于文本节点的处理

React 使用 createTextNode 或者 textContent 设置文本内容。

对于下面的代码：

render() {
  const { count } = this.state
  return (
    <div onClick={() => this.setState({ count: count + 1})}>
      {count}
    </div>
  );
}

React 在渲染过程中会调用setTextContent方法为div节点设置内容，其中，第一次渲染时，直接设置div节点的textContent，第二次或者第二次以后的更新渲染，由于第一次设置了textContent，因此div的firstChild值存在，是个文本节点。此时直接更新这个文本节点的nodeValue即可

var setTextContent = function (node, text) {
  if (text) {
    var firstChild = node.firstChild;
    // 如果当前node节点已经设置过textContent，则firstChild不为空，是个文本节点TEXT_NODE
    if (
      firstChild &&
      firstChild === node.lastChild &&
      firstChild.nodeType === TEXT_NODE
    ) {
      firstChild.nodeValue = text;
      return;
    }
  }
  // 第一次渲染，直接设置textContent
  node.textContent = text;
};

综上，对于普通的文本节点来说，由于 React 是采用 textContent 或者 createTextNode 的方式添加的，因此是不会存在 XSS 攻击的，即使上面示例中，count 的值为 '<img src="x" onerror="alert(1)">'也不会有被攻击的风险

dangerouslySetInnerHTML 处理富文本节点

有时候我们确实需要显示富文本的内容，React 提供了dangerouslySetInnerHTML方便我们显式的插入富文本内容

render() {
  return (
    <div
      id="dangerous"
      dangerouslySetInnerHTML={{ __html: '<img src="x" onerror="alert(1)">' }}
    >
    </div>
  );
}

React 在为 DOM 更新属性时，会判断属性的key是不是dangerouslySetInnerHTML，如果是的话，调用setInnerHTML 方法直接给 dom 的innerHTML属性设置文本内容

function setInitialDOMProperties(
  tag,
  domElement,
  rootContainerElement,
  nextProps
) {
  for (var propKey in nextProps) {
    if (propKey === "dangerouslySetInnerHTML") {
      var nextHtml = nextProp ? nextProp.__html : undefined;
      if (nextHtml != null) {
        setInnerHTML(domElement, nextHtml);
      }
    }
  }
}
var setInnerHTML = function (node, html) {
  node.innerHTML = html;
};

可以看出，React 在处理富文本时，也仅仅是简单的设置 DOM 的innerHTML属性来实现的。

对于富文本潜在的安全风险，交由开发者自行把控。

$$typeof 的作用

render() {
  const { text } = this.state
  return (
    <div>
      {text}
    </div>
  );
}

假设这个text是从后端返回来的，同时后端允许用户存储 JSON 对象，如果用户传入下面这样的一个类似 React element 的对象：

{
  type: "div",
  props: {
    dangerouslySetInnerHTML: {
      __html: '<img src="x" onerror="alert(1)">'
    },
  },
  ref: null
}

别忘了前面说过，我们在 JSX 中直接插入 React element 对象也是能够正常渲染的。

在这种情况下，在React0.13版本时，这是一个潜在的XSS攻击，这个漏洞源于服务端。如果攻击者恶意伪造一个类似 React element 对象的数据返回给前端，React 就会执行恶意代码。但是 React 可以采取措施预防这种攻击。

从React0.14版本开始，React 为每个 element 都添加了一个Symbol标志：

{
  $$typeof: Symbol.for('react.element'),
  props: {
    id: 'container'
  },
  ref: null,
  type: "div",
}

这个行得通，是因为 JSON 不支持Symbol。因此即使是服务端有风险漏洞并且返回一个 JSON，这个 JSON 也不会包含Symbol.for('react.element').，在 Reconcile 阶段，React 会检查element.$$typeof标志是否合法。不合法的话直接报错，React 不能接受对象作为 children

专门使用 Symbol.for() 的好处是， Symbols 在 iframe 和 worker 等环境之间是全局的。因此，即使在更奇特的条件下，Symbols 也能在不同的应用程序之间传递受信任的元素。同样，即使页面上有多个 React 副本，它们仍然可以“同意”有效的 $$typeof 值

如果浏览器不支持Symbols，React 使用0xeac7代替

{
  $$typeof: '0xeac7',
}

到此这篇关于详解React 如何防止 XSS 攻击论$$typeof 的作用的文章就介绍到这了,更多相关React $$typeof 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: 详解React 如何防止 XSS 攻击论$$typeof 的作用

本文链接: https://lsjlt.com/news/165110.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 详解React 如何防止 XSS 攻击论$$typeof 的作用
    目录JSXXSS 攻击防止 XSS 攻击的方法React 对于文本节点的处理dangerouslySetInnerHTML 处理富文本节点$$typeof 的作用JSX 先来简单复习...
    99+
    2024-04-02
  • react如何防止xss攻击
    react防止xss攻击的方法：react在渲染html内容和渲染dom属性时都会将 "'&<>这几个字符进行转义，转义部分源码如下：for (index = match....
    99+
    2024-04-02
  • SpringBoot如何防止XSS注入攻击详解
    什么是 XSS 攻击 在跨站脚本（XSS）攻击中，攻击者可以在受害者的浏览器中执行恶意脚本。这种攻击通常是通过在网页中插入恶意代码 (JavaScript) 来完成的。攻击者在使用...
    99+
    2024-04-02
  • js如何防止xss攻击
    js防止xss攻击的方法：对用户的输入及请求都进行过滤检查，如对特殊字符进行过滤，设置输入域的匹配规则等，例如：function removeXss(val){val = val.replace(/([\x00-\x08][\x0b-\x0...
    99+
    2024-04-02
  • yii2如何防止xss攻击
    yii2防止xss攻击的示例代码：在对应文件中添加以下代码进行调用：function actionClean($str){$str=trim($str);$str=strip_tags($str);$str=stripslashe...
    99+
    2024-04-02
  • django如何防止xss攻击
    django防止xss攻击的方法：使用escape过滤器，无需转义时使用safe过滤器，对单一变量进行转义过滤，例如：Hello {{ a|escape }} # 转义{{a}} # 转义{{a|safe}} # 认为a安全，不进行转义利用...
    99+
    2024-04-02
  • angular如何防止xss攻击
    angular防止xss攻击的示例：angular提供了一个DomSanitizer服务，提供的方法如下：export enum SecurityContext { NONE, HTML, STYLE, SCRIPT, URL, RESOU...
    99+
    2024-04-02
  • java如何防止xss攻击
    java防止xss攻击的方案：配置过滤器，代码如下：public class XSSFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig)...
    99+
    2024-04-02
  • emlog如何防止xss攻击
    emlog防止xss攻击的方法：给cookie设置上httponly检查，操作步骤：打开“include\lib\loginauth.php”文件，找到第134行的setAuthCookie函数，改成以下代码：public static f...
    99+
    2024-04-02
  • vue如何防止xss攻击
    这篇“vue如何防止xss攻击”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue如何防止xss攻击”文章吧。vue防止xs...
    99+
    2023-07-04
  • 前端如何防止xss攻击
    前端防止xss攻击的方法：过滤非法字符，例如：// 过滤XSS反射型漏洞filterInputTxt: function (html) {html = html.replace(/(.*]+>.*)/g,""); // HTML标记html...
    99+
    2024-04-02
  • 网页如何防止xss攻击
    网页防止xss攻击的方法：实现过滤器对特殊字符进行转义过滤，例如：function filter(xss) {  var whiteList = ['h1'...
    99+
    2024-04-02
  • 表单如何防止xss攻击
    表单防止xss攻击的方法：可以使用PHP中trim()函数去除用户输入数据中不必要的字符(如：空格、tab、换行)。使用PHP中stripslashes()函数去除用户输入数据中的反斜杠(\)，示例代码：function chec...
    99+
    2024-04-02
  • springboot项目如何防止XSS攻击
    目录1. 什么是XSS攻击？ 2. 如何防范？ 2.1 什么时候注入请求参数 3. 具体处理细节 1. 什么是XSS攻击？     XSS攻...
    99+
    2024-04-02
  • 如何防止xss和sql注入攻击
    防止xss和sql注入攻击的通用方法：php防sql注入和xss攻击通用过滤如下：function string_remove_xss($html) {preg_match_all("/\...
    99+
    2024-04-02
  • JSP如何写过滤器防止xss攻击
    JSP写过滤器防止xss攻击的方法：利用Servlet的过滤器机制，编写定制的XssFilter，将request请求代理，覆盖getParameter和getHeader方法将参数名和参数值里的指定半角字符，强制替换成全角字符，代码如下：...
    99+
    2024-04-02
  • 如何用手动防止Ping攻击
    本篇内容介绍了“如何用手动防止Ping攻击”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ping命令是大家用的较多的DOS命令。大家知道，p...
    99+
    2023-06-14
  • 使用java如何解决XSS攻击
    使用java如何解决XSS攻击？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。Java的特点有哪些Java的特点有哪些1.Java语言作为静态面向对象编程语言的代表，实现了面向对...
    99+
    2023-06-14
  • ajax中如何使用AntiForgeryToken防止CSRF攻击
    小编给大家分享一下ajax中如何使用AntiForgeryToken防止CSRF攻击，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • 租用免费的高防cdn如何防止网络攻击
    租用免费高防cdn防止网络攻击的方法：1、通过修改网站域名解析，将网站服务器IP地址隐藏于公网上，降低黑客的攻击；2、自动识别攻击，并自动进行清洗过滤；3、能针对网站攻击类型进行针对性的部署防护策略，能有效应对各种不同的攻击类型；4、节点部...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作