浅谈 React 中的 XSS 攻击

// 某网站具有搜索功能，该功能通过 URL 参数接收用户提供的搜索词：https://xxx.com/search?query=123// 服务器在对此 URL 的响应中回显提供的搜索词：<p>您搜索的是: 123</p>// 如果服务器不对数据进行转义等处理，则攻击者可以构造如下链接进行攻击：https://xxx.com/search?query=<img src="empty.png" onerror ="alert('xss')">// 该 URL 将导致以下响应，并运行 alert('xss')：<p>您搜索的是: <img src="empty.png" onerror ="alert('xss')"></p>// 如果有用户请求攻击者的 URL ，则攻击者提供的脚本将在用户的浏览器中执行。

// 某个评论页，能查看用户评论。// 攻击者将恶意代码当做评论提交，服务器没对数据进行转义等处理// 评论输入：<textarea>  <img src="empty.png" onerror ="alert('xss')"></textarea>// 则攻击者提供的脚本将在所有访问该评论页的用户浏览器执行

for (index = match.index; index < str.length; index++) {  switch (str.charCodeAt(index)) {    case 34: // "      escape = '&quot;';      break;    case 38: // &      escape = '&amp;';      break;    case 39: // '      escape = '&#x27;';      break;    case 60: // <      escape = '&lt;';      break;    case 62: // >      escape = '&gt;';      break;    default:      continue;    }  }

// 一段恶意代码<img src="empty.png" onerror ="alert('xss')"> // 转义后输出到 html 中&lt;img src=&quot;empty.png&quot; onerror =&quot;alert(&#x27;xss&#x27;)&quot;&gt; 

// 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'     }  ...}

const storedData = `{  "ref":null,  "type":"body",  "props":{  "dangerouslySetInnerHTML":{  "__html":"<img src=\"empty.png\" onerror =\"alert('xss')\"/>"      }  }}`;// 转成 JSONconst parsedData = JSON.parse(storedData);// 将数据渲染到页面render () {  return <span> {parsedData} </span>; }

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.

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;}

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;}

// 用户的输入const userProvidePropsString = `{"dangerouslySetInnerHTML":{"__html":"<img onerror='alert(\"xss\");' src='empty.png' />"}}"`;// 经过 JSON 转换const userProvideProps = JSON.parse(userProvidePropsString);// userProvideProps = {//   dangerouslySetInnerHTML: {//     "__html": `<img onerror='alert("xss");' src='empty.png' />`//      }// };render() {     // 出于某种原因解析用户提供的 JSON 并将对象作为 props 传递    return <div {...userProvideProps} /> }

const userWebsite = "javascript:alert('xss');";<a href={userWebsite}></a>