XSS 반응

XSS 공격 또는 교차 사이트 스크립팅은 악성 코드가 웹 페이지에 삽입된 후 실행되는 공격 유형입니다.

이 악성 코드는 쿠키를 훔치거나 콘텐츠를 수정하거나 전체 웹 페이지를 제어할 수 있습니다.

이 기사의 내용:

공격

DOM 기반 XSS 공격

평가

HREF

dangerlySetHTML

XSS 공격으로부터 간단한 보호

React XSS 보호

공격

2012년 중반부터 연구 커뮤니티는 XSS 유형을 구성하는 데 도움이 되는 두 가지 새로운 용어를 사용하기 시작했습니다.
2012년 중반 이후의 XSS 공격 유형:

React의 DOM 기반 XSS 공격

이러한 공격은 데이터 소스가 클라이언트측에서만 제공되므로 클라이언트 교차 사이트 스크립팅의 하위 집합에 속합니다.


이 기사에서는 DOM 기반 XSS 공격의 세 가지 예를 보여드리겠습니다.eval , href 및 dangerouslySetHTML 취약점을 살펴보겠습니다.

평가

eval() 함수는 문자열을 평가하고 완료 값을 반환합니다.
eval 함수의 문제점은 내부에 악성 자바스크립트 코드를 붙여넣어 실행할 수 있다는 점입니다.
예를 들어 보겠습니다. 여기 JSX 코드의 코드 스니펫이 있습니다.

import React, { useState } from 'react';

const Eval = () => {
    const [data, setData] = useState();

    const handleType = (e) => {
        setData(e.target.value);
    };

    const handleSubmit = () => {
        eval(data);
    };

    return (
        <div>
            <p>Place this code inside input: <code>alert('Hacked')</code></p>
            <input
                type='text'
                name='firstName'
                value={data}
                onChange={(e) => handleType(e)}
            />
            <button onClick={() => handleSubmit()} className="button">Submit</button>{' '}
        </div>
    );
};

export default Eval;

그리고 아래는 코드 조각의 결과입니다.

우리는 간단한 경고 기능을 실행하기 위해 사용자의 브라우저와 사용자 입력을 사용하고 실제 생활에서 공격자는 다른 자바스크립트 악성 코드를 사용하여 웹 페이지, 쿠키에 끔찍한 것을 만들 수 있습니다.

헥사

href는 요소의 속성입니다. <a> 요소는 한 페이지에서 다른 페이지로 연결하는 데 사용되는 하이퍼링크를 정의합니다.
예를 들어 href 내부에 사용자 입력을 포함할 수 있으며 이것이 문제입니다. 아래 코드 스니펫에서 데이터 변수를 사용하여 href 속성을 채우고 데이터가 입력 요소로 채워지는 것을 볼 수 있습니다.

import React, { useState } from 'react';

const Href = () => {
    const [data, setData] = useState();
    const handleType = (e) => {
        setData(e.target.value);
    };

    return (
        <div>
            <p>Place this code inside input: <code>javascript: alert('Hacked');</code></p>
            <input
                type='text'
                name='text'
                value={data}
                onChange={(e) => handleType(e)}
            />
            <a href={data} className="button">Click Here</a>
        </div>
    );
};

export default Href;

코드 실행:

위험하게SetHTML

반응 코드에서 innerHTML 함수 대신 HTML 요소를 사용할 수 있는 HTML 코드의 속성입니다. dangerouslySetHTML의 내용은 동적이며 가상 DOM과의 비교를 건너뜁니다. 아시다시피 세 번째 XSS 취약점입니다. 아래는 코드와 실행 결과입니다.

import React from 'react';

const DangerouslySetInnerHTML = () => {

    const placeHtml = () => {

        return {

            __html: "<img onerror='alert(\"Hacked!\");' src='invalid-image' />",

        };

    };

    return (

        <div>

            <p>We inserted img inside div using dangerouslySetInnerHTML property and add js code in onerror attribute</p>

            <div dangerouslySetInnerHTML={placeHtml()} />

        </div>

    );

};

export default DangerouslySetInnerHTML;

렌더링 결과:

XSS 공격으로부터 간단한 보호

예약 문자(예: < 및 > )를 해당 문자 엔티티( < 및 > )로 바꿀 수 있습니다.
결과적으로 코드가 렌더링되고 JavaScript 코드를 실행할 수 없으며 문자 엔터티가 각각의 예약 문자로 변환됩니다.
또한 dompurify 이라는 라이브러리를 사용하여 사용자 입력을 "삭제"할 수 있습니다.

반응 XSS 보호

보시다시피 가장 취약한 곳은 입력이며 React 문서에 제어 및 제어되지 않은 구성 요소에 대한 기사가 있습니다.
아래에서 React 공식 문서의 블록 인용문을 읽을 수 있습니다.

In the form elements are either the typed ones like textarea. input or the selected one like radio buttons or checkboxes, whenever there is any change, made it is updated accordingly through some functions that update the state as well.
We recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component.
In HTML, form elements such as , , and typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().
The alternative is uncontrolled components, where form data is handled by the DOM itself.
To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref (createRef) to get form values from the DOM.

요약

교차 사이트 스크립팅을 방지하기 위해 React 애플리케이션을 보호하는 것은 한 단계 프로세스가 아닙니다. XSS 공격으로부터 React 애플리케이션을 보호하는 가장 좋은 방법은 코드베이스에서 조기에 방지하는 것입니다. 팀원을 위한 추천 목록을 만들 수 있습니다.

내 목록은 다음과 같습니다.

매우 특정한 사용 사례에서 dangerlySetHTML 및 createRef를 사용하십시오.

React로 만들 수 있으므로 DOM을 직접 변경하지 마십시오.

개인 기술을 작성하는 대신 React 기능을 사용하십시오. 문서를 읽으십시오.

보유하고 있는 모든 데이터와 소득 데이터(사용자 및 API에서)를 확인합니다

.

개인 삭제 라이브러리를 만들지 말고 신뢰할 수 있는 개발자의 다른 라이브러리 중에서 가장 좋은 것을 선택하십시오.