동일 출처 정책은 한 출처의 문서 및 스크립트가 리소스와 상호작용할 수 있음 다른 출처에서 확인할 수 있습니다
브라우저는 여러 사이트의 리소스를 한 번에 로드하고 표시할 수 있습니다. 혹시 또는 사이트에서 여러 iframe을 삽입할 수 있습니다. 확인할 수 있습니다. 이 둘 사이의 상호작용에 제한이 없다면 스크립트가 공격자에 의해 손상되면 스크립트가 사용자 브라우저의 모든 것을 노출할 수 있습니다.
동일 출처 정책은 다음에 대한 읽기 액세스를 차단하여 이러한 상황을 방지합니다. 다른 출처에서 로드된 리소스를 예로 들 수 있습니다 "그런데 잠깐만요." '이미지를 로드하여 다른 출처의 스크립트를 항상 사용합니다." 브라우저에서는 몇 가지 태그를 허용하여 다른 출처의 리소스를 삽입하는 경우 이 정책은 대부분 과거입니다. 사이트를 클릭재킹 같은 취약점에 노출시킬 수 있습니다. iframe을 사용할 수 있습니다. 교차 출처 읽기를 제한할 수 있습니다 Content Security 정책을 참조하세요.
무엇이 동일 출처로 간주되나요?
출처는 스키마 (예: 프로토콜이라고도 함)로 정의됩니다.
포트(지정된 경우), 호스트(HTTP 또는 HTTPS), 포트(지정된 경우) 세 가지 값이 모두 같을 때
두 URL의 경우 출처가 동일한 것으로 간주됩니다. 예를 들어
http://www.example.com/foo의 출처는 다음과 같습니다.
http://www.example.com/bar
https://www.example.com/bar 제외
스키마가 다르기 때문입니다
무엇이 허용되거나 차단되나요?
일반적으로 교차 출처 리소스가 차단됩니다
| iframe |
일반적으로 교차 출처 삽입은 X-Frame-Options 지시어에 따라 허용되지만, 교차 출처 읽기(예: JavaScript를 사용하여 iframe의 문서에 액세스)는 허용되지 않습니다.
|
| CSS |
교차 출처 CSS는 CSS 파일에 <link> 요소 또는 @import를 사용하여 삽입할 수 있습니다. 올바른 Content-Type 헤더가 필요할 수 있습니다.
|
| 양식 |
교차 출처 URL은 양식 요소의 action 속성 값으로 사용할 수 있습니다. 웹 애플리케이션은 양식 데이터를 교차 출처 대상에 쓸 수 있습니다.
|
| 이미지 | 교차 출처 이미지 삽입은 허용됩니다. 그러나 교차 출처 이미지 데이터 읽기 (예: JavaScript를 사용하여 교차 출처 이미지에서 바이너리 데이터 가져오기)는 차단됩니다. |
| 멀티미디어 |
교차 출처 동영상 및 오디오는 <video> 및 <audio> 요소를 사용하여 삽입할 수 있습니다.
|
| 스크립트 | 교차 출처 스크립트를 삽입할 수 있습니다. 그러나 특정 API (예: 교차 출처 가져오기 요청)에 대한 액세스는 차단될 수 있습니다. |
TODO: DevSite - 사고 및 확인 평가
클릭재킹을 방지하는 방법
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">'클릭재킹'이라고 하는 공격 iframe에 사이트를 삽입하고 오버레이
투명 버튼을 사용합니다. 사용자를 속입니다.
여러분의 애플리케이션에 액세스하고 있다고 생각하는 데
있습니다.
다른 사이트에서 iframe에 내 사이트를 삽입하지 못하도록 차단하려면 콘텐츠를 추가하세요.
보안 정책(frame-ancestors)
지시어
HTTP 헤더에 복사됩니다
또는 X-Frame-Options를 HTTP 헤더에 추가할 수 있습니다.
MDN
옵션 목록을 확인하세요.
마무리
브라우저가 게이트키퍼 역할을 한다고 생각하니 안심하셔도 됩니다. 웹 보안의 핵심입니다. 브라우저가 교차 출처 리소스에 액세스해야 하는 경우 애플리케이션을 실행할 수 있습니다 다음 가이드에서는 교차 출처 리소스 공유에 대해 알아봅니다. 교차 출처 리소스 로드가 비정상적임을 브라우저에 알리는 방법 신뢰할 수 있는 출처에서 허용됩니다.