4. twiiter clone 하기 - 파이어베이스 비밀키

1. 파이어베이스의 비밀키 숨기기

• firebaseConfig 변수에 apiKey 와 같은 값들은 파이어베이스에 접속하는 비밀키로 사용됩니다.
• Github에 firebasejs 파일을 업로드 하게 되면 누구나 비밀키를 확인할 수 있는데, 그렇게 되면 비밀키를 본 사람이 데이터베이스에 접근해서 데이터를 바꾸는 등의 보안 문제가 발생할 수 있습니다.
  => 이러한 상황을 막으려면 환경 변수라는 것으로 비밀키를 숨겨야 합니다.

     * 환경 변수 : 운영 체제 및 기타 소프트웨어가 컴퓨터에 고유 한 정보를 결정하는 데 사용할 수 있는 동적인 값. 즉 환경 변수는 컴퓨터의 위치, 버전 번호, 객체 목록 등과 같은 다른 것을 나타내는 것

• .env 파일을 생성 후 그 파일에 비밀키 변수를 등록한 다음, 비밀키가 필요한 다른 파일에서 비밀키 변수를 불러서 참조하게 만듭니다. 이때 비밀키 변수가 환경 변수입니다.
• 생성한 .env 파일에 firebase.js 파일의 변숫값을 복사해서 .env 파일로 옮깁니다.
  => apiKey 는 .env 파일의 REACT_APP_API_KEY로 옮기는 식으로

REACT_APP_API_KEY = "AIzaSyCDWnPKoZAGpE1T-fCEe5rL6goQHGfhNiw" 
 REACT_APP_AUTH_DOMAIN = "nwitter-65e58.firebaseapp.com" 
 REACT_APP_PROJECT_ID = "nwitter-65e58" 
 REACT_APP_STORAGE_BUCKET = "nwitter-65e58.appspot.com" 
 REACT_APP_MESSAGIN_SENDER_ID = "367559533896" 
 REACT_APP_APP_ID = "1:367559533896:web:67c6825a8982c4bc7aff7d"

• cretae-react-app 으로 만든 리액트 프로젝트에서 .env 파일에 환경 변수를 정의하려면 변수 맨 앞에 REACT_APP 을 붙이는 것이 규칙입니다.
  => create-react-app 은 만든 사람들에 의해서 REACT_APP으로 시작하는 환경 변수를 찾도록 자동으로 설정되어 있기 때문에 이렇게 하지 않으면 동작하지 않습니다.

• .env 파일을 숨길 때는 .gitignore 파일을 사용합니다.
  => .gitigore 파일의 역할은 git이 무시할 내용이라는 뜻입니다.(즉, git의 버전 관리 대상에 포함되지 않는다는 뜻)
• 아래의 코드처럼 .gitignore 파일을 수정합니다.

(... 생략 ...) 
#misc 
.DS_Store 
.env // 추가 
.env.local 
.env.development.local 
.env.test.local 
.env.production.local

npm-debug.log*
yarn-debug.log*
(... 생략 ...)

• 수정 후 firebase.js 파일을 열어 비밀키를 환경 변수에 있는 변수들로 변환합니다.

import * as firebase from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  strageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId : process.env.REACT_APP_MESSAGIN_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID
}

export default firebase.initializeApp(firebaseConfig)

• 다른 파일에서 환경 변수를 가져올 때는 단순히 변수의 이름만 입력하면 안 됩니다. 다른 파일에서 환경 변수를 사용하려면 process.env를 붙여서 입력합니다. 여기서 process.env. 는 ".env파일을 읽어 파일 안에 있는 변숫값을 불러오라"는 뜻입니다.

다른 코드에서 비밀키 자체를 사용하는 것이 아닌 REACT_APP_API_KEY와 같은 비밀키 변수를 참조하게 되면 .env 파일만 Github에 업로드하지 않으면 노출을 막을 수 있습니다. (보안과 관련이 있음)
but!! 이거만 가지고는 key들이 노출되는 걸 완전히 막을 수 있는 것은 아닙니다.
왜냐하면 firebase 를 사용하면 firebase는 클라이언트로부터 요청을 받아야 합니다.
웹사이트에 들어가서 사용자가 React.js 애플리케이션을 실행하면 비밀키 값들이 들어가게 되고 그렇게 하지 않으면 firebase 에 접근하지 못하게 됩니다.
즉, 서비스를 위해 빌드하고 웹사이트를 열게 되면 create-react-app 은 이 코드들을 실제 값들로 변환하기 때문에 결국에는 이 코드는 보이게 됩니다. 위의 방법은 오직 Github만을 위한 보안입니다.

 

 

이 글은 Nomad Coder의 "클론코딩 트위터" 책을 바탕으로 작성되었습니다.