리액트에서 xss 공격을 처리하는 다양한 방법 (with TestCode)

 
// escape-html에서 코드를 복사하고 수정한다.
/**
 * Module variables.
 * @private
 */
 
import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
 
const matchHtmlRegExp = /["'&<>]/;
 
/**
 * 주어진 HTML 문자열에서 특수문자와 HTML 엔티티를 이스케이프 처리합니다.
 *
 * @param  {string} string 나중에 삽입하기 위해 이스케이프할 HTML 문자열
 * @return {string}
 * @public
 */
 
function escapeHtml(string: string) {
  if (__DEV__) {
    checkHtmlStringCoercion(string);
  }
  const str = '' + string;
  const match = matchHtmlRegExp.exec(str);
 
  if (!match) {
    return str;
  }
 
  let escape;
  let html = '';
  let index;
  let lastIndex = 0;
 
  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;'; // escape-html에서 수정됨; 이전에는 '&#39'였음
        break;
      case 60: // <
        escape = '&lt;';
        break;
      case 62: // >
        escape = '&gt;';
        break;
      default:
        continue;
    }
 
    if (lastIndex !== index) {
      html += str.slice(lastIndex, index);
    }
 
    lastIndex = index + 1;
    html += escape;
  }
 
  return lastIndex !== index ? html + str.slice(lastIndex, index) : html;
}
// escape-html에서 복사한 코드 끝
 
/**
 * 스크립팅 공격을 방지하기 위해 텍스트를 이스케이프합니다.
 *
 * @param {*} text 이스케이프할 텍스트 값.
 * @return {string} 이스케이프된 문자열.
 */
function escapeTextForBrowser(text: string | number | boolean): string {
  if (
    typeof text === 'boolean' ||
    typeof text === 'number' ||
    typeof text === 'bigint'
  ) {
    // 이 단축 처리는 특수문자가 절대 없을 것으로 알려진 타입의 성능을 도와줍니다.
    // 특히 이 함수가 숫자 DOM ID에 자주 사용되기 때문입니다.
    return '' + (text: any);
  }
  return escapeHtml(text);
}
 
export default escapeTextForBrowser;
 
 

