一些 React 项目中可能存在的安全隐患

Posted 2022-12-21 GoldenaArcher

一些 React 项目中可能存在的安全隐患

公司要求完成一系列的安全课程（Security），其中正好有 React 相关的，就上完了这个课，并且发现了以前一些漏掉的问题，在此总结一下。

XSS攻击

在 [React 基础系列] 什么是 JSX，以及如何使用 JSX 中，曾经提到过：

原来 JSX 原生可以避免 XSS(cross-site-scripting) 攻击。XSS 指的是将恶意指令注入到 html 中，使得用户加载并且执行攻击的一种恶意程序。以下面的代码为例，如果这段代码作为用户输入的信息，而前端又没有进行任何的预防，那么该网站就会被攻击：

嗯……这句话其实并不准确，JSX 只是清理了一部分的代码，但是使用 JSX 对 XSS 攻击还是非常脆弱的，尤其在有了 JSX 原生可以避免 XSS(cross-site-scripting) 攻击 这种错觉，但其实这个说法是不准确的。

参考一下案例，当使用用户提供的数据进行路由：

example:

import React,  useState  from 'react';
import Link from 'react-router-dom'

const Href = () => 
  const [data, setData] = useState(
    text: '',
  );
const handleType = (e) => 
    setData(
      ...data,
      [e.target.name]: e.target.value,
    );
  ;
return (
    <div>
      <input
        type='text'
        name='text'
        value=data.text
        onChange=(e) => handleType(e)
      />
      <a href=data.text>click Here</a>
      /* <Link to=data.text>Click Here</Link> */
    </div>
  );
;
export default Href;

这个时候用户输入的数据如果没有经过清理，那就有可能触发攻击：

这一部分的原因是因为直接将用户的数据放入没有被React清理过的 attributes 中，从而导致 XSS 攻击的发生，下面是一些 React 不会清理的 attributes：

Tag	attribute
<form>	action
<object>	data
<iframe>	src/srcdoc
<a>	href

除此之外，直接使用 eval() 也会导致XSS攻击的发生……这个原因就不言而喻了吧。

关于 React Router

我倒是挺好奇有没有人尝试使用React Router 去触发XSS的？或许可以讨论一下。我本地尝试了一下发现在最新的v6版本会直接进入 404 的页面（因为找不到相应路径：

dangerouslySetInnerHTML

dangerouslySetInnerHTML 会直接设置 innerHTML，React 是完全不会清理这一部分的数据，因此也需要注意。其他关于 XSS 攻击的部分也会提到这一点来着。

代码中存放敏感信息

webpack的确会打包 minify 数据，但是这些数据还是公开的，并且通过 chrome 提供的 pretty print 功能，还能将其转化为可读性非常高的代码：

再不济还能 ctrl + f 不是……所以任何的 access token 都不能直接存放在JS文件中。

Cross-site Request Forgery

跨站请求伪造 CSRF 也是一个比较常见的攻击方式了，当然，这种防御只在客户端进行时没有任何意义的，必须同时从前端和后端进行，具体验证方式前端与后端统一即可。

前端可以做的就是fetch一下csrf token，随后加到post的header，如：

    let csrfToken = '';

    const fetchGetResponse = await fetch(`$domainUrl$url`, 
        method: 'GET',
        headers: 
            Accept: "application/json"
        

        const parsedResponse = await fetchGetResponse.json();
        csrfToken = parsedResponse.csrfToken;

    )

    let fetchPostResponse = await fetch(`$domainUrl$url`, 
        method: 'POST',
        headers: 
            Accept: "application/json",
            "Content-Type": "application/json",
            "csrf-token": csrfToken
        ,
        body: JSON.stringify(recipient:recipient,amount:amount,greeting:greeting)
    )

这是一个在 axios interceptor 中很适用的代码呢

过期的组件

这个也很简单来着……下一个不支持的 npm 包，然后跑一下 npm audit 就知道有多少个问题了。

Reference

• Cross Site Scripting (XSS) Attacks in React

• codebashing - React

  这个是公司账号给的权限，就不放链接了，直接搜索codebashing吧