prufrofro와 프랭크 반 Puffelen의 답변을 바탕 여기 , 내가 함께 긁어 방지하지 않지만, 약간 어렵게 API 키를 사용하여 만들 수 있습니다이 설정을 넣어.
경고 : 이 방법을 사용하더라도 데이터를 얻으려면 Chrome에서 JS 콘솔을 열고 다음을 입력하십시오.
firebase.database().ref("/get/all/the/data").once("value", function (data) {
console.log(data.val());
});
데이터베이스 보안 규칙 만이 데이터를 보호 할 수 있습니다.
그럼에도 불구하고 프로덕션 API 키 사용을 다음과 같이 도메인 이름으로 제한했습니다.
- https://console.developers.google.com/apis
- Firebase 프로젝트를 선택하십시오
- 신임장
- API 키에서 브라우저 키를 선택하십시오. ' 브라우저 키 (Google 서비스에서 자동 생성) '
- 년은 " 이러한 HTTP 리퍼러의 요청 허용 (웹 사이트) 앱 URL을 추가, (exemple를 :"
projectname.firebaseapp.com/*
)
이제 앱은이 특정 도메인 이름에서만 작동합니다. 그래서 로컬 호스트 개발을 위해 비공개로 될 또 다른 API 키를 만들었습니다.
- 신임 정보 작성> API 키를 클릭하십시오.
Emmanuel Campos가 언급 한대로 기본적으로 Firebase는 화이트리스트 localhost
및 Firebase 호스팅 도메인 만 허용 합니다 .
실수로 잘못된 API 키를 게시하지 않도록하기 위해 다음 방법 중 하나를 사용하여 프로덕션에서 더 제한된 키를 자동으로 사용합니다.
Create-React-App 설정
에서 /env.development
:
REACT_APP_API_KEY=###dev-key###
에서 /env.production
:
REACT_APP_API_KEY=###public-key###
에 /src/index.js
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
// ...
};
Webpack에 대한 나의 이전 설정 :
Webpack을 사용하여 프로덕션 앱을 빌드하고 index.html
평소처럼 개발자 API 키를 내부에 넣습니다 . 그런 다음 webpack.production.config.js
파일 내 index.html
에서 프로덕션 빌드에 복사 할 때마다 키를 바꿉니다.
plugins: [
new CopyWebpackPlugin([
{
transform: function(content, path) {
return content.toString().replace("###dev-key###", "###public-key###");
},
from: './index.html'
}
])
]