COPS Policy
SOP
-
Same-origin policy
-
동일 출처 정책
-
어떤 출처(Origin)에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 보안 방식
"다른 곳에서 가져온 자료는 일단 막는다"
웹 애플리케이션의 도메인이 다른 도메인의 리소스에 접근하는 것을 제어하여 사용자의 개인 정보와 데이터의 보안을 보호하고, 잠재적인 보안 위협을 방지
잠재적으로 해로울 수 있는 문서를 분리함으로써 공격받을 수 있는 경로를 줄임
Origin
- 출처
- URL의 Protocol, Host, Port를 모두 퐇마하여 "출처"라고 부름
- Same Origin 예시
- 아래 세 영역이 일치하는 경우에만 동일 출처(Same-Origin)로 인정
- Same Origin 예시
- http://localhost:3000/articles/3/을 기준으로 동일 출처 여부 비교
| URL | 결과 | 이유 |
|---|---|---|
| http://localhost:3000/articles/ | 성공 | Path만 다름 |
| http://localhost:3000/comments/3/ | 성공 | Path만 다름 |
| https://localhost:3000/comments/3/ | 성공 | Path만 다름 |
| http://localhost:80/comments/3/ | 성공 | Path만 다름 |
| http://yahuua:3000/comments/3/ | 성공 | Path만 다름 |
CORS policy의 등장
- 기본적으로 웹 브라우저는 같은 출처에서만 요청하는 것을 허용하며, 다른 출처로의 요청은 보안상의 이유로 차단됨
- SOP에 의해 다른 출처의 리소스와 상호작용 하는 것이 기본적으로 제한되기 때문
- 하지만 현대 웹 애플리케이션은 다양한 출처로부터 리소스를 요청하는 경우가 많기 때문에 CORS 정책이 필요하게 되었음
CORS는 웹 서버가 리소스에 대한 서로 달느 출처 간 접근을 허용하도록 선택할 수 있는 기능을 제공
CORS
-
Cross-Origin Resource Sharing
-
교차 출처 리소스 공유
-
특정 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제
반약 다른 출처의 리소스를 가져오기 위해서는 이를 제공하는 서버가 브라우저에게 다른 출처지만 접근해도 된다는 사실을 알려야 함
"CORS Policy (교차 출처 리소스 공유 정책)"
CORS Policy
-
Cross-Origin Resource Sharing Policy
-
교차 출처 리소스 공유 정책
-
다른 출처에서 온 리소스를 공유하는 것에 대한 정책
-
웹 애플리케이션이 다른 도메인에 있는 리소스에 안전하게 접근할 수 있도록 허용 또는 차단하는 보안 메커니즘
-
서버가 약속된 CORS Header를 포함하여 응답한다면 브라우저는 해당 요청을 허용
서버에서 CORS Header를 만들어야 한다.
- 서버에서 설정되며, 브라우저가 해당 정책을 확인하여 요청이 허용되는지 여부를 결정
다른 출처의 리소스를 불러오려면 그 다른 출처에서 올바른 CORS header를 포함한 응답을 반환해야 함
CORS 적용 방법
CORS Headers
CORS Headers 설정하기
- django에서는 django-cors-headers 라이브러리 활용
손쉽게 응답 객체에 CORS header를 추가해주는 라이브러리
django-cors-headers 사용하기
-
설치
$pip install django-cors-headers -
cors headers 앱 등록, 미들웨어 등록
- CORS를 허용할 Vue 프로젝트의 Domain 등록
Article CR 구현
전체 게시글 조회
- 응답받은 데이터에서 각 게시글의 데이터 구성 확인(id, title, content)
- store에 게시글 목록 데이터 저장
단일 게시글 조회
- DetailVue route 작성
- ArticleListItem에 DetailView 컴포넌트로 가기 위한 RouterLink 작성
게시글 작성
- CreateView 작성
- ArticleView에 CreateView 컴포넌트로 가기 위한 RouterLink 작성
- v-model을 사용해 사용자 입력 데이터를 양방향 바인딩
- v-model의 trim 수식어를 사용해 사용자 입력 데이터의 공백을 제거
- 게시글 생성 요청을 담당하는 createArticle 함수 작성
- 게시글 생성이 성공한다면 ArticleView 컴포넌트로 이동
- submit 이벤트가 발생하면 createArticle 함수를 호출
- v-on의 prevent 수식어를 사용해 submit 이벤트의 기본 동작 취소
인증
Authentication
- 인증
- 수신된 요청을 해당 요청의 사용자 또는 자격 증명과 연결하는 메커니즘
누구인지를 확인하는 과정
Permissions
- 권한
- 요청에 대한 접근 허용 또는 거부 여부를 결정
인증과 권한
- 순서상 인증이 먼저 진행되며 수신 요청을 해당 요청의 사용자 또는 해당 요청이 서명된 토큰(token)과 같은 자격 증명 자료와 연결
- 그런 다음 권한 및 제한 정책은 인증이 완료된 해당 자격 증명을 사용하여 요청을 허용해야 하는지를 결정
DRF에서의 인증
-
인증은 항상 view 함수 시작 시, 권한 및 제한 확인이 발생하기 전, 다른 코드의 진행이 허용되기 전에 실행됨
-
인증 자체로는 들어오는 요청을 허용하거나 거부할 수 없으며, 단순히 요청에 사용된 자격 증명만 식별한다는 점에 유의
-
https://www.django-rest-framework.org/api-guide/authentication/
승인되지 않은 응답 및 금지된 응답
- 인증되지 않은 요청이 권한을 거부하는 경우 해당되는 두 가지 오류 코드를 응답
1. HTTP 401 Unauthorized
- 요청된 리소스에 대한 유효한 인증 자격 증명이 없기 때문에 클라이언트 요청이 완료되지 않았음을 나타냄 (누구인지를 증명할 자료가 없음)
2. HTTP 403 Forbidden (Permission Denied)
- 서버에 요청이 전달되었지만, 권한 때문에 거절되었다는 것을 의미
- 401과 다른 점은 서버는 클라이언트가 누구인지 알고 있음
인증 체계 설정
1. 전역 설정
- DEFAULT_AUTHENTICATION_CLASSES를 사용
- 사용 예시
2. View 함수 별 설정
- authentication_classes 데코레이터를 사용
- 사용 예시
DRF가 제공하는 인증 체계
- BasicAuthentication
- TokenAuthentication
- SessionAuthentication
- RemoteUserAuthentication
TokenAuthentication
- token 기반 HTTP 인증 체계
- 기본 데스크톱 및 모바일 클라이언트와 같은 클라이언트-서버 설정에 적합
서버가 인증된 사용자에게 토큰을 발급하고 사용자는 매 요청마다 발급받은 토큰을 요청과 함께 보내 인증 과정을 거침
Token 인증 설정
- 인증 클래스 설정
- TokenAuthentication 활성화 코드 작성
기본적으로 모든 view 함수가 토큰 기반 인증이 진행될 수 있도록 설정하는 것
- TokenAuthentication 활성화 코드 작성
- INSTALLED_APPS 추가
- rest_framework.authtoken app 추가
-
Migrate 진행
-
토큰 생성 코드 작성
- accounts/signals.py에 토큰 생성 코드 작성
인증된 사용자에게 자동으로 토큰을 생성해주는 역할
- accounts/signals.py에 토큰 생성 코드 작성
Dj-Rest-Auth 라이브러리
- Dj-Rest-Auth
- 회원가입, 인증(소셜미디어 인증 등), 비밀번호 재설정, 사용자 세부 정보 검색, 회원 정보 수정 등 다양한 인증 관련 기능을 제공하는 라이브러리
- https://github.com/iMerica/dj-rest-auth
Dj-Rest-AUth 설치 및 적용
- 설치
- $
pip install dj-rest-auth
- $
- App 추가
- url 추가
Dj-Rest-Auth의 Registration(등록) 기능 추가 설정
- 패키지 추가 설정
- $
pip install 'dj-rest-auth[with_social]'
- $
- 추가 App 등록
- 추가 URL 등록
- Migrate
- $
python manage.py migrate
- $
Token 발급 및 활용
- 회원 가입 및 로그인을 진행하여 토큰 발급 테스트하기
- 라이브러리 설치로 인해 추가된 URL 목록 확인
인증 여부 확인
- 인증되지 않은 사용자
메인 페이지 접근 권한
- 인증 된 사용자
회원가입 및 로그인 페이지에 접근 제한
인증 상태 여부를 나타낼 속성값 지정
- token 소유 여부에 따라 로그인 상태를 나타낼 isLogin 변수 작성
- 그리고 computed를 활용해 token 값이 변할 때만 상태를 계산하도록 함
- 인증되지 않은 사용자는 메인 페이지 접근 제한
- 전역 네비게이션 가드 beforeEach를 활용해 다른 주소에서 메인 페이지로 이동시 인증되지 않은 사용자라면 로그인 페이지로 이동시키기
- 인증된 사용자는 회원가입과 로그인 페이지에 접근 제한
- 다른 주소에서 회원가입 또는 로그인 페이지로 이동시 이미 인증된 사용자라면 메인 페이지로 이동시키기
기타 기능 구현
- 자연수러운 애플리케이션을 위한 기타 기능 구현
- 로그인 성공 후 자동으로 메인 페이지로 이동하기
- 회원가입 성공 후 자동으로 로그인까지 진행하기
참고
Django Signals
- "이벤트 알림 시스템"
- 애플리케이션 내에서 특정 이벤트가 발생할 때, 다른 부분에게 신호를 보내어 이벤트가 발생했음을 알릴 수 있음
- 주로 모델의 데이터 변경 또는 저장, 삭제와 같은 작업에 반응하여 추가적인 로직을 실행하고자 할 때 사용
- 예를 들어, 사용자가 새로운 게시글을 작성할 때마다 특정 작업(예: 이메일 알림 보내기)을 수행하려는 경우
환경 변수
-
environment variable
-
애플리케이션의 설정이나 동작을 제어하기 위해 사용되는 변수
-
환경 변수의 목적
- 개발, 테스트 및 프로덕션 환경에서 다르게 설정되어야 하는 설정 값이나 민감한 정보(ex. API key)를 포함
- 환경 변수를 사용하여 애플리케이션의 설정을 관리하면, 다양한 환경에서 일관된 동작을 유지하면서 필요에 따라 변수를 쉽게 변경할 수 있음
- 보안적인 이슈를 피하고, 애플리케이션을 다양한 환경에 대응하기 쉽게 만들어 줌
Vite에서 환경변수를 사용하는 방법
Vue 프로젝트 진행시 유용한 자료
-
Awesome Vue.js
- Vue와 관련하여 선별된 유용한 자료를 아카이빙 및 관리하는 프로젝트
- https://github.com/vuejs/awesome-vue
- https://awesome-vue.js.org/
-
Vuetify
- Vue를 위한 UI 라이브러리 (like 'Bootstrap')
- https://vuetifyjs.com/en/
