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

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

리액트 튜토리얼에서 읽었어요이것은 무엇을 의미합니까?

리액션은 안전합니다.HTML 문자열은 생성되지 않으므로 XSS 보호가 기본입니다.

React가 안전할 경우 XSS 공격은 어떻게 작동합니까?이 안전은 어떻게 달성됩니까?

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

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내용에 Javascript가 포함되어 있지 않은지 확인해야 합니다.리액트는 여기서 아무것도 해줄 수 없어

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 사용: 코드

"실행 코드 스니펫" -> "내 웹사이트"를 클릭하여 결과를 확인합니다.

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 부호화 데이터 사용:

"실행 코드 스니펫" -> "내 웹사이트"를 클릭하여 결과를 확인합니다.

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>

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

• React 스크립트 주입 결함 이용JS 앱

• React.js 응용 프로그램의 가장 일반적인 XSS 취약성

• 대응이 담당하는 XSS 취약성 보호의 크기

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

• React에서의 XSS 회피는 여전히 어렵다

• 반응에서의 마크다운을 통한 XSS 회피

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

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

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

이 문자열을 반응으로 표현하려고 하면

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

당신은 말 그대로 페이지에 있는 모든 문자열을 볼 수 있을 것입니다.<span>요소 태그브라우저에 표시됩니다.<img src="javascript:alert('XSS!')" />

소스 html을 보면

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

다음은 XSS 공격이란 무엇입니까?

React는 기본적으로 렌더링 함수에 직접 요소를 만들지 않는 한 마크업을 삽입할 수 없도록 만듭니다.이러한 렌더링을 가능하게 하는 기능을 가지고 있다고 하는 것.dangerouslySetInnerHTML...자세한 내용은 이쪽입니다.

---

편집:

주의할 점은 React가 빠져나가는 것을 피할 수 있는 방법이 있다는 것입니다.또 하나의 일반적인 방법은 사용자가 컴포넌트에 소품을 정의하는 것입니다.사용자의 입력 데이터를 소품으로 확장하지 마십시오!

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