什么是JSX
JSX是JavaScript XML,是React提供的Syntax Sugar, 能让我们可以在JS中写html标记语言。
其表现是如何：
- 常规的html代码都可以写，可以通过{props}往html中插入变量或任意有效的JS表达式，而无须加上$
- 此外还可以插入带参数的函数{func(props)}
<h1>Hello, {getName(props)}</h1>
- JSX被编译后，是一个函数调用，返回值为JS对象，故JSX也可作为表达式，例如用于If判断
- 可以在标签中添加属性，属性值若是字符串，则加上引号，若是对象或表达式，则加上{}. ""与{}不能混用。由于JSX更贴近JS，故属性的key建议使用驼峰法写法
const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;
- 若JSX元素没有子元素/节点，可以单闭合
const element = <img src={user.avatarUrl} />;
- 可以给html添加类但class需改写成className，另外若添加自定义的要渲染的属性，最好以data-开头
JSX将XML语法加入到JavaScript中，在JS中写了JSX将会被预处理成React Element
为什么React要创建JSX：
渲染的逻辑处理与UI逻辑其实是耦合的, event, state, data互相关联，既然如此，那么就把html标记语言与逻辑处理相关的js内容放在一起，组成一个松耦合的模块，这个模块就是JSX元素
写JSX实际做了什么
首先怎么才能写JSX呢，在普通的JS文件中需引入react,reactDOM(若要对DOM进行操作)以及babel或者通过Babel在线编译
JSX其实是一个对象，而且这个对象内的值都被进行了转义(escape)，见以下的例子：
var esca = <a href='https://baidu.com'><span>5>3{true && '--this is true'}</span></a>
console.log(esca)
ReactDOM.render(
esca,
document.getElementById('root')
);
输出结果如下
JSX转义.png
什么？ 我的true呢？
让我们把代码放到Babel看下JSX生成了什么东西
//Babel输出
var esca = React.createElement(
'a',
{ href: 'https://baidu.com' },
React.createElement(
'span',
null,
'5>3 ',
true && '$gt;this is true'
)
);
可以看到react将JSX代码片段分为几块，类型(元素名), 属性值props(包含children和属性参数等), key和ref, owner和store
我们发现没有被{}包住的默认是字符串，会进行转义，而{}包住的则会被当作表达式，不被转义，由于true是真，故显示后面的值，但问题来了，若我们想在表达式里要进行转义成HTML呢？
方法一： 使用Unicode编码
var esca = <a href='https://baidu.com'><span>5>3 {true && '\u003Ethis is true'}</span></a>
//这样在表达式里也可以进行转义了
注意，若是直接使用
var esca = React.createElement('span', null, '5>3 this is true;')创建的，字符串和表达式内的均不会进行转义
方法二： 使用dangerouslySetInnerHTML
var esca = <a href='https://baidu.com'>5>3{true &&<span dangerouslySetInnerHTML={{__html: ' >this is true'}}></span>}</a>
//或者定义一个新的JS元素,将需要转义的内容放入
<AllowedHtml html={data}/>
等价于
var esca = React.createElement(
'a',
{ href: 'https://baidu.com' },
'5>3',
true && React.createElement('span', { dangerouslySetInnerHTML: { __html: ' >this is true' } })
);
方法三：在{}通过数组将字符串和表达式包裹在一起
<div>{['First ', <span>·</span>, ' Second']}</div>
此外对于某些字体图标，可以使用以下的方法
<i data-icon={String.fromCharCode( "f00f" )} />
关于JSX防范XSS攻击
XSS是跨站脚本注入攻击, 更多解释可查看这里
- 由于当你尝试通过{html}进行插入html代码时, React会自动将html转为字符串,故React可部分防止XSS攻击
例如以下代码
const username = "<img onerror='alert(\"Hacked!\")' src='invalid-image' />";
class UserProfilePage extends React.Component {
render() {
return (
<h1> Hello {username}!</h1>
);
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
显示为
xss_{}.png
- JSX中是通过传入函数作为事件处理方式，而不是传入字符串，字符串可能包含恶意代码
尽管如此，还是可以通过一些手段进行XSS攻击，如：<a href="{...}" />, <img src={...} />, <iframe src="{...} />，css注入style={...} prop，还可利用上述所说的一些方法
const aboutUserText = "<img onerror='alert(\"Hacked!\");' src='invalid-image' />";
class AboutUserComponent extends React.Component {
render() {
return (
<div dangerouslySetInnerHTML={{"__html": aboutUserText}} />
);
}
}
ReactDOM.render(<AboutUserComponent />, document.querySelector("#app"))
或者通过设置a的href为javascript:xxx
const userWebsite = "javascript:alert('Hacked!');";
class UserProfilePage extends React.Component {
render() {
return (
<a href={userWebsite}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
以及使用base64 编码的数据进行替换
const userWebsite = "data:text/html;base64,PHNjcmlwdD5hbGVydCgiSGFja2VkISIpOzwvc2NyaXB0Pg==";
class UserProfilePage extends React.Component {
render() {
const url = userWebsite.replace(/^(javascript\:)/, "");
return (
<a href={url}>My Website</a>
)
}
}
ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));
又或从用户处接受了被恶意控制的props
const customPropsControledByAttacker = {
dangerouslySetInnerHTML: {
"__html": "<img onerror='alert(\"Hacked!\");' src='invalid-image' />"
}
};
class Divider extends React.Component {
render() {
return (
<div {...customPropsControledByAttacker} />
);
}
}
ReactDOM.render(<Divider />, document.querySelector("#app"));
更多可参考
网友评论