switch (str.charCodeAt(index)) {
  case 34:
    escape = '"'
    break // "  → "
  case 38:
    escape = '&'
    break // &  → &
  case 39:
    escape = '''
    break // '  → '
  case 60:
    escape = '<'
    break // <  → &lt;
  case 62:
    escape = '&gt;'
    break // >  → &gt;
}

describe('escapeTextForBrowser', () => {
  // 앰퍼샌드(&)가 텍스트 내용으로 전달될 때 이스케이프 된다
  it('ampersand is escaped when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{'&'}</span>)
    expect(response).toMatch('<span>&amp;</span>')
  })
 
  // 큰따옴표(")가 텍스트 내용으로 전달될 때 이스케이프 된다
  it('double quote is escaped when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{'"'}</span>)
    expect(response).toMatch('<span>&quot;</span>')
  })
 
  // 작은따옴표(')가 텍스트 내용으로 전달될 때 이스케이프 된다
  it('single quote is escaped when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{"'"}</span>)
    expect(response).toMatch('<span>&#x27;</span>')
  })
 
  // '>' 문자가 텍스트 내용으로 전달될 때 이스케이프 된다
  it('greater than entity is escaped when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{'>'}</span>)
    expect(response).toMatch('<span>&gt;</span>')
  })
 
  // '>' 문자가 텍스트 내용으로 전달될 때 이스케이프 된다
  it('lower than entity is escaped when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{'<'}</span>)
    expect(response).toMatch('<span>&lt;</span>')
  })
 
  // 숫자가 텍스트 내용으로 올바르게 전달된다.
  it('number is correctly passed as text content', () => {
    const response = ReactDOMServer.renderToString(<span>{42}</span>)
    expect(response).toMatch('<span>42</span>')
  })
 
  // 숫자가 문자열로 변환되어 이스케이프 된다
  it('number is escaped to string when passed as text content', () => {
    const response = ReactDOMServer.renderToString(<img data-attr={42} />)
    expect(response).toMatch('<img data-attr="42"/>')
  })
 
  // 스크립트 태그를 나타내는 텍스트 내용이 이스케이프 된다
  it('escape text content representing a script tag', () => {
    const response = ReactDOMServer.renderToString(
      <span>{'<script type=\'\' src=""></script>'}</span>,
    )
    expect(response).toMatch(
      '<span>&lt;script type=&#x27;&#x27; ' + 'src=&quot;&quot;&gt;&lt;/script&gt;</span>',
    )
  })
})

 
const isJavaScriptProtocol =
  /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i;
 
function sanitizeURL<T>(url: T): T | string {
  // 여기에는 심볼이 있어서는 안 됩니다. 다른 곳에서 필터링되기 때문입니다.
  if (isJavaScriptProtocol.test('' + (url: any))) {
    // 부작용을 일으키지 않고 방문 시 에러를 던지는 다른 javascript: URL을 반환합니다.
    return "javascript:throw new Error('React has blocked a javascript: URL as a security precaution.')";
  }
  return url;
}
 
export default sanitizeURL;

// A javascript: URL can contain leading C0 control or \u0020 SPACE,
// and any newline or tab are filtered out as if they're not part of the URL.
// https://url.spec.whatwg.org/#url-parsing
// Tab or newline are defined as \r\n\t:
// https://infra.spec.whatwg.org/#ascii-tab-or-newline
// A C0 control is a code point in the range \u0000 NULL to \u001F
// INFORMATION SEPARATOR ONE, inclusive:
// https://infra.spec.whatwg.org/#c0-control-or-space
 
const isJavaScriptProtocol =
  /^[\u0000-\u001F ]*j[\r\n\t]*a[\r\n\t]*v[\r\n\t]*a[\r\n\t]*s[\r\n\t]*c[\r\n\t]*r[\r\n\t]*i[\r\n\t]*p[\r\n\t]*t[\r\n\t]*\:/i

// 1. 선행 공백과 제어문자
' javascript:alert(1)'
 
// 2. 문자 사이 개행
'ja\r\nva\r\nscr\r\nipt:alert(1)'
 
// 3. 탭 문자 혼합
'j\ta\tv\ta\ts\tc\tr\ti\tp\tt:alert(1)'
 
// 4. C0 제어 문자
'\u0001\u0002javascript:alert(1)'
 
// 5. 대소문자 혼합
'JAVASCRIPT:alert(1)'
 
// 6. 복합 우회
' \t\r\nJ\r\na\tv\r\nA\tS\tC\tR\tI\tP\tT:alert(1)'

describe('ReactDOMServerIntegration - Untrusted URLs', () => {
  //javascript라는 단어가 포함된 일반 HTTP 링크는 정상적으로 렌더링됨
  itRenders('a http link with the word javascript in it', async (render) => {
    const e = await render(<a href="http://javascript:0/thisisfine">Click me</a>)
    expect(e.tagName).toBe('A')
    expect(e.href).toBe('http://javascript:0/thisisfine')
  })
 
  // javascript: 프로토콜을 사용하는 href는 안전한 URL로 대체됨
  itRenders('a javascript protocol href', async (render) => {
    const e = await render(
      <div>
        <a href="javascript:notfine">p0wned</a>
        <a href="javascript:notfineagain">p0wned again</a>
      </div>,
    )
    expect(e.firstChild.href).toBe(EXPECTED_SAFE_URL)
    expect(e.lastChild.href).toBe(EXPECTED_SAFE_URL)
  })
 
  // 다양한 HTML 태그에서 javascript: 프로토콜이 모두 무해화 처리됨
  itRenders('sanitizes on various tags', async (render) => {
    const aElement = await render(<a href="javascript:notfine" />)
    expect(aElement.href).toBe(EXPECTED_SAFE_URL)
 
    const objectElement = await render(<object data="javascript:notfine" />)
    expect(objectElement.data).toBe(EXPECTED_SAFE_URL)
 
    const embedElement = await render(<embed src="javascript:notfine" />)
    expect(embedElement.src).toBe(EXPECTED_SAFE_URL)
  })
 
  itRenders('passes through data on non-object tags', async (render) => {})
 
  // 선행 공백과 제어문자가 포함된 javascript: 프로토콜이 차단됨
  itRenders('a javascript protocol with leading spaces', async (render) => {
    const e = await render(<a href={'  \t \u0000\u001F\u0003javascript\n: notfine'}>p0wned</a>)
    expect(e.href).toBe(EXPECTED_SAFE_URL)
  })
 
  // 개행문자와 대소문자 혼합된 javascript: 프로토콜이 차단됨
  itRenders(
    'a javascript protocol with intermediate new lines and mixed casing',
    async (render) => {
      const e = await render(<a href={'\t\r\n Jav\rasCr\r\niP\t\n\rt\n:notfine'}>p0wned</a>)
      expect(e.href).toBe(EXPECTED_SAFE_URL)
    },
  )
})

function setProp(
  domElement: Element,
  tag: string,
  key: string,
  value: mixed,
  props: any,
  prevValue: mixed,
): void

switch (key) {
  case 'className':
  case 'tabIndex': // ...
  case 'dir': // ...
  case 'role': // ..
  case 'viewBox': //...
  case 'dangerouslySetInnerHTML':
 
  // 그 외 많은 case
}

  case 'dangerouslySetInnerHTML': {
    // 1. null 체크
    if (value != null) {
      // 2. 형식 검증
      if (typeof value !== 'object' || !('__html' in value)) {
        throw new Error('`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ')
      }
 
      // 3. html 추출
      const nextHtml: any = value.__html
 
      // 4. html null 체크
      if (nextHtml != null) {
        // 5. children 충돌 검사
        if (props.children != null) {
          throw new Error('Can only set one of `children` or `props.dangerouslySetInnerHTML`.')
        }
 
        // 6. 최종 dom 설정
        domElement.innerHTML = nextHtml
      }
    }
    break
  }

// 에러를 반환하는 경우들
<div dangerouslySetInnerHTML="<script>alert(1)</script>" />           // 문자열
<div dangerouslySetInnerHTML={{content: "<script>alert(1)</script>"}} /> // 잘못된 키
<div dangerouslySetInnerHTML={{html: "<script>alert(1)</script>"}} />     // 잘못된 키
<div dangerouslySetInnerHTML=({__html: "<script>alert(1)</script>"}) />   // 함수 호출
<div dangerouslySetInnerHTML={{__html: "<script>alert(1)"}}> // children 혼합
  Safe content
</div>
 
// 올바른 형식
<div dangerouslySetInnerHTML={{__html: "<script>alert(1)</script>"}} />
<div dangerouslySetInnerHTML={null} /> // 아무것도 렌더링되지 않는 안전한 형태