Skip to content

2주차: Origin에 의한 애플리케이션 간 접근 제한#9

Merged
dhyun2 merged 2 commits intomainfrom
dowoon
Mar 31, 2025
Merged

2주차: Origin에 의한 애플리케이션 간 접근 제한#9
dhyun2 merged 2 commits intomainfrom
dowoon

Conversation

@doun4576
Copy link
Copy Markdown
Contributor

@doun4576 doun4576 commented Mar 30, 2025 •
edited
Loading

주요 내용

  • 애플리케이션 간 동일 출처, 교차 출처로의 접근
  • 교차 출처 간 리소스 공유(cross-origin resource sharing, CORS)를 위한 설정
  • 각종 CORS 요청 모드 및 쿠키 포함 전송
  • crossorigin 속성

질문 & 인사이트

1. 왜 POST 요청은 리소스를 변경함에도 simple request인가?
전통적인 웹의 경우 GET, POST만 지원 및 두 메서드를 기본적인 웹 상호작용으로 간주함. CORS는 이전 브라우저 호환성과 새로운 보안 요구사항 사이의 타협안이기에 기존 웹사이트 동작을 크게 방해하지 않으면서 보안을 강화하는 방향으로 설계되었음.

  1. Vite 등으로 웹 애플리케이션 빌드 시 crossorigin 속성이 포함되는 이유
    예를 들어 아래와 같은 index.html이 있는 경우,
<html>
  <head>
    <title>WEB</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

빌드 시 다음과 같이 변환됨.

<html>
  <head>
    <title>WEB</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script type="module" crossorigin src="/assets/index-DXy6v1rG.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

ES Module은 기본적으로 CORS 검사를 수행하고 모듈 스크립트는 서로 다른 출처에서 로드될 때 CORS 규칙을 따라야함. 또한 crossorigin 속성이 있어야만 다른 출처에서 로드된 스크립트의 자세한 오류 정보를 얻을 수 있음. 추가로 모던 웹 애플리케이션에선 코드 스플리팅으로 여러 청크로 나누어 로드하는 경우가 많은데 이때 청크들 간의 CORS 문제를 예방하기 위해 사용됨.

  1. 토스페이먼츠 cors 에러

@dhyun2 dhyun2 merged commit 2cd9562 into main Mar 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dhyun2 dhyun2 Awaiting requested review from dhyun2

@seongbin9786 seongbin9786 Awaiting requested review from seongbin9786

@wogha95 wogha95 Awaiting requested review from wogha95

@yonghyun421 yonghyun421 Awaiting requested review from yonghyun421

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@doun4576 @dhyun2