React开发踩坑总结（持续更新）_react踩过的坑

this迷失

由于React开发的灵活性，在组件属性传递时，操作函数也常常作为属性被传递进去。由于未使用使用箭头函数造成函数在执行时根据上下文确定this指针的值，常常造成this is undefined的问题。

import React, {
    Component } from 'react';

export default Button extends Component {
   
	handleClick = () => {
   
		const {
    onClick } = this.props
		if (onClick) {
   
			onClick()
		}
	}
	render () {
   
		return <button onClick={
   onClick}>确认</button>
	}
}
// onClick作为属性传递是特别需要注意，当函数内部使用this指针的值时，有可能会存在this迷失的问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

DOM XSS

在前端的server进行html文件的拼装时，尤其是需要函数写入script标签的内容时需要特别注意，需要对写入的内容做校验，如果存在html语义标签时可能存在DOM XSS的风险。

const jsContent = fetchFromServer()
// ejs进行内容写入
<script>
window.globalVar = JSON.stringify(jsContent)
</script>
// 此时需要注意如果jsContent包含html语义标签时可能会造成漏洞，如jsContent = {name: '<script>测试漏洞</script>'}, 组装好的html文件放回前端时就会执行报错

// 使用htmlEncode对html语义内容进行encode
const htmlEncode = (html) => {
   
	return html.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/'/g, '&#39;').
1
2
3
4
5
6
7
8
9
10