사용자 인증 정보가 없는 iframe: COEP 환경에 간편하게 iframe 삽입

Arthur Sonzogni
Arthur Sonzogni

이제 COEP를 사용하는 개발자는 COEP 자체를 사용하지 않는 서드 파티 iframe을 삽입할 수 있습니다.

사용자 인증 정보가 없는 iframe은 Chrome 버전 110부터 기본적으로 사용 설정됩니다. 이 솔루션은 Cross-Origin-Embedder-Policy (COEP)를 사용하는 개발자들이 COEP를 설정하지 않는 서드 파티 iframe 삽입과 관련하여 제기하는 가장 일반적인 불만사항을 해결합니다.

COEP가 필요한 이유

일부 웹 API는 스펙터와 같은 부채널 공격의 위험을 높입니다. 이러한 위험을 완화하기 위해 브라우저는 교차 출처 격리라고 하는 선택 기반의 격리 환경을 제공합니다. 이 환경에는 COEP를 배포해야 합니다. 교차 출처 격리는 웹사이트에서 SharedArrayBuffer, performance.measureUserAgentSpecificMemory(), 더 나은 해상도의 고정밀 타이머 등 권한이 있는 기능을 사용할 수 있게 해줍니다.

교차 출처 격리를 사용 설정하려면 웹사이트에서 다음 HTTP 헤더를 전송해야 합니다.

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

COEP:credentiallessrequire-corp의 대안으로 사용할 수도 있습니다. 자세한 내용은 문서를 참고하세요.

COEP 사용 설정 관련 문제

교차 출처 격리를 사용하면 웹페이지의 보안이 향상되고 강력한 기능을 사용할 수 있게 되지만 COEP 배포는 어려울 수 있습니다. 가장 큰 문제 중 하나는 모든 교차 출처 iframe에서 COEP 및 CORP를 배포해야 한다는 점입니다. 이러한 헤더가 없는 iframe은 브라우저에 의해 로드되지 않습니다.

사용자 인증 정보가 없는 iframe 요청

COEP를 설정하지 않는 서드 파티 iframe을 삽입할 수 있도록 <iframe credentialless>가 도입됩니다. credentialless 속성을 <iframe> 요소에 추가하면 iframe이 비어 있는 다른 컨텍스트에서 로드됩니다. 특히 쿠키 없이 로드됩니다. 이렇게 하면 COEP 제한을 삭제할 수 있습니다.

예:

<iframe credentialless src="https://example.com">

이 iframe은 새로운 임시 컨텍스트에서 생성되며 최상위 웹사이트와 연결된 쿠키에 액세스할 수 없습니다. 대신 빈 쿠키 단지로 시작합니다. 마찬가지로 LocalStorage, CacheStorage, IndexedDB 등과 같은 Storage API는 데이터를 로드하고 새로운 임시 파티션에 저장합니다. 파티션의 범위는 현재 최상위 문서 및 iframe의 출처 모두로 지정됩니다. 최상위 문서가 로드 취소되면 이 저장공간이 모두 삭제됩니다.

사용자 인증 정보 없는 iframe에는 COEP 삽입 규칙이 적용되지 않습니다. 이러한 파일은 여전히 안전합니다. 매번 새로운 빈 컨텍스트에서 로드되기 때문에 공격자가 노리는 맞춤형 데이터가 포함되어서는 안 됩니다. iframe에 공개 데이터만 포함되어 있으면 공격자에게 도움이 되지 않습니다.

데모

사용자 인증 정보가 없는 iframe의 데모를 확인하세요.

FAQ

이 기능을 다른 브라우저에서도 사용할 수 있나요?

<iframe>가 사용자 인증 정보가 없는 <iframe credentialless> 내에 중첩되어 있나요?

예 상속되었습니다. iframe에 사용자 인증 정보가 없으면 credentialless 속성 없이도 전체 하위 트리의 모든 iframe에 적용됩니다.

<iframe credentialless>에서 생성된 팝업도 사용자 인증 정보가 없나요?

noopener가 설정된 것처럼 팝업이 열립니다. 새로운 일반 최상위 컨텍스트에서 생성되며 사용자 인증 정보가 없는 상태가 아닙니다. 사용자 인증 정보가 없는 iframe과 통신할 수 없습니다.

문서가 사용자 인증 정보가 없는 iframe에 삽입되었는지 어떻게 감지하나요?

window.credentialless는 사용자 인증 정보가 없는 iframe 내에서 true이고 그렇지 않은 경우 false입니다. <iframe credentialless>를 지원하지 않는 웹브라우저에서는 값이 undefined입니다.

자료