正文

一些react项目中可能存在的安全隐患(代码片段)

GoldenaArcher  GoldenaArcher  2022-12-03  219

关键词：

一些 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吧

功能强大，但因安全隐患被企业禁用的python内置函数(代码片段)

...或项目出于安全考虑，禁止使用eval()函数，会在一些安全相关的扫描校验中进行识别和拦截，杜绝使用。究竟eval()函数强大在哪？又有什么安全隐患࿱ 查看详情

不同类型跨链桥中可能存在的安全隐患

到目前为止，区块链市场中已经出现了100多条不同的公链，一个多链的生态已经逐渐形成。在多链生态下，一个促进不同链之间的信息交流的机制——跨链桥就成为了区块链市场中的新宠，但随之而来的，却... 查看详情

浅谈4g时代智能手机存在哪些隐患

...4G时代也暗藏全新的安全隐患。在4G超速网络条件之下，一些原本难以窃取的用户隐私信息，以及全新的木马病毒攻击方式都将成为可能!安全防御指出，在4G时代，超级手机木马很有可能大规模涌现，智能手机作为随身设备，甚... 查看详情

[转帖]bmc安全隐患(代码片段)

...务器岌岌可危https://zhuanlan.kanxue.com/article-8006.htm之前有vt-x可能有隐患现在看起来BMC也就是IPMI也有隐患...感觉安全问题就是水桶任何一个地方出问题满盘皆输..据美国科技媒体ZDNet援引一份报告内容显示，当裸金属（bare-metal）云服... 查看详情

高并发下的static类成员可能存在安全隐患

有一个网友在高并发下使用下面的日期转换工具类时，遇到的问题publicclassDateUtil{privateDateUtil(){}privatestaticfinalDateFormatDATE_FORMAT=newSimpleDateFormat("yyyy-MM-ddHH:mm:ss");publicstaticDateparse(Stringdate)throwsParseExcept 查看详情

机房存在哪些安全隐患？需要排查哪些地方？

前言：机房配电柜、配电箱经常会出现一些问题，而大多数问题的根源都是在安装过程中操作不当，导致问题频发产生严重的后果，其实配电柜、配电箱的安装有多“禁忌”以及不好的地方需要注意，了解配电柜、配电箱的安装... 查看详情

react开启一个项目(代码片段)

...新要求，大概是他新加的内容使用到了webpack高版本中的一些内容，所以使用时注意你的node版本和webpack版本，可能有一些版本要求）就是这么的简单^-^ ^-^ 查看详情

怎么删除〔系统检测发现您正在使用低版本ie浏览器,可能存在安全隐患,强烈推荐您在windows〕

怎么删除呀？系统检测发现您正在使用低版本IE浏览器，可能存在安全隐患，强烈推荐您在windows系统使用更快速!更安全!更稳定!的浏览器FireFox火狐浏览器,点击下载电脑里多个这个急死了～～～～～谢谢前段时间不幸"中弹&quo... 查看详情

c++11---智能指针(代码片段)

...3;+中有些情况下，即使成员进行了释放也可能存在一些安全隐患，查看详情

cookie安全小知识(代码片段)

...息的重要载体，在为我们开发提供方便的同时，也埋下了一些安全隐患。如果在使用过程中不注意，就有可能被图谋不轨者利用起来，造成安全事故。二、cookie的同源策略浏览器每次发送请求时，会根据请求的地址，来判断... 查看详情

浅谈你知道手机软件存在的安全隐患吗

互联网高速发展的当下，手机的安全威胁与日俱增，手机安全问题一度成为用户关注的焦点。在开展的“用户最关注的手机安全隐患”调研中显示，不少手机用户遭遇了手机吸费和流量等问题，垃圾短信、骚扰电话更是防不胜防... 查看详情

容器安全风险and容器逃逸漏洞实践(代码片段)

...入第三方组件的同时也大量引入了风险。恶意镜像：一些公共镜像仓库中可能存在一些恶意镜像，如果使用了这些镜像或把这些镜像作为基础镜像，就会产生相应的风险。敏感信息泄露：为了开发、调试方便，... 查看详情

mern-stack使用react-router用户身份验证而不使用redux(代码片段)

我正在尝试为我的应用程序实现一些身份验证，但是，我有一个简单的问题。我在后端设置了一些基本身份验证，它设置一个令牌并将其发送到前端，并将其保存在cookie中。我读到，只要我正在进行api通话，令牌就会被发送到服... 查看详情

react在工作中对于customreacthooks一些思考(代码片段)

...定义hook。于是，今天就自己来总结一下对于CustomReactHooks一些思考。自定义Hook以下来自React官网关于自定义Hook的介绍：与React组件不同的是，自定义Hook不需要具有特殊的标识。我们可以查看详情

react在工作中对于customreacthooks一些思考(代码片段)

多线程的安全隐患

资源共享1块资源可能会被多个线程共享，也就是多个线程可能会访问同一块资源比如多个线程访问同一个对象、同一个变量、同一个文件当多个线程访问同一块资源时，很容易引发数据错乱和数据安全问题安全隐患分析：... 查看详情

你了解多线程自旋锁互斥锁递归锁等锁吗？(代码片段)

正文：首先看一下问题引出,先看一些经典的问题.多线程的隐患首先我们利用多线程的话肯定是好处多多,因为我们可以同时去做一些事情,大大的提高了效率.像我们下载视频的时候就可以同时下载多个视频,这样是节省了很多... 查看详情

全球云计算服务存在的七大安全隐患

...据，他甚至能够知道全国胸最哪个小的省。因为互联网的存在，这个世界总是充满惊奇，但是凡事有利则有查看详情