[웹 보안] express-basic-auth로 접근 차단, 로그인 만들기

 

Node.js, express를 사용하고 있는데

1. 개발 서버의 robots.txt에 불필요한 접근도 막을 겸 (불필요한 크롤링 방지)

2. 보안도 신경쓸 겸

 

웹에 접근할 때부터 로그인을 만들어 보기로 했습니다.

 

기존의 로그인과 다른점은 웹 소스를 다운받기 전에 로그인을 걸어줌으로 조금 더 보안에 좋은 것 같습니다.

 

Network 화면

 

위 화면처럼, 다운 받는 요소가 로그인 전에는 아무것도 없습니다.

 

---

준비물

1. pm2 : 현재 사용중이라 쓰고 있지만, NODE_ENV 를 설정할 수 있다면 뭐든 괜찮습니다.

2. express-basic-auth

express-basic-auth

 

---

구현 시작

 1. express-basic-auth를 설치해 줍니다.

 - npm install express-basic-auth

 

 2. app.js에 개발 환경이 development 일때만 작동하도록 만들어 줍니다.

 - 안에 들어가는 내용은 위의 npm 사이트에 나와 있습니다.

 - 코드 위치는 적절히... 

var app = express();

if (process.env.NODE_ENV == "development") {
  const basicAuth = require('express-basic-auth');
  app.use(basicAuth({
    users: { 'AAA': 'BBB' },
    challenge: true
  }));
}

 - if문 안으로 basicAuth 도 넣어, 개발 환경이 아닐때 basicAuth 가 없다고 할 일이 없도록 해 줍니다.

 - users: { ID : Password } 형식으로 아이디와 비밀번호를 지정해줍니다.

 - challenge : 로그인 화면이 뜨게 하는 설정입니다.

 

3. 개발 환경일 때만 실행되도록 해 놓았으니, 개발 환경이라고 선언을 해 줘야 합니다.

 - 프로젝트 제일 상단 폴더에 [ ecosystem.config.js ]를 만들어 줍니다. (pm2일 경우)

 - pm2, ecosystem.config.js에 관한 내용은 https://pm2.keymetrics.io/docs/usage/application-declaration/

PM2 - Ecosystem File

  - 필요없는 부분은 다 지우고 이름, 실행할 파일, 환경 이름 지정만 해 주었습니다.

module.exports = {
  apps : [
      {
        name: "dev", // 해당 환경 설정의 이름
        script: "./bin/www", // 서버 시작 파일 위치 및 이름
        env: {
          "NODE_ENV": "development", // "NODE_ENV"를 "development"로 설정
        }
      }
  ]
}

4. 설정해놓은 파일로 실행해봅니다.

pm2 start .\ecosystem.config.js

- 잘 실행이 됐습니다.

- 접속시에 로그인이 뜨는지 보겠습니다.

 

로그인 화면

로그인 된 화면

잘 되네요?

 

---

어제 리액트 네이티브 앱을 수정하려는데 하나도 기억이 안나서 기록의 중요함을 다시 한번 깨달았습니다.

그래서 오늘은 자세하게 한번 작성해봤습니다...