React가 XSS로 보호된다는 것은 무엇을 의미합니까?

React가 XSS로 보호된다는 것은 무엇을 의미합니까?

---

나는 React 튜토리얼에서 이것을 읽었습니다. 이것은 무엇을 의미 하는가?

React는 안전합니다. HTML 문자열을 생성하지 않으므로 XSS 보호가 기본값입니다.

React가 안전하다면 XSS 공격은 어떻게 작동합니까? 이 안전은 어떻게 달성됩니까?

---

ReactJS는 설계 상 매우 안전합니다.

1. 뷰의 문자열 변수는 자동으로 이스케이프됩니다.
2. JSX를 사용하면 악성 코드를 포함 할 수있는 문자열이 아닌 이벤트 핸들러로 함수를 전달합니다.

따라서 이와 같은 일반적인 공격은 작동하지 않습니다.

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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

하지만 ...

❗❗❗ 경고 ❗❗❗

React에서 직접 처리해야하는 XSS 공격 벡터가 아직 있습니다!

1. XSS를 통해 dangerouslySetInnerHTML

사용할 때 dangerouslySetInnerHTML콘텐츠에 자바 스크립트가 포함되어 있지 않은지 확인해야합니다. React는 여기서 아무것도 할 수 없습니다.

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"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

2. a.href 속성을 통한 XSS

예 1 : javascript : code 사용

결과를 보려면 "Run code snippet"-> "My Website"를 클릭하십시오.

const userWebsite = "javascript:alert('Hacked!');";

class UserProfilePage extends React.Component {
  render() {
    return (
      <a href={userWebsite}>My Website</a>
    )
  }
}

ReactDOM.render(<UserProfilePage />, document.querySelector("#app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

예 2 : base64로 인코딩 된 데이터 사용 :

결과를 보려면 "Run code snippet"-> "My Website"를 클릭하십시오.

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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

3. 공격자가 제어하는 ​​소품을 통한 XSS

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"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

더 많은 리소스가 있습니다.

• ReactJS 앱에서 스크립트 주입 결함 악용

• React.js 애플리케이션에서 가장 일반적인 XSS 취약점

• React는 XSS 취약성 보호에 얼마나 많은 책임이 있습니까?

  • https://github.com/facebook/react/issues/3473#issuecomment-90594748
  • https://github.com/facebook/react/issues/3473#issuecomment-91349525

• React에서 XSS를 피하는 것은 여전히 ​​어렵습니다

• React에서 Markdown을 통해 XSS 피하기

---

React는 자동으로 변수를 이스케이프합니다 ... 그것은 악성 자바 스크립트로 문자열 HTML을 통한 XSS 주입을 방지합니다 .. 당연히 입력은 이것과 함께 삭제됩니다.

예를 들어이 문자열이 있다고 가정 해 보겠습니다.

var htmlString = '<img src="javascript:alert('XSS!')" />';

이 문자열을 반응으로 렌더링하려고하면

render() {
    return (
        <div>{htmlString}</div>
    );
}

you will literally see on the page the whole string including the <span> element tag. aka in the browser you will see <img src="javascript:alert('XSS!')" />

if you view the source html you would see

<span>"<img src="javascript:alert('XSS!')" />"</span>

Here is some more detail on what an XSS attack is

React basically makes it so you can't insert markup unless you create the elements yourself in the render function... that being said they do have a function that allows such rendering its called dangerouslySetInnerHTML... here is some more detail about it

---

Edit:

Few things to note, there are ways to get around what React escapes. One more common way is when users define props to your component. Dont extend any data from user input as props!

참고URL : https://stackoverflow.com/questions/33644499/what-does-it-mean-when-they-say-react-is-xss-protected