무인증 IFrame

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

실험적: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

비표준: 이 기능은 비표준이므로 실제 프로덕션에서 사용하지 마세요. 모든 사용자 환경에서 작동하지 않을 수 도 있으며, 미래에 호환성 문제가 생길 수 있습니다.

무인증 IFrame은 개발자가 새로운 임시 컨텍스트를 사용하여 <iframe>에서 타사 리소스를 로드할 수 있는 메커니즘을 제공합니다. 이는 일반 원본의 네트워크, 쿠키, 그리고 저장소 데이터에 액세스할 수 없습니다. 최상위 문서의 수명에 대해 새로운 컨텍스트 공간을 사용합니다. 그 결과 Cross-Origin-Embedder-Policy(COEP)가 해제될 수 있으므로 COEP가 설정된 문서는 COEP가 설정되지 않은 타사 문서를 포함할 수 있습니다.

문제점

다양한 웹 API 기능은 교차 출처 격리를 선택한 사이트에서만 사용할 수 있습니다. 그 예로는 SharedArrayBuffer고해상도 타이머가 있습니다. 그 이유는 이러한 기능들이 스펙터 공격에 악용되어 사이드 채널을 통해 피해자의 기밀 정보가 유출되고 공격자가 캡처할 수 있는 위험이 있기 때문입니다.

교차 출처 격리를 선택하려면 same-origin(공격자로부터 출처를 보호) 값을 갖는 Cross-Origin-Opener-Policycredentiallessrequire-corp(원본으로부터 피해자를 보호) 값을 갖는 Cross-Origin-Embedder-Policy를 사용하여 리소스를 제공해야 합니다. 후자는 Cross-Origin-Resource-Policy 또는 교차 출처 리소스 공유를 사용하여 문서에 명시적으로 권한을 부여하지 않은 인증된 교차 출처 리소스를 문서에 로드하지 못하도록 합니다.

교차 출처 격리 채택을 제한하는 핵심적인 문제는 Cross-Origin-Embedder-Policy가 재귀적으로 적용된다는 사실입니다. 즉, Cross-Origin-Embedder-Policy가 설정된 문서에 있는 <iframe>에 로드된 모든 타사 콘텐츠도 Cross-Origin-Embedder-Policy를 배포해야 콘텐츠를 성공적으로 불러올 수 있습니다. 이는 자신의 앱에 타사 콘텐츠(예: 애드 네트워크 콘텐츠)를 삽입하는 개발자가 일반적으로 이를 제어할 수 없기 때문에 문제가 되는데, 지금까지는 타사 콘텐츠 제공 업체가 Cross-Origin-Embedder-Policy를 구현할 때까지 기다리는 것이 유일한 선택지였습니다.

이 문제는 무인증 IFrame으로 해결할 수 있습니다.

해결책 - 무인증 IFrame

<iframe>credentialless 속성을 적용하거나 이에 상응하는 DOM 속성인 HTMLIFrameElement.credentiallesstrue로 설정하여 무인증 상태로 만들 수 있습니다.

html
<iframe
  src="https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)"
  title="Spectre vulnerability Wikipedia page"
  width="960"
  height="600"
  credentialless></iframe>

또는

html
<iframe width="960" height="600"> </iframe>
js
const iframeElem = document.querySelector("iframe");

iframeElem.credentialless = true;
iframeElem.title = "Spectre vulnerability Wikipedia page";
iframeElem.src =
  "https://en.wikipedia.org/wiki/Spectre_(security_vulnerability)";

참고: <iframe>에 삽입된 문서가 window.credentialless 속성을 쿼리 하여 무인증 컨텍스트에서 실행되고 있는지 테스트할 수 있습니다. 값이 true 이면 삽입된 <iframe>이 무인증 상태임을 의미합니다.

그 결과 무인증 <iframe> 내부의 문서는 새롭고 임시적인 컨텍스트를 사용하여 로드되며, 이러한 컨텍스트는 출처와 관련된 데이터(예: 쿠키localStorage)에 접근할 수 없습니다. 무인증 저장소는 최상위 문서 당 한 번씩 설정되는 nonce("한 번 사용된 번호") 값으로 수정된 저장소 키를 통해 개별적으로 분할됩니다. 따라서 하나의 무인증 <iframe>에서 설정된 쿠키는 동일한 최상위 문서 아래에 삽입된 다른 동일 출처의 무인증 <iframe>에서만 접근할 수 있습니다.

nonce는 동일한 최상위 문서의 하위 문서인 모든 무인증 iframe에 공유되지만, 사용자가 탐색하는 각각의 최상위 문서마다 다르며, 사용자가 탐색하던 곳을 벗어나면 저장소에 더 이상 액세스할 수 없습니다. 무인증 IFrame은 여러 페이지에서 저장 공간을 공유하지 않습니다. 위에서 언급한 쿠키로 다시 돌아가자면, 문서를 다시 로드하면 또 다른 컨텍스트에서 무인증 <iframe>이 로드되므로 이전에 설정한 쿠키를 사용할 수 없게 됩니다.

추가로,

  • 무인증 iframe에서 열리는 팝업은 rel="noopener"가 설정된 상태로 열립니다. 이렇게 하면 무인증 iframe에서 OAuth 팝업 흐름이 사용되는 것을 방지할 수 있습니다.
  • 무인증 <iframes>에서 브라우저 자동 완성 또는 비밀번호 관리자 기능을 사용할 수 없습니다.

그 결과, 무인증 <iframe>에 로드된 문서는 사용자의 민감한 정보로 꾸며지지 않은, 사실상 순정 또는 "공개" 버전으로 로드됩니다. 이러한 문서에서 유출될 수 있는 민감한 정보는 없기 때문에, 공격자에게 쓸모 있는 내용은 없고, 해당 IFrame에 대한 교차 출처 삽입 정책 요구 사항은 삭제됩니다.

하위 IFrame 내부의 재귀적 무인증

만약 <iframe>credentialless가 설정되어 있다면, 해당 <iframe>에 내장된 자식 <iframe>에도 credentialless 설정이 상속됩니다.

실시간 데모

https://anonymous-iframe.glitch.me/ 데모를 사용하여 무인증 IFrame의 작동 방식을 확인할 수 있습니다.

명세서

Specification
Iframe credentialless

브라우저 호환성

BCD tables only load in the browser

같이 보기