[React] npx create-react-app 이후 Critical Issues

 

 

 

1. 현상

 

npx create-react-app을 통해 react 앱을 생성하면 Critical 레벨의 이슈가 포함된 채 생성됩니다.

 

audit fix를 실행해도 해당 문제는 수정되지 않습니다.

 

 

 

2. 원인

 

결론부터 말하면 npm에 대한 버그입니다.

 

보다 자세한 내용은 다음 글을 참고해 주세요: Help, npm audit says I have a vulnerability in react-scripts!

Help, `npm audit` says I have a vulnerability in react-scripts! · Issue #11174 · facebook/create-react-app

 

 

 

3. 수정

 

package.json을 열어 다음과 같이 수정해 줍니다

//package.json
...

  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "react-scripts": "4.0.3"
  },
  
 ...

 

주요한 수정사항은 react-scripts입니다. 기존 dependencies에 있던 react-scripts를 devDependencies로 이동시킵니다.

그 후 npm audit --production을 실행시킵니다.

취약점 보고 내용이 0건으로 바뀌었습니다.

 

 

 

4. 문제가 해결된 게 아니라 무시한 거 아닌가요?

 

얼핏 보면 위와 같은 수정 내용이 문제를 수정한 게 아닌 devDependencies로 react-scripts를 이동시킴으로써 경고 메시지만 없앤 것처럼 보일 수 도 있습니다. 이 내용은 위의 링크된 원문 글에도 나와있으며 간단히 번역해보면 다음과 같습니다.

 

Create React App은 빌드 도구입니다. 즉, 실행 중인 Node 애플리케이션을 생성하지 않습니다. 개발 중 빌드 시간에 실행되며 정적 자산을 생성합니다.

그러나 npm 감사는 Node 앱용으로 설계되었으므로 프로덕션에서 실제 Node 코드를 실행할 때 발생할 수 있는 문제에 플래그를 지정합니다. 이것은 Create React App이 작동하는 방식이 아닙니다.

이것은 우리가 종속성에 대해 받는 압도적인 양의 "취약성" 보고서가 잘못되었음(false positive)을 의미합니다.

 

애초에 npm audit이 검사하는 방식에 문제가 있음을 내포하고 있습니다.