✨
Saltberry
GithubLinkedIn
  • 개요 Overview
  • 📝HTML/CSS
    • 구조 HTML
    • 스타일 CSS
      • z-index
  • 📦개발 Development
    • 개발 Implementation
    • 단어 Glosarry
    • 깃 Git
    • 해시 Hash
    • 노드 패키지 매니저 Node Package Manager
    • 브라우저 랜더링 Browser Rendering Process
    • 교차 출처 리소스 공유 CORS
    • 인터프리터 Interpreter
    • Object-oriented programming(OOP) 객체지향 프로그래밍
  • 💡CS 50
    • Computational Thinking
  • ✨자바스크립트 Javascript
    • 자바스크립트란 What is JavaScript
    • 표현식과 문 Expression Statement
    • 변수 Variable
    • 함수 Function
    • 참과 거짓 값 Truth Falsy
    • 배열 Array
    • Import Export
    • 스택과 큐 Stack Queue
    • 문서객체모델 Document Object Model
      • 개요 Overview
      • 도큐먼트 Document
      • HTMLCollection
      • getMethod
      • NodeList
      • childNodes, children
      • Event
      • live, static
      • Element
      • DOM Token
      • 속성 attribute
      • implementation
      • 노드 Node
      • HTMLElement
    • 브라우저 저장소 Cookie Web Storage
  • 🎁리액트 React
    • 리액트 톧아보기 Overview
    • Intro
      • 상태의 불변성 State Immutability
      • Props and State
      • Hooks
    • Concepts
  • 🚦타입스크립트 Typescript
    • Page 1
  • 🗃️리덕스 Redux
    • 왜 리덕스를 사용할까 Why Redux
    • 플럭스 Flux
  • 📬넥스트 Nextjs
    • Pages
  • ✅면접 Interview
    • Index
    • Implement experiences
    • Best practice for query parameter and fetch
  • 🚀TECH
    • Lists
    • Zustand
  • 🧬Algorithm
    • Types of algorithms
    • 이진수 변환 Binary Number
    • 후위 연산자 Postfix expression
    • 선택 정렬 Selection Sort
    • Find longest substring without repeating characters
    • 올바른 괄호 Valid Parentheses
  • 📔Mathematics
    • 다항식 Polynomial
  • 🗂️Database
    • 데이터베이스 Database
  • 📝Class
    • 자료구조 Data Structure
      • 배열 Array
    • C++ 프로그래밍
      • C++ 기초
    • 소프트웨어 공학 Software engineering
      • 소프트웨어 개요 Software overview
      • 소프트웨어 프로세스 Software process
    • 자바 Java
      • 자바와 객체지향 프로그래밍 Java and OOP(Object-oriented programming)
  • Java
    • 자바가 뭐지?
  • CA EI
    • CA EI
Powered by GitBook
On this page
  • CORS가 뭐야?
  • CORS 정책의 배경
  • 어떤 보안 문제가 발생 할 수 있어?
  • URL 구조
  • 프로토콜
  • 도메인 Host
  • Port
  • 자신의 출처 Origin Resource
  1. 개발 Development

교차 출처 리소스 공유 CORS

Cross Origin Resource Sharing

Last updated 1 year ago

CORS가 뭐야?

CORS(Cross Origin Resource Sharing)는 브라우저에서 실행 중인 어플리케이션이 자신의 출처가 아닌 다른 출처의 자원에도 접근할 수 있도록 교차 출처 HTTP 요청을 허용하는 정책을 의미한다.

CORS 정책의 배경

웹 브라우저는 동일 출처 정책 SOP(Same-Origin Policy)에 기반한다. 해당 정책은 웹 페이지가 다른 출처의 리소스에 진입하는 것을 제한하여 악의적인 스크립트에 의한 사용자 정보 노출 및 변조를 방지하고자 보안의 측면에서 기반하고 있다. 즉, 웹 브라우저를 사용하는 유저를 보호하기 위함이다.

과거 웹 페이지는 보기만 할 수 있었던 시대에는 웹 브라우저 <> 서버 와의 통신만으로 충분했기 때문에 다른 사이트에 요청을 날리는 것은 악의적인 행동이라 보았기에 SOP 정책을 만들게 된 것이다. 하지만 유저의 요구사항에 맞춰 어플리케이션으로 발전하면서 다양한 요청이 필요하나 SOP 정책으로 다이렉트로 요청은 어렵기에 이를 해결하기 위해 다음과 같은 방법을 이용했다.

브라우저는 a.com 서버로만 요청을 할 수 밖에 없기 때문에 a.com 서버가 b.com 서버와 통신하여 필요한 데이터를 받아서 다시 브라우저에 제공하는 방식으로 우회했다. 그래서 브라우저에서는 다른 리소스에도 요청을 날릴 수 있도록 CORS 정책을 만들게 되었다.

어떤 보안 문제가 발생 할 수 있어?

XSS, CSRF(XSRF) 등으로 우리가 만든 웹에서 해커가 심어놓은 코드가 실행하여 개인정보를 가로챌 수 있다.

서버는 Response에 클라이언트는 Request에 CORS 옵션을 작성해주면 된다.

URL 구조

프로토콜

  • HTTP(Hyper Text Transfer Protocol) 프로토콜(규약)

  • 웹에서 클라이언트와 서버가 어떤 방법으로 자원에 접근할 지 알려줌

도메인 Host

  • IP 주소를 대신해서 사용하는 주소

  • DNS(Domain Name System) 서버를 이용해서 IP와 도메인을 매칭 > DNS가 coupang.com 주소를 IP 주소로 변환

  • example.com 메인 도메인, www 는 서브 도메인

Port

  • http는 80번, https는 443번

  • 포트는 옵셔널로 숨겨진다.

자신의 출처 Origin Resource

프로토콜+도메인 이름+포트 https://www.coupang.com:443

이 중에서 하나라도 다르면 정책을 위반한다.

http/https 말고도 mailto, ftp 등 다양한 프로토콜 있음

📦
1)
🥁 CORS는 왜 생겼을까요?🥁 CORS는 왜 생겼을까요?
🌐 악명 높은 CORS 개념 & 해결법 - 정리 끝판왕 👏Inpa Dev 👨‍💻
CORS가 없던 시절
URL 구조
Logo
Logo