React 보안 살펴보기

웹 해킹이라고 하기엔 뭐하지만 

기본으로 시큐어코딩을 할 수 있어야 한다고 생각한다.

 

그래서 나는 주 언어 JavaScript 이면서 흔히 쓰는 React로
시큐어코딩을 하고자 React 보안적인 부분을 살펴보려고 한다.

 

우연히 아래와 같은 블로그를 보게 되었고 React의 보안 문제를 찾아보았습니다.

https://velog.io/@badbeoti/10%EA%B0%80%EC%A7%80-%EC%98%88%EC%A0%9C%EB%A1%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EB%8A%94-react-%EB%B3%B4%EC%95%88

10가지 예제로 알아보는 react 보안

 

위에 10 가지를 읽고 저의 기준으로 중요하다고 생각하는것을 정리해봤습니다.

 

◆ Default XSS Protection with Data Binding

→ 기본적으로 react에서 {}를 사용하여 데이터를 바인딩하면, XSS 공격으로 부터 방어하기 위해
    자동적으로 값이 이스케이프 된다.

    이 보안책은 오로지 testcontent 를 렌더링할 때 에만 일어나며, 여타 다른 HTML attributes를
    렌더링 시에는 일어나지 않는다.

◆ Rendering HTML

→ 하지만 일반적으로 코드에서 HTML를 설정하는 것은

     XSS 공격에 쉽게 노출될 수 있기 때문에 위험합니다.

 

    따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해

    dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다.

    dangerouslySetInnerHTML prop에 지정되기 전에 모든 값들을
    dompurify와 같은 sanitization library를 사용하여 sanitize해주어야 합니다.

 

 

◆ Server-side Rendering

→ ReactDOMServer.renderToString()와 ReactDOMServer.renderToStaticMarkup()와 같은
     서버사이드 렌더링 함수를 사용하면, 자동적으로 contents를 이스케이프하게 됩니다.
     hydration을 위해 클라이언트로 string을 보내기 전 렌더링에 연결하면 안됩니다.

   XSS를 피하기 위해 sanitize가 되지 않은 데이터를 내보내서는 안됩니다.
   renderToStaticMarkup()로 출력해 XSS 공격을 회피할 수 있습니다.:

app.get("/", function (req, res) {
  return res.send(
    ReactDOMServer.renderToStaticMarkup(
      React.createElement("h1", null, "Hello World!")
    ) + otherData
  );
});

 

 

◆ Server-side Rendering

→ ReactDOMServer.renderToString()와 ReactDOMServer.renderToStaticMarkup()와 같은
     서버사이드 렌더링 함수를 사용하면, 자동적으로 contents를 이스케이프하게 됩니다.
     hydration을 위해 클라이언트로 string을 보내기 전 렌더링에 연결하면 안됩니다.

     XSS를 피하기 위해 sanitize가 되지 않은 데이터를 내보내서는 안됩니다.
     renderToStaticMarkup()로 출력해 XSS 공격을 회피할 수 있습니다.:

 

 

◆ Detecting Vulnerabilities in Dependencies

→ 일부 버전의 third-party components들은 보안 이슈가 있습니다.
      dependencies를 체크해보고, 더 나은 버전으로 업데이트 할 수 있는지 확인합니다.
      free Snyk CLI와 같은 툴을 사용해 취약성을 확인할 수 있습니다.
      소스 코드 관리 시스템과 결합하여, 취약성을 자동으로 해결할 수 있습니다.

 

 

◆ Configuring Security Linters

→  ESLint와 같은 Linter를 사용하면 자동적으로 보안 이슈를 막아줌과 코드의 교정을 도와줍니다.
      ESLint React security config을 사용하여 보안 이슈를 해결할 수 있습니다.
      husky와 같은 라이브러리를 사용하여 보안과 관련된 Linter 이슈가 생겼을 때,
      commit을 방지하는 pre-commit hook을 작성할 수 있습니다.

 

 

아래와 같이