Github 페이지의 API 키 숨기기

Github 페이지의 API 키 숨기기

인증 토큰이 필요한 서드파티 API에서 데이터를 호출하고 싶은 조직의 Github 페이지가 있습니다.이 github 페이지를 공개 리포트에 인증 토큰을 표시하지 않고 게시할 수 있습니까?

단히말말, ,,다다다다,Git Hub repo 。할 수 , repo를 GitHub Pages로 됩니다.username.github.io 「」이 .gh-pages분 while꼭 .선택사항이긴 하지만 반드시 옳은 것은 아닙니다.

키가 GitHub Pages repo에 있으면 JavaScript에서 클라이언트 측 API 호출에 사용되는 것처럼 들립니다.이 경우 인증 토큰이 공개 리포에 있는지 클라이언트 측 파일로 브라우저에 전송되었는지에 관계없이 공개적으로 표시됩니다.보통 이거면 돼요.서드파티 API가 웹 사이트의 도메인을 기반으로 인증 토큰을 생성하고 해당 토큰을 사용하는 콜을 도메인에서 발신된 페이지로 제한했을 수 있습니다.그렇지 않으면 로그 요청 및 사용 모니터링에만 인증 토큰이 필요할 수 있습니다.

인증 토큰이 정말로 비공개로 되어 있는 경우, 서드파티 API를 호출하기 위해 개인 서버측 코드를 작성해야 할 수 있습니다.그러면 GitHub Pages 사이트에서 필요한 데이터를 얻을 수 있습니다.이전에도 웹 API의 보안 문제가 있었지만 클라이언트 측에서 중요하지 않은 데이터를 가져와야 했습니다.

즉, 환경변수에 인증 토큰을 저장하고 .env 파일에 gitignore를 사용하여 퍼블릭리포에서 인증 토큰을 숨길 수 있습니다.클라이언트 측 API의 인증 토큰을 새로 고친 후 변경을 공개 리포에 푸시하고 갱신을 gh-pages 브랜치로 재배포합니다.아래에 이 프로세스의 예를 제시하겠습니다.

메모

암호 또는 API 키를 커밋한 경우 변경하십시오!키를 커밋한 경우 새 키를 생성합니다.GitHub의 일반적인 베스트 프랙티스를 참조해 주세요.

앱에 React를 사용하는 경우, 1단계와 2단계는 이미 사용자 지정 환경 변수가 미리 설치되어 있으므로 SKIP합니다.Create React App을 참조합니다.

상세한 것에 대하여는, 이하를 참조해 주세요.

1. 응용 프로그램루트 디렉토리에 dotenv 의존관계를 설치합니다(이 예에서는 Node.js를 사용합니다).참조 npm, run 명령어:

npm install dotenv

2. 다음 코드를 추가하여 index.js 파일의 문을 Import합니다.

require('dotenv').config();

3. 앱의 루트 디렉토리에 .env 파일을 만들고 auth 토큰을 변수로 추가합니다.React를 사용할 때는 변수 이름 앞에 다음을 붙여야 합니다.REACT_APP_

AUTH_TOKEN=987asc8iks0lenv7

4. process.env에서 console.log()를 사용하여 변수가 올바르게 저장되었는지 확인합니다.

console.log(process.env.AUTH_TOKEN);

5. 애플리케이션 코드의 인증 토큰에 대한 모든 참조를 업데이트합니다.

OLD VARIABLE: const auth_token = '987asc8iks0lenv7';

NEW VARIABLE: const auth_token = process.env.AUTH_TOKEN;

6. .gitignore 파일을 생성하여 응용 프로그램의 루트 디렉토리에 추가하고 아래에 코드를 추가하여 git이 인증 토큰이 저장되어 있는 .env 파일을 무시하도록 합니다.

.env

7. GitHub의 어플리케이션 마스터 브랜치에 업데이트를 추가, 커밋 및 푸시합니다.

8. gh-pages 브랜치에 업데이트를 도입 또는 재배포합니다.다음 명령을 사용합니다.

npm run deploy

Ashen의 답변은 이 사용 사례에 적합하지 않습니다.Github을 통해 구성된 비밀은 Github Actions에서만 사용할 수 있습니다(문서 참조). 따라서 실제로는 CI/CD와 유사한 응용 프로그램이 대부분입니다.클라이언트 측 API 호출에는 해당되지 않습니다.

GitHub Actions는 당신의 요구를 용이하게 할 것입니다.

시각적 워크플로우 편집기 또는 저장소 설정을 사용하여 암호를 추가할 수 있습니다.비밀정보를 작성하면 GitHub은 즉시 값을 암호화하여 더 이상 값을 보거나 편집할 수 없습니다.저장소에 대한 쓰기 액세스 권한이 있는 모든 사용자는 해당 저장소에 암호를 생성하고 사용할 수 있습니다.

그러나 GitHub Actions는 현재 공개 베타 버전으로 제공되고 있으므로 이 베타 기간 동안 고부가가치 워크플로우 및 콘텐츠는 피해야 합니다.

언급URL : https://stackoverflow.com/questions/21939713/hide-api-key-for-a-github-page