React(XSS)

方方老师的解释

官方解释

Cross-site scripting (XSS) is a type of computer security vulnerability typically found in web applications. XSS enables attackers to inject client-side scripts into web pages viewed by other users. A cross-site scripting vulnerability may be used by attackers to bypass access controls such as the same-origin policy.

概要

• XSS漏洞的原理是在一个用户申请页面中注入恶性脚本，用户发送申请后，潜伏在页面中的恶性脚本便起效破坏公开页面。(比如我发表评论"这条新闻很有意思"，发送后别人看到的可能是"你们都是大笨猪")
• XSS漏洞可以被用来躲避“同源策略”等监控设施。

预防

jsx可以有效预防XSS

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered.

• 预防原理
  jsx保证{}中嵌入的内容一律被转化为字符串类型

var content='<strong>content</strong>';

React.render(
    <div>{content}</div>,
    document.body
);

输出内容为

<strong>content</strong>

dangerouslySetInnerHTML

如果你想在jsx中放入一个html标签，有两种方法

• 不用{}(不推荐)

render() {
        return (
            <div>
            <strong>ddd</strong>
            </div>
            );
        } 
    }

• 使用dangerouslySetInnerHTML

function createMarkup() {
  return {__html: '<strong>ss</strong>'};
}

function Bpp() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}