react textarea 空格为什么不换行_React 怎么实现预防XSS 攻击的
本文首发于政采云前端团队博客:浅谈 React 中的 XSS 攻击
https://www.zoo.team/article/xss-in-react
前言
前端一般会面临 XSS 这样的安全风险,但随着 React 等现代前端框架的流行,使我们在平时开发时不用太关注安全问题。以 React 为例,React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度,看看 React 做了哪些事情来实现这种安全性的。
XSS 攻击是什么
Cross-Site Scripting(跨站脚本攻击)简称 XSS,是一种代码注入攻击。XSS 攻击通常指的是利用网页的漏洞,攻击者通过巧妙的方法注入 XSS 代码到网页,因为浏览器无法分辨哪些脚本是可信的,导致 XSS 脚本被执行。XSS 脚本通常能够窃取用户数据并发送到攻击者的网站,或者冒充用户,调用目标网站接口并执行攻击者指定的操作。
XSS 攻击类型
反射型 XSS
- XSS 脚本来自当前 HTTP 请求
- 当服务器在 HTTP 请求中接收数据并将该数据拼接在 HTML 中返回时,例子:
// 某网站具有搜索功能,该功能通过 URL 参数接收用户提供的搜索词:https://xxx.com/search?query=123// 服务器在对此 URL 的响应中回显提供的搜索词:<p>您搜索的是: 123p>// 如果服务器不对数据进行转义等处理,则攻击者可以构造如下链接进行攻击:https://xxx.com/search?query=// 该 URL 将导致以下响应,并运行 alert('xss'):<p>您搜索的是: <img src="empty.png" onerror ="alert('xss')">p>// 如果有用户请求攻击者的 URL ,则攻击者提供的脚本将在用户的浏览器中执行。
存储型 XSS
- XSS 脚本来自服务器数据库中
- 攻击者将恶意代码提交到目标网站的数据库中,普通用户访问网站时服务器将恶意代码返回,浏览器默认执行,例子:
// 某个评论页,能查看用户评论。// 攻击者将恶意代码当做评论提交,服务器没对数据进行转义等处理// 评论输入:<textarea> <img src="empty.png" onerror ="alert('xss')">textarea>// 则攻击者提供的脚本将在所有访问该评论页的用户浏览器执行
DOM 型 XSS
该漏洞存在于客户端代码,与服务器无关
- 类似反射型,区别在于 DOM 型 XSS 并不会和后台进行交互,前端直接将 URL 中的数据不做处理并动态插入到 HTML 中,是纯粹的前端安全问题,要做防御也只能在客户端上进行防御。
React 如何防止 XSS 攻击
无论使用哪种攻击方式,其本质就是将恶意代码注入到应用中,浏览器去默认执行。React 官方中提到了 React DOM 在渲染所有输入内容之前,默认会进行转义。它可以确保在你的应用中,永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串,因此恶意代码无法成功注入,从而有效地防止了 XSS 攻击。我们具体看下:
自动转义
React 在渲染 HTML 内容和渲染 DOM 属性时都会将 "'&<>
这几个字符进行转义,转义部分源码如下:
for (index = match.index; index switch (str.charCodeAt(index)) { case 34: // " escape = '"'; break; case 38: // & escape = '&'; break; case 39: // ' escape = '''; break; case 60: // < escape = '>'; break; case 62: // > escape = ';break;default:continue; } }
这段代码是 React 在渲染到浏览器前进行的转义,可以看到对浏览器有特殊含义的字符都被转义了,恶意代码在渲染到 HTML 前都被转成了字符串,如下:
// 一段恶意代码"empty.png" onerror ="alert('xss')"> // 转义后输出到 html 中>img src="empty.png" onerror ="alert('xss')"
这样就有效的防止了 XSS 攻击。
JSX 语法
JSX 实际上是一种语法糖,Babel 会把 JSX 编译成 React.createElement()
的函数调用,最终返回一个 ReactElement
,以下为这几个步骤对应的代码:
// JSXconst element = ( <h1 className="greeting"> Hello, world!h1>);// 通过 babel 编译后的代码const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!');// React.createElement() 方法返回的 ReactElementconst element = { $$typeof: Symbol('react.element'), type: 'h1', key: null, props: { children: 'Hello, world!', className: 'greeting' } ...}
我们可以看到,最终渲染的内容是在 Children 属性中,那了解了 JSX 的原理后,我们来试试能否通过构造特殊的 Children 进行 XSS 注入,来看下面一段代码:
const storedData = `{ "ref":null, "type":"body", "props":{ "dangerouslySetInnerHTML":{ "__html":"" } }}`;// 转成 JSONconst parsedData = JSON.parse(storedData);// 将数据渲染到页面render () { return <span> {parsedData} span>; }
这段代码中, 运行后会报以下错误,提示不是有效的 ReactChild
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {ref, type, props}). If you meant to render a collection of children, use an array instead.
那究竟是哪里出问题了?我们看一下 ReactElement 的源码:
const symbolFor = Symbol.for;REACT_ELEMENT_TYPE = symbolFor('react.element');const ReactElement = function(type, key, ref, self, source, owner, props) { const element = { // 这个 tag 唯一标识了此为 ReactElement $$typeof: REACT_ELEMENT_TYPE, // 元素的内置属性 type: type, key: key, ref: ref, props: props, // 记录创建此元素的组件 _owner: owner, }; ... return element;}
注意到其中有个属性是 $$typeof
,它是用来标记此对象是一个 ReactElement
,React 在进行渲染前会通过此属性进行校验,校验不通过将会抛出上面的错误。React 利用这个属性来防止通过构造特殊的 Children 来进行的 XSS 攻击,原因是 $$typeof
是个 Symbol 类型,进行 JSON 转换后会 Symbol 值会丢失,无法在前后端进行传输。如果用户提交了特殊的 Children,也无法进行渲染,利用此特性,可以防止存储型的 XSS 攻击。
在 React 中可引起漏洞的一些写法
使用 dangerouslySetInnerHTML
dangerouslySetInnerHTML
是 React 为浏览器 DOM 提供 innerHTML
的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为很容易使用户暴露在 XSS 攻击下,因为当使用 dangerouslySetInnerHTML
时,React 将不会对输入进行任何处理并直接渲染到 HTML 中,如果攻击者在 dangerouslySetInnerHTML 传入了恶意代码,那么浏览器将会运行恶意代码。看下源码:
function getNonChildrenInnerMarkup(props) { const innerHTML = props.dangerouslySetInnerHTML; // 有dangerouslySetInnerHTML属性,会不经转义就渲染__html的内容 if (innerHTML != null) { if (innerHTML.__html != null) { return innerHTML.__html; } } else { const content = props.children; if (typeof content === 'string' || typeof content === 'number') { return escapeTextForBrowser(content); } } return null;}
所以平时开发时最好避免使用 dangerouslySetInnerHTML
,如果不得不使用的话,前端或服务端必须对输入进行相关验证,例如对特殊输入进行过滤、转义等处理。前端这边处理的话,推荐使用白名单过滤 (https://jsxss.com/zh/index.html),通过白名单控制允许的 HTML 标签及各标签的属性。
通过用户提供的对象来创建 React 组件
举个例子:
// 用户的输入const userProvidePropsString = `{"dangerouslySetInnerHTML":{"__html":""}}"`;// 经过 JSON 转换const userProvideProps = JSON.parse(userProvidePropsString);// userProvideProps = {// dangerouslySetInnerHTML: {// "__html": ``// }// };render() { // 出于某种原因解析用户提供的 JSON 并将对象作为 props 传递 return <div {...userProvideProps} /> }
这段代码将用户提供的数据进行 JSON 转换后直接当做 div
的属性,当用户构造了类似例子中的特殊字符串时,页面就会被注入恶意代码,所以要注意平时在开发中不要直接使用用户的输入作为属性。
使用用户输入的值来渲染 a 标签的 href 属性,或类似 img 标签的 src 属性等
const userWebsite = "javascript:alert('xss');";<a href={userWebsite}>a>
如果没有对该 URL 进行过滤以防止通过 javascript:
或 data:
来执行 JavaScript,则攻击者可以构造 XSS 攻击,此处会有潜在的安全问题。用户提供的 URL 需要在前端或者服务端在入库之前进行验证并过滤。
服务端如何防止 XSS 攻击
服务端作为最后一道防线,也需要做一些措施以防止 XSS 攻击,一般涉及以下几方面:
- 在接收到用户输入时,需要对输入进行尽可能严格的过滤,过滤或移除特殊的 HTML 标签、JS 事件的关键字等。
- 在输出时对数据进行转义,根据输出语境 (html/javascript/css/url),进行对应的转义
- 对关键 Cookie 设置 http-only 属性,JS脚本就不能访问到 http-only 的 Cookie 了
- 利用 CSP (https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP) 来抵御或者削弱 XSS 攻击,一个 CSP 兼容的浏览器将会仅执行从白名单域获取到的脚本文件,忽略所有的其他脚本 (包括内联脚本和 HTML 的事件处理属性)
总结
出现 XSS 漏洞本质上是输入输出验证不充分,React 在设计上已经很安全了,但是一些反模式的写法还是会引起安全漏洞。Vue 也是类似,Vue 做的安全措施主要也是转义,HTML 的内容和动态绑定的属性都会进行转义。无论使用 React 或 Vue 等前端框架,都不能百分百的防止 XSS 攻击,所以服务端必须对前端参数做一些验证,包括但不限于特殊字符转义、标签、属性白名单过滤等。一旦出现安全问题一般都是挺严重的,不管是敏感数据被窃取或者用户资金被盗,损失往往无法挽回。我们平时开发中需要保持安全意识,保持代码的可靠性和安全性。
小游戏
看完文章可以尝试下 XSS 的 小游戏 (https://xss-game.appspot.com/),自己动手实践模拟 XSS 攻击,可以对 XSS 有更进一步的认识。
看完两件事
如果你觉得这篇内容对你挺有启发,我想邀请你帮我两件小事1.点个「在看」,让更多人也能看到这篇内容(点了「在看」,bug -1 ?)2.关注公众号「政采云前端团队」,持续为你推送精选好文
招贤纳士
政采云前端团队(ZooTeam),一个年轻富有激情和创造力的前端团队,隶属于政采云产品研发部,Base 在风景如画的杭州。团队现有 50 余个前端小伙伴,平均年龄 27 岁,近 3 成是全栈工程师,妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵,也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外,还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战,推动并落地了一系列的内部技术产品,持续探索前端技术体系的新边界。如果你想改变一直被事折腾,希望开始能折腾事;如果你想改变一直被告诫需要多些想法,却无从破局;如果你想改变你有能力去做成那个结果,却不需要你;如果你想改变你想做成的事需要一个团队去支撑,但没你带人的位置;如果你想改变既定的节奏,将会是“5 年工作时间 3 年工作经验”;如果你想改变本来悟性不错,但总是有那一层窗户纸的模糊… 如果你相信相信的力量,相信平凡人能成就非凡事,相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程,亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程,我觉得我们该聊聊。任何时间,等着你写点什么,发给 ZooTeam@cai-inc.com
react textarea 空格为什么不换行_React 怎么实现预防XSS 攻击的相关推荐
- react textarea 空格为什么不换行_你需要的 React + TypeScript 50 条规范和经验
这篇文章没有对错之分,肯定也有不完善的地方,结合了自己日常开发和经验.可以让你书写代码更具严谨性,希望看完之后有所帮助.本文字数4000+ ,看完本文大概需半小时. 1. 注释 (1) 文件顶部的注释 ...
- html textarea换行和dom换行
从事开发已经两年多了,但是还是不会发现问题找原因,可能是自己一直在学校养成的习惯吧,不过最近在葛经理的带领下开始学会找原因了,而且发现自己变得更成熟了. 现在讲讲textarea和dom的换行吧,我们 ...
- PHP清除HTML代码、空格、回车换行符的函数
清除HTML代码.空格.回车换行符的函数如下 function DeleteHtml($str) { $str = trim($str); $str = strip_tags($str,"& ...
- js 用replace替换空格 替换空格包含换行符 替换空格不包含换行符
第一种:替换所有的空格(包含换行符) let str = '123AD asadf asadfasf\n adf\n' let a = str.replace(/\s+/g," " ...
- Java防止Xss注入json_浅谈 React 中的 XSS 攻击
作者:陈吉 转发链接:https://mp.weixin.qq.com/s/HweEFh78WXLawyQr_Vsl5g 前言 前端一般会面临 XSS 这样的安全风险,但随着 React 等现代前端框 ...
- textarea标签中的换行与空格问题
2019独角兽企业重金招聘Python工程师标准>>> 问题描述:textarea元素中编辑带有格式的文本,无法按照原格式输出.举个例子,一个页面有textarea元素,一个div, ...
- 获取textarea标签中的换行符和空格
问题: 获取到textarea标签内的格式(换行符.空格)取到,存入数据库,展示的时候能够保留基本格式. 解决思路: IE9以上.FF.chrome的换行为\n, IE7-8的时候换行为\r\n,空格 ...
- textarea标签中的换行符和空格
问题: 获取到textarea标签内的格式(换行符.空格),存入数据库,展示的时候能够保留基本格式. 解决思路: IE9以上.FF.chrome的换行为\n, IE7-8的时候换行为\r\n,空格都为 ...
- textarea 手机端无法换行_处理textarea中的换行和空格
当我们使用 textarea 在前台编辑文字,并用 js 提交到后台的时候,空格和换行是我们最需要考虑的问题.在textarea 里面,空格和换行会被保存为/s和/n,如果我们前台输入和前台显示的文字 ...
最新文章
- 蔚来招聘|多传感器联合标定算法工程师
- 触摸屏mtp文件转c语言,F28335与上位机(触摸屏)之间的通讯遵循modbus协议使用C语言编程...
- 19道Python练习题
- 『ACM C++』 PTA 天梯赛练习集L1 | 016-017
- mysql-普通查询(General Query)慢查询(Slow Query)相关日志配置
- Hibernate基本概念
- “国家科学数据中心”联合专刊征稿
- 静态函数 静态变量和常量
- FindChildControl与FindComponent(动态创建的控件要通过Owner.FindComponent去找该控件)
- C++基础知识(七)new和delete
- cass怎么多级放坡_cass土方计算考虑放坡
- Truecrypt之死
- 算法竞赛入门经典(刘汝佳)——基础篇心得
- 我在京东这一年—张亮
- python 解压rar加密压缩包 提示缺少密码
- 实现添加数据、地图放大、缩小、漫游、全景视图、鹰眼图的操作(ICommand、ITool)...
- 计算机一级win10,Win10进入WinRE的四种方法
- 【烈日炎炎战后端】Linux(0.3万字)
- Synergy安装及使用方法
- android家庭理财系统毕业设计报告,毕业设计(论文)-基于Android的家庭理财通系统设计.doc...
热门文章
- 容斥原理学习(Hdu 4135,Hdu 1796)
- .net 中 GridViewRow使用字段名来访问数据,而不是使用索引
- freemarker 读取字符串模板,(非文件)
- wp7 手机归属地查询
- 在fvwm中将右手习惯改为左手习惯的简单办法
- perl 字符串删除末尾几个字符_Perl字符串处理函数大全
- 计算机术语的英文全称,计算机英文名词缩写
- centos java tomcat_centos配置Tomcat以指定的身份(非root)运行
- java juel表达式_activiti 自定义函数解析juel表达式
- 返回值_关于GWLP_WNDPROC的那些奇怪的返回值