리액트 앱에서 API 키 사용

리액트 앱에서 API 키 사용

저는 2개의 서드파티 서비스를 사용하는 리액트 앱을 가지고 있습니다.앱이 다음을 사용하여 시작되었습니다.react-create-app.

이 두 서비스 모두 API 키가 필요합니다.

키는 다음과 같이 스크립트태그를 통해 제공됩니다.

<script type="text/javascript" src="https://myapi?key=MY_KEY">
</script>

다른 API 키는 요청에 사용됩니다.실제 키를 일정하게 저장하고 요청을 작성하기 위해 사용합니다.다음과 같이 합니다.

const MY_OTHER_KEY = 'MY_OTHER_KEY'
let url = `http://myotherapi?key=${MY_OTHER_KEY}&q=${query}`

API 키 취급에 관한 Google의 베스트 프랙티스 팁은 다음과 같습니다.

API 키를 코드에 직접 삽입하지 않음

첫 번째 질문입니다.

1. 에서의 변수 사용방법index.html?

인마이index.html파일에는 다음과 같은 태그가 2개 있습니다.

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">

물론. 뻔하지.%PUBLIC_URL%는 변수입니다.변수를 추가하려면 어떻게 해야 합니까?%MY_KEY%API 키가 코드에 직접 삽입되지 않도록 하기 위해?

다음과 같은 정보를 얻으려면:

<script type="text/javascript" src="https://myapi?key=%MY_KEY%">
</script>

이 질문과 관련하여 API 키를 일정하게 저장하는 것이 안전한가?MY_OTHER_KEY?

Google은 다음과 같이 말합니다.

응용 프로그램 소스 트리 내의 파일에 API 키 저장 안 함

두 번째 질문입니다.

2. API 키는 아직 번들에 포함되어 있지 않습니까?

구글이 시키는 대로 하면

...환경변수 또는 어플리케이션의 소스 트리 이외의 파일에 저장

외부 파일에 키를 저장한다고 가정해 보겠습니다.그 파일은, 어느 시점에서 읽혀져 번들에 카피되거나 다른 방법으로 참조되는 내용이 될 것입니다.결국, 열쇠는 찾기 힘들지만 번들 안에 보이지 않을까요?이게 정확히 어떻게 도움이 되는 거죠?

3. 리액트 앱에서 API 키를 사용하는 카노닉한 방법이 있나요?아니면 개인 개발자에게 달려있나요?

자기 설명입니다만, 이 문제를 해결할 수 있는 대응 방법을 찾고 있습니다.

도와주셔서 감사드려요!

1. index.html 변수 사용방법

답변 1 : 예시로 나타낸 유형의 환경변수를 추가하는 방법을 알아보려면 사용자 지정 환경변수 추가를 진행하십시오.

2. API 키는 아직 번들에 포함되어 있지 않습니까?

답변 2: 키를 가지고 있는 경우에도 (MY_KEY스크립트 태그의 환경변수로서 페이지에 렌더링되어 표시됩니다.일반적으로 이러한 키는 브라우저 키이며 클라이언트 측에서 사용하는 것을 목적으로 합니다.이러한 항목은 요청에 Http Referer 헤더를 제공하여 제한할 수 있습니다.이 키를 보호하는 방법에 대한 자세한 내용은 여기를 참조하십시오.단, API 키(예:MY_OTHER_KEY할 수 측 는 안 스크립트 태그에 렌더링하거나 클라이언트 측 JS에 저장해서는 안 됩니다.

3. 리액트 앱에서 API 키를 사용하는 카노닉한 방법이 있나요?아니면 개인 개발자에게 달려있나요?

답변 3: 서드파티 API 키를 사용하는 표준 방법은 클라이언트 측 앱이 백엔드 API에 요청을 보내는 것입니다.그런 다음 백엔드 API가 서드파티 API에 따라 요청을 포맷하고 키를 추가한 후 서드파티 API로 호출합니다.응답을 받으면 압축을 풀고 프론트엔드 앱이 인식할 수 있는 도메인 개체로 변환하거나 원시 응답을 프론트엔드 앱으로 다시 전송할 수 있습니다.이렇게 하면 API 키는 백엔드에 머무르며 클라이언트 측으로 전송되지 않습니다.

언급URL : https://stackoverflow.com/questions/46838015/using-api-keys-in-a-react-app