Nuxt에서 API 키를 보호하고 확인하는 방법

Nuxt에서 API 키를 보호하고 확인하는 방법

Nuxt(SSR/PWA/Vuejs/Node.js/Vuex/Firestore와 함께)를 사용하고 있는데, 다음과 같은 일반적인 개념이나 예를 알고 싶습니다.

1. API 키를 보호하려면 어떻게 해야 하나요?예를 들어 MailChimp API를 호출하는 경우
2. 부실한 솔루션이 구현될 경우 해커가 이를 어떻게 볼지 잘 모르겠습니다.액세스 할 수 없는 것을 어떻게 확인할 수 있습니까?

환경변수 사용을 권장하는 "솔루션"을 많이 발견했지만, 모든 솔루션에 대해 보안성이 낮다고 지적하는 사람이 있습니다.참조:

https://github.com/nuxt-community/dotenv-module/issues/7

https://github.com/nuxt/nuxt.js/issues/2033

서버 미들웨어가 해답일까요?https://blog.lichter.io/posts/sending-emails-through-nuxtjs 및 https://www.youtube.com/watch?v=j-3RwvWZoaU(@11:30).메일 침팬지 계정에 이메일만 추가하면 됩니다. 많은 오버헤드가 있을 것 같습니다.

또한 이미 Firestore api 키를 환경변수로 저장하고 있습니다.이것은 안전합니까?Chrome dev tools -> sources -> page -> app.js를 열면 API 키가 바로 표시됩니다(개발 모드에서만 테스트됨).

서버 미들웨어 또는 https://github.com/nuxt-community/separate-env-module 중 하나를 사용할 수 있습니다.

미들웨어 자체는 클라이언트에서도 실행할 수 있기 때문에 동작하지 않으며 미들웨어에서 사용되는 코드는 클라이언트에서도 사용할 수 있습니다.

#2의 경우 클라이언트 js 소스에 포함되어 있는지 여부를 확인할 수 있습니다.xss와 같이 해커가 얻을 수 있는 다른 방법이 더 있지만, 일반적인 것은 당신의 코드와 별로 관련이 없습니다.

API 키를 보호하려면 어떻게 해야 하나요?예를 들어 MailChimp API를 호출하는 경우

여기서 잔인한 사실은...클라이언트 측에서는 적어도 웹 앱에서는 어떠한 종류의 비밀도 보호할 수 없습니다.

API를 보호하기 위해 사용할 수 있는 기술과 이러한 기술을 우회하는 방법을 알기 위해서만 이 일련의 기사를 읽을 수 있습니다.모바일 앱에 서비스를 제공하는 API의 컨텍스트에 있지만, 웹 앱에 서비스를 제공하는 API에 대해서도 대부분의 API가 적용됩니다.api-keys, ouath 토큰, hmac 및 인증서 핀 연결을 사용하고 바이패스하는 방법에 대해 설명합니다.

서드 파트 서비스에 대한 액세스는 항상 클라이언트 측에서가 아닌 백엔드에서 수행해야 합니다.이 접근 방식으로는 보호할 곳이 하나뿐이며, 그 곳은 당신의 통제하에 있습니다.

예를 들어 Mailchimp API에 액세스하는 경우...만약 당신의 백엔드가 당신의 웹 앱을 대신해서 그것을 하고 있다면, 당신은 당신의 웹 앱에 의한 Mailchimp의 사용을 감지하고 완화하기 위한 보안 조치를 취할 수 있습니다. 예를 들어, UBA(사용자 행동 분석) 솔루션과 같이, 웹 앱에 Mailchimp API에 대한 액세스를 떠나는 것은 누군가가 그것을 남용하고 있다는 것을 당신만이 알고 있다는 것을 의미합니다.Mailchimp가 경고하거나 대시보드에 알림이 표시됩니다.

부실한 솔루션이 구현될 경우 해커가 이를 어떻게 볼지 잘 모르겠습니다.액세스 할 수 없는 것을 어떻게 확인할 수 있습니까?

F12는 이미 알고 계시겠지만 개발자 도구에 액세스하는 것도 방법 중 하나입니다.

OWASP 보안 툴 Zed Attack Proxy(ZAP)를 사용하여 다음 단어를 사용하는 다른 방법 ID.

OWASP Zed Attack Proxy(ZAP)는 세계에서 가장 인기 있는 무료 보안 도구 중 하나로 수백 명의 해외 자원봉사자들이 적극적으로 관리하고 있습니다*.응용 프로그램을 개발 및 테스트하는 동안 웹 응용 프로그램의 보안 취약성을 자동으로 찾을 수 있습니다.또한 경험이 풍부한 펜터들이 수동 보안 테스트에 사용할 수 있는 훌륭한 도구입니다.

프런트 엔드에 기밀을 저장하는 것은 보안 측면에서 절대 안 됩니다.

웹 사이트가 서버 측 렌더링(SSG 또는 정적 웹 사이트)을 사용하고 Netlify에서 호스트되는 경우 Netlify 함수(서버 측 로직) 및 환경 변수에 매우 적합합니다.

Netlify 함수에는 몇 가지 매뉴얼이 있습니다.넷라이피 기능은 AWS 람다에 의해 구동된다.

일반적으로 프로젝트 디렉토리에 함수 폴더를 만들고 여기에 함수를 씁니다.각 도입 후에 기능이 구축되지만 Netlify Dev를 사용하여 로컬에서 기능을 테스트할 수 있습니다.

다음은 Mailchimp service wit injected secrets를 사용하는 기능의 예입니다.https://github.com/tobilg/netlify-functions-landingpage/blob/169de175d04b165b5d4801b09cb250cd9a740da5/src/lambda/signup.js

언급URL : https://stackoverflow.com/questions/53679843/how-to-secure-api-key-with-nuxt-and-verify