[React] security vulnerabilities 보완하기 + GitHub Dependabot alerts 제거하기

 

이미지 출처: GitHub blog

 

이전에 만들어둔 React 프로젝트에 잠재적인 보안 취약점이 있다고 계속 GitHub에서 이메일이 오길래 해결 방법을 찾아 보게 되었다. 

그리고 GitHub 저장소에 들어가서 볼때마다 이렇게 계속 메세지가 떠있어서 너무 신경이 쓰였다...

 

 

이 글에서 정리하는 내용:

1. Create React App으로 생성한 React 프로젝트의 vulnerabilities 보완하기

2. GitHub Dependabot alerts 제거하기

 

 

Create React App으로 생성한 React 프로젝트의 vulnerabilities 보완하기

 

일반적으로 vulnerabilities를 제거하기 위해서는 terminal에서 npm audit 명령어를 입력해서 확인하고, npm audit fix (--force) 명령어를 통해 제거할 수 있다고 한다.

하지만, Create React App으로 생성한 React app에 npm audit fix를 입력하게 되면 기껏 만들어 놓은 프로젝트를 망칠 수 있기 때문에 사용하지 않는 것이 좋다고 한다!!

https://github.com/facebook/create-react-app/issues/11174

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

 

https://overreacted.io/npm-audit-broken-by-design/

npm audit: Broken by Design

 

위의 두 글에 따르면 npm audit은 일반적인 Node app에 맞춰서 만들어져 있기 때문에 Create React App을 이용하여 만든 리액트 프로젝트에는 맞지 않는다고 한다.

그리고 많은 vulnerabilities가 있다고 나타나긴 하지만, 실제로는 무시해도 될 정도로 심각하지 않은 것이 거의 대부분이라고 한다.

 

따라서 Create React App으로 만든 리액트 프로젝트에서는 다음 명령어로 vulnerabilities를 확인하라고 한다.

npm audit --production

 

내가 만든 React app에서는 다음과 같이 13개의 vulnerabilities가 있다고 나온다.

 

이때, vulnerabilities를 조금이라도 제거하기 위해서는 리액트 프로젝트의 package.json 파일에서 이렇게 되어 있는 부분을

  "dependencies": {
      "react": "^17.0.2",
      "react-dom": "^17.0.2",
      "react-scripts": "5.0.0"
  }

 

다음과 같이 바꿔주면 된다.

"dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
},
"devDependencies": {
    "react-scripts": "5.0.0"
},

 

이렇게 바꿔준 파일을 저장하고 나서 다시 npm audit --production으로 확인하니까 2개로 줄어들었다!

 

 

GitHub Dependabot alerts 제거하기

 

React app에서 보안 취약점을 확실히 제거하기 위해서는 취약점이 있는 각 package가 수정되어 업데이트 되어야 한다.

깃허브 공식문서에 따르면 GitHub Dependabot은 이러한 package가 업데이트가 되면 사용자에게 자동으로 알려주는 역할을 한다고 한다.

https://docs.github.com/en/code-security/dependabot/dependabot-alerts/about-dependabot-alerts

사용자가 package 업데이트 내용이 있는지 일일이 찾아보지 않아도 되니까 편한 것 같다.

 

따라서 Dependabot alerts를 제거하기 위해서는 해당 패키지를 업데이트 해줘야 한다.

한번에 모두 업데이트 하려면 npm-check-updates라는 패키지를 설치해서 업데이트 할 수도 있다고 하긴 하는데, 일단은 하나 하나 확인하면서 해보려고 수동으로 직접 업데이트 하는 방법으로 해보았다.

(npm-check-updates 사용 방법)

 

Dependabot alerts에서 업데이트 해야하는 패키지 이름을 확인한 다음에, terminal에서 프로젝트 폴더 위치로 이동 후 다음 명령어를 입력한다.

npm update 패키지 이름

 

이렇게 하나 하나 패키지 업데이트를 진행하면 package-lock.json 파일도 내용이 업데이트 된다.

이제 변경된 내용을 push 해주고 다시 Dependabot alerts로 들어가서 보면 Closed 되어 있는 것이 생긴다.

목록의 각 내용을 클릭 해보면 경고가 fixed 되었다고 표시되어 있는 것을 볼 수 있다.

 

 

업데이트 완료 후 다시 npm audit --production으로 확인 해보면 0개가 된 것을 볼 수 있다!! 🥳

 

계속 신경 쓰이던 부분을 어느정도 해결하게 되니까 조금 후련한 느낌이 든다.

하지만 보안상 취약점이나 패키지 의존성에 대해서 조금 더 공부가 필요한 것 같다..!