React/TS study - twitter clone(9)

Security Rules

user가 프로젝트의 firebase DB에서 데이터를 읽어올 수 있게 허용하기 위해선 해당 위치에서 코드를 작성

 

 

service cloud.firestore {
  match /databases/{database}/documents {
    match /tweets/{doc} {
      allow read, create: if request.auth != null;
    }
  }
}

 

tweets Collection에 있는 아무  document나 읽을 수 있게한다.

누구든 권한이 있다면 DB에서 데이터를 읽고 글을 작성할 수 있다.

 

 

      allow delete, update: if request.auth.uid == resource.data.userId;

해당 코드를 추가하여

삭제 수정 요청을 보낸 유저의 아이디가 resource.data.userId (document(tweet) 에 있는 데이터 컬럼 userId )와 같다면

가능하게 한다

 

 

 

 

 

Storage에서도 규칙을 설정해줄 수 있다.

 

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if request.auth != null;

      allow write: if request.auth != null && resource.size < 2*1024.1024;
    }
  }
}

request.auth의 값이 null이 아닌경우에만 read와 write 허용

write는 파일사이즈가 2mb 이하인경우에만 가능

 

write에 추가조건으로 파일 타입 명시가능

ex) resource.contentType == "image/png"

 

 

API Key 를 통한 보안

 

https://console.cloud.google.com/apis/credentials

Google 클라우드 플랫폼

 

 

해당 부분을 클릭해서 원하는 프로젝트를 선택하기

 

 

 

해당 key값은 보안이 확보되지 않아 표시가 되어있음( Firebase에 의해 자동생성된 Key)

 

 

어플리케이션 제한설정을 웹사이트를 통해서만 사용으로 체크해주기

 

 

해당 부분에 Hosting시에 생성된 url을 넣어 웹사이트를 제한

 

웹사이트를 제한하고 http://localhost:5173/ 로 접속시

Firebase: Error (auth/requests-from-referer-http://localhost:5173-are-blocked.).

에러가 출력되며 요청이 차단된다.

 

개발중일때만 제한적으로 localhost 환경을 등록해두고 사용하기

 

 

 

 

https://github.com/Rangbit/nwitter

GitHub - Rangbit/nwitter: Clone Twitter with React and Firebase