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迷失的问题
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, '&').replace(/"/g, '"').replace(/'/g, ''').