삽입된 콘텐츠는 다른 페이지 또는 사이트의 콘텐츠를 공유하면서 사용자를 사이트에 머물게 하는 가장 좋은 방법입니다. 트위터의 스타일과 형식으로 표시되는 삽입된 트윗만큼 작을 수 있습니다 삽입된 Shopify 스토어와 같이 방문자가 사이트를 나가지 않고도 구매할 수 있는 삽입된 완전히 별도의 사이트만큼 클 수 있습니다.
콘텐츠를 삽입할 때 사이트의 보안을 유지하는 것이 그 어느 때보다 중요합니다.
개발자가 웹사이트에 콘텐츠를 삽입하는 방법에는 여러 가지가 있습니다. 가장 일반적인 방법은 URL만으로 모든 콘텐츠를 사이트에 삽입할 수 있는 <iframe>를 사용하는 것입니다. 이미 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>)은 삽입된 콘텐츠에 제안되는 HTML 요소로, iframe과 유사합니다. 분리 프레임은 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 플러그인을 표시하는 데 일반적으로 사용되었지만 iframe과 마찬가지로 다른 HTML 요소를 표시하는 데도 사용되었습니다.
<canvas>, <audio>, <video>, <svg>와 같은 다른 요소는 <object> 및 <applet> 요소를 모두 지원 중단했습니다.
<object> 및 <embed>는 아직 공식적으로 지원 중단되지는 않았지만, 특히 이상한 동작이 있으므로 사용하지 않는 것이 좋습니다.
<applet>는 2017년에 HTML 사양에서 삭제되었습니다.
결론
기존 iframe 사양을 사용하여 모든 웹사이트에 콘텐츠를 안전하게 삽입할 수 있습니다. 보안 및 스타일 개선을 위해 <fencedframe> 및 <portal>를 비롯한 더 많은 HTML 요소가 제안되었습니다. 울타리 프레임 제안의 진행 상황은 계속해서 공유할 예정입니다.