삽입된 콘텐츠는 다른 페이지나 사이트의 콘텐츠를 공유하면서 사용자가 내 사이트에 머무르도록 하는 가장 좋은 방법입니다. 트위터의 스타일과 형식으로 표시되는 삽입 트윗만큼 작을 수도 있습니다 방문자가 내 사이트에서 나가지 않고도 구매할 수 있는 Shopify 매장과 같이 자체 사이트에 완전히 분리된 사이트와 같은 규모가 될 수 있습니다.
콘텐츠를 삽입할 때 사이트의 보안을 유지하는 것이 그 어느 때보다 중요해졌습니다.
개발자가 웹사이트에 콘텐츠를 삽입할 수 있는 몇 가지 방법이 있습니다. 가장 일반적인 방법은 URL만으로 사이트에 콘텐츠를 삽입할 수 있는 <iframe>를 사용하는 것입니다. 이미 sandbox 속성을 추가하여 iframe을 더 안전하게 만들 수 있습니다.
또는 제안된 HTML 요소를 사용할 수 있습니다.
<fencedframe>는 서드 파티 콘텐츠를 삽입하는 개인 정보 보호 방법으로 제안됩니다.- 더 원활한 페이지 전환을 위해
<portal>가 제안됩니다.
퍼간 콘텐츠의 보안을 강화하는 방법을 알아보세요.
iframe으로 삽입
iframe은 연락처 페이지에 지도 또는 양식을 추가하거나 광고를 표시하는 등 다양한 사용 사례에 사용할 수 있습니다.
<iframe src="https://example.com/maps"></iframe>
각 iframe에는 자체 세션 기록과 문서가 있는 자체 탐색 컨텍스트가 있습니다. iframe을 삽입하는 컨텍스트를 parent 탐색 컨텍스트라고 합니다.
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 (<portal>)은 독립적인 탐색 컨텍스트를 포함하는 제안된 HTML 요소로, 페이지 전환 환경을 개선할 수 있습니다. 포털은 iframe과 같은 콘텐츠를 삽입하지만 사용자는 포털의 코드에 액세스할 수 없습니다. 포털은 보기 전용이며 사용자와 상호작용할 수 없습니다.
포털은 단일 페이지 애플리케이션의 원활한 전환을 통해 다중 페이지 애플리케이션의 낮은 복잡성을 제공합니다. 이러한 전환은 애니메이션을 적용하여 브라우저 창의 콘텐츠를 빠르게 대체할 수 있습니다.
<portal src="https://example.com/"></portal>
포털 사양은 아직 개발 초기 단계입니다.
삽입에 사용되는 기타 HTML 요소
웹 기록 전반에 걸쳐 여러 HTML 요소가 제안되고 콘텐츠를 삽입하기 위해 만들어진 API가 있습니다. 한동안은 여러 <frame> 및 <frameset> 요소가 포함된 사이트를 만드는 것이 일반적이었습니다. 여러 <frameset> 요소가 있는 사이트는 여러 개별 프레임의 소스에 관계없이 주소 표시줄에 상위 페이지의 URL을 표시했습니다. 이로 인해 사이트 내에서 콘텐츠 링크를 공유하기가 어려웠습니다. 이러한 API는 이후 지원 중단되었습니다.
또한 자바 <applet> 요소와 같은 플러그인 기술을 사용하여 다른 사용 사례를 처리하는 경우도 있었습니다. 이는 나중에 <object> 요소로 대체되었습니다. 이 두 요소는 일반적으로 Flash 플러그인을 표시하는 데 사용되었지만, iframe과 유사하게 다른 HTML 요소를 표시하는 데에도 사용되었습니다.
<canvas>, <audio>, <video>, <svg>와 같은 다른 요소는 <object> 및 <applet> 요소를 모두 더 이상 사용하지 않도록 렌더링했습니다.
<object> 및 <embed>는 아직 공식적으로 지원 중단되지는 않았지만 특히 이상한 동작이 있으므로 피하는 것이 가장 좋습니다.
<applet>는 2017년에 HTML 사양에서 삭제되었습니다.
결론
기존 iframe 사양을 사용하여 모든 웹사이트에 콘텐츠를 안전하게 삽입할 수 있습니다. 보안 및 스타일 개선을 위해 <fencedframe> 및 <portal>를 비롯하여 더 많은 HTML 요소가 제안되었습니다. 분리 프레임 제안서가 진행됨에 따라 계속해서 진행 상황을 공유할 예정입니다.
Jackson So의 히어로 이미지