[Project] 프로젝트 삽질기29 (feat Swagger 보안 구성)

들어가며

NestJS로 개발하면서, Swagger를 보다 잘 사용하려면 어떻게 해야 할까 고민했습니다. 그 과정에서, Swagger 문서가 혹여나 외부에 노출된다면, 한 번 더 보안에 신경 쓰기 위해 express-basic-auth라는 라이브러리를 활용한다는 것을 알았습니다. NestJS에서 express-basic-auth를 보다 잘 적용하려면 어떻게 해야 할지 고민하기 위해 작성된 글입니다.  

 

 

 

 

---

NestJS Swagger 보안

NestJS에서 Swagger의 보안을 조금 더 신경 쓰기 위해 express-basic-auth 라이브러리를 활용합니다. 라이브러리를 설치해서 활용하려면 다음의 명령어를 입력합니다.

 

 

npm install express-basic-auth

 

그리고 기본 설정은 다음과 같이 할 수 있습니다. 

 

 

const app = require('express')()
const basicAuth = require('express-basic-auth')

app.use(basicAuth({
    users: { 'admin': 'supersecret' }
}))

 

 

위와 같이 설정하면, 미들웨어가 admin이라는 사용자 이름과 supersecert이라는 비밀번호를 입력하면 swagger에 접근할 수 있게 알아서 설정해줍니다. 만약 사용자 이름 혹은 비밀번호를 잘못 입력한 경우 HTTP 401을 응답합니다. 저는 express-basic-auth 라이브러리에서 제공하는 옵션 중, challenge 옵션을 활용했습니다.

 

 

app.use(basicAuth({
    users: { 'someuser': 'somepassword' },
    challenge: true,
    realm: 'Imb4T3st4pp',
}))

 

 

challenge 옵션은 기본적으로 승인되지 않은 요청에 대한 응답에 WWW-Authenticate challenge 헤더를 추가하지 않습니다.

 

 

 

 

만약 옵션을 true로 설정하면 대부분의 브라우저에서 인증되지 않은 응답에 대해서는, 사용자 이름과 비밀번호를 입력하는 입력하는 팝업이 표시됩니다. 하지만 express-basic-auth를 NestJS에서 처음 사용할 때 아래와 같은 에러를 확인할 수 있습니다. 

 

 

0 , express_basic_auth_1.default) is not a function

 

 

이 에러를 해결하기 위해서는 다음과 같이 설정해줘야 합니다.

 

 // tsconfig.json
 "esModuleInterop": true

 

 

 

위와 같이 tsconfig.json에 옵션을 추가하면 에러를 해결할 수 있습니다. 여기서 esModuleInterop 속성을 true로 설정하면 ES6 모듈 사양을 준수하여 CommonJS 모듈을 가져올 수 있게 됩니다. 그 결과 정상적으로 모듈을 import 하는 것이 가능해집니다. 

 

 

 

 

 

 

 

 

---

 

 

 

 

 

 

마치며

앞으로도 팀의 발전을 돕는 개발자가 되기 위해 노력하려 합니다. 팀에 필요한 부분이 무엇일지 고민하면서, 팀에 도움이 된다면, 열심히 공부해서 실무에 적용할 수 있는 개발자가 되기 위해 노력하고 싶습니다. 팀의 성장에 기여할 수 있는 개발자가 되겠습니다. 

 

 

 

 

---

 

 

 

 

 

참고 및 출처

express-basic-auth

esModuleInterop 속성을 이용한 Import 에러 해결