삽입된 콘텐츠는 다른 페이지나 사이트의 콘텐츠를 공유하면서 사용자를 내 사이트에 유지하는 가장 좋은 방법입니다. Twitter 스타일과 형식으로 표시되는 삽입된 트윗과 같이 작을 수도 있습니다. 방문자가 사이트를 나가지 않고 구매할 수 있는 삽입된 Shopify 매장과 같이 자체 사이트에 삽입된 완전히 별도의 사이트일 수도 있습니다.
콘텐츠를 삽입할 때 사이트의 보안을 유지하는 것이 그 어느 때보다 중요합니다.
개발자가 웹사이트에 콘텐츠를 삽입하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 <iframe>를 사용하는 것입니다. 이를 통해 URL만으로 사이트에 콘텐츠를 삽입할 수 있습니다. 이미 sandbox 속성을 추가하여 iframe을 더 안전하게 만들 수 있습니다.
또는 제안된 HTML 요소를 사용할 수 있습니다.
<fencedframe>는 서드 파티 콘텐츠를 삽입하는 개인 정보 보호 방법으로 제안됩니다.<portal>는 더 원활한 페이지 전환을 위해 제안됩니다.
삽입된 콘텐츠의 보안을 개선하는 방법을 알아보세요.
iframe으로 삽입하기
iframe은 연락처 페이지에 지도나 양식을 추가하고 광고를 표시하는 등 다양한 사용 사례에 사용할 수 있습니다.
<iframe src="https://example.com/maps"></iframe>
각 iframe에는 자체 세션 기록과 문서가 있는 자체 탐색 컨텍스트가 있습니다. iframe을 삽입하는 컨텍스트를 상위 탐색 컨텍스트라고 합니다.
iframe에 표시된 서드 파티 콘텐츠는 postMessage()를 통해 상위 사이트와 상호작용할 수 있습니다. 이를 통해 개발자는 탐색 컨텍스트 간에 임의의 값을 전송할 수 있습니다. 메시지 수신자는 이벤트 리스너 onmessage를 사용하여 값을 수신할 수 있습니다.
// inside iframe
window.parent.postMessage("ping", "https://example.com");
// window
window.addEventListener("message", (event) => {
console.log(event.data);
})
sandbox 속성으로 보안 추가
악성 콘텐츠가 iframe에 배포되면 의도하지 않은 작업 (예: JavaScript 실행 또는 양식 제출)이 실행될 수 있습니다.
이를 방지하기 위해 sandbox 속성은 iframe에서 실행 가능한 API를 제한하고 잠재적으로 유해한 기능을 사용 중지합니다.
<iframe src="https://example.com" sandbox></iframe>
샌드박스로 인해 삽입된 콘텐츠에 중요한 특정 API를 사용하지 못할 수 있습니다. 사용 중지된 API를 허용하려면 샌드박스 속성에 인수를 명시적으로 추가하면 됩니다.
<iframe sandbox="allow-forms" src="https://example.com"></iframe>
sandbox 사양에는 allow-forms, allow-same-origin, allow-popups 등 다양한 값이 있을 수 있습니다.
권한 정책
웹을 위한 강력한 기능이 점점 더 많이 개발됨에 따라 이러한 모든 기능의 권한을 관리하기 위해 권한 정책이 만들어졌습니다. 권한 정책은 상위 사이트와 iframe 콘텐츠에 적용할 수 있습니다. 상위 사이트에 부여된 권한은 allow 속성을 사용하여 iframe에도 부여할 수 있습니다.
<iframe src="https://example.com" allow="fullscreen"></iframe>
분리 프레임으로 삽입
분리 프레임 (<fencedframe>)은 iframe과 비슷하게 삽입된 콘텐츠에 대해 제안된 HTML 요소입니다. 분리 프레임은 iframe과 달리 삽입 컨텍스트와의 통신을 제한하여 프레임이 삽입 컨텍스트와 공유하지 않고도 크로스 사이트 데이터에 액세스할 수 있도록 합니다. 마찬가지로, 부모 페이지의 퍼스트 파티 데이터는 차단된 프레임과 공유할 수 없습니다.
<fencedframe src="https://3rd.party.example"></fencedframe>
펜스 처리된 프레임은 최상위 사이트가 데이터를 파티셔닝해야 한다고 제안하는 개인 정보 보호 샌드박스 제안서입니다. 개인 정보 보호 샌드박스 제안의 대부분은 서드 파티 쿠키나 기타 추적 메커니즘 없이 크로스 사이트 사용 사례를 충족하는 것을 목표로 합니다. 특정 개인 정보 보호 샌드박스 API에서는 선택한 문서가 펜스 처리된 프레임 내에서 렌더링되어야 할 수 있습니다.
예를 들어 FLEDGE API 광고 입찰의 낙찰자를 위해 차단된 프레임이 생성됩니다. FLEDGE API는 불투명 소스, 위치 독립 URN 스키마를 제공하며, 이는 차단된 프레임 내에서 렌더링될 수 있습니다. 불투명 소스를 사용하면 사이트 소유자에게 광고 소스 URL을 공개하지 않고도 사이트에 콘텐츠를 표시할 수 있습니다.
<fencedframe src="urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a"></fencedframe>
궁극적으로는 차단된 프레임이 iframe을 대체하지 않습니다. 사용하지 않아도 됩니다. 펜스 처리된 프레임은 서로 다른 최상위 파티션의 데이터를 동일한 페이지에 표시해야 할 때 사용할 수 있는 더 비공개적인 프레임으로 제안됩니다.
포털로 삽입
포털 (<portal>)은 독립적인 탐색 컨텍스트가 있는 제안된 HTML 요소로, 페이지 전환 환경을 개선할 수 있습니다. 포털은 iframe과 같은 콘텐츠를 삽입하지만 사용자는 포털의 코드에 액세스할 수 없습니다. 포털은 보기 전용이며 사용자가 상호작용할 수 없습니다.
포털은 다중 페이지 애플리케이션의 낮은 복잡성과 단일 페이지 애플리케이션의 원활한 전환을 제공합니다. 이러한 전환은 애니메이션으로 처리되어 브라우저 창의 콘텐츠를 빠르게 대체할 수 있습니다.
<portal src="https://example.com/"></portal>
포털 사양은 아직 개발 초기 단계에 있습니다.
삽입에 사용되는 기타 HTML 요소
웹 역사 전반에 걸쳐 콘텐츠를 삽입하기 위해 여러 HTML 요소가 제안되고 API가 생성되었습니다. 한동안 여러 <frame> 및 <frameset> 요소로 사이트를 만드는 것이 일반적이었습니다. <frameset> 요소가 여러 개 있는 사이트는 개별 프레임의 소스와 관계없이 주소 표시줄에 상위 페이지의 URL을 표시했습니다. 이로 인해 사이트 내 콘텐츠 링크를 공유하기가 어려웠습니다. 이러한 API는 이후 지원이 중단되었습니다.
Java <applet> 요소와 같은 플러그인 기술이 다른 사용 사례를 처리하는 데 사용된 적도 있습니다. 이후 <object> 요소로 대체되었습니다. 이 두 요소는 모두 Flash 플러그인을 표시하는 데 일반적으로 사용되었지만 다른 HTML 요소 (iframe과 유사)를 표시하는 데도 사용되었습니다.
<canvas>, <audio>, <video>, <svg>와 같은 다른 요소로 인해 <object> 및 <applet> 요소가 모두 사용되지 않게 되었습니다.
<object> 및 <embed>는 아직 공식적으로 지원 중단되지 않았지만, 특히 이상한 동작이 있으므로 사용하지 않는 것이 좋습니다.
<applet>은(는) 2017년에 HTML 사양에서 삭제되었습니다.
결론
기존 iframe 사양을 사용하여 콘텐츠를 모든 웹사이트에 안전하게 삽입할 수 있습니다. 보안 및 스타일 개선을 위해 <fencedframe> 및 <portal>을 비롯한 더 많은 HTML 요소가 제안되었습니다. 펜스 처리된 프레임 제안의 진행 상황을 계속해서 공유해 드리겠습니다.