iframe 요소 src 및 sandbox

<iframe> 요소는 현재 페이지 안에 다른 HTML 문서를 삽입합니다. 각 iframe에는 고유한 브라우징 컨텍스트, DOM 및 JavaScript 범위가 있습니다. iframe 내부의 콘텐츠는 명시적인 허가 없이는 상위 페이지의 DOM에 접근할 수 없습니다.

삽입할 URL을 src 특성에 지정합니다: <iframe src="https://example.com" width="800" height="600">. iframe은 새로운 브라우징 컨텍스트를 만듭니다. 접근성을 위해 title 특성이 필요합니다: title="Embedded map".

sandbox는 iframe 콘텐츠에 제한을 적용하여 기본적으로 스크립트, 폼, 팝업 및 플러그인을 비활성화합니다. 특정 권한을 추가하면 기능을 다시 활성화할 수 있습니다: sandbox="allow-scripts allow-same-origin".

allow-scripts: JavaScript를 활성화합니다. allow-same-origin: iframe을 동일 출처로 취급하도록 하며 localStorage에 접근할 때 필요합니다. allow-forms: 폼 제출을 활성화합니다. allow-popups: window.open()을 허용합니다. 필요한 최소 권한만 부여합니다.

교차 출처 iframe은 상위 DOM에 접근할 수 없으므로 parent.document는 보안 오류를 발생시킵니다. 교차 출처 프레임 간 통신에는 postMessage를 사용합니다: iframe.contentWindow.postMessage(data, origin).

상위 페이지에서 iframe으로 메시지를 보냅니다: iframe.contentWindow.postMessage({ type: "update", data: {} }, "https://embed.example.com"). iframe에서는 다음과 같이 메시지를 수신합니다: window.addEventListener("message", handler). 처리하기 전에 항상 event.origin을 확인합니다.

iframe에 loading="lazy"를 설정하면 iframe이 뷰포트에 가까워질 때까지 로딩을 지연하여 초기 페이지 로드를 줄입니다. 첫 화면 아래에 있는 지도, 동영상 삽입 콘텐츠 및 소셜 미디어 위젯처럼 즉시 보이지 않는 콘텐츠에 유용합니다.

각 아이프레임은 별도의 HTML 문서, CSS, JavaScript 및 웹 자산을 로드하므로 상당한 리소스 비용이 발생합니다. 스니펫으로 삽입할 수 있는 콘텐츠에는 아이프레임을 사용하지 마십시오. 첫 화면 아래에 있는 아이프레임은 지연 로드하십시오. 파사드 패턴(자리 표시자를 표시하고 클릭할 때 로드)을 고려하십시오.

아이프레임의 스크롤 동작을 제어하십시오. scrolling="no"는 스크롤 막대를 비활성화합니다(더 이상 사용되지 않으므로 아이프레임에 CSS overflow: hidden을 사용하십시오). 현대적인 방법은 아이프레임의 높이를 콘텐츠 높이에 맞춰 내부 스크롤 막대가 필요하지 않게 하는 것입니다.

allow 속성은 아이프레임에 권한 정책 기능을 부여합니다. allow="camera; microphone; fullscreen"을 사용하면 부모 출처에서 이러한 기능을 사용하지 않더라도 아이프레임이 카메라 액세스, 마이크 액세스 및 전체 화면 API를 요청할 수 있습니다.

YouTube와 Google 지도는 아이프레임 삽입 코드를 제공합니다. 이 코드에는 전체 화면과 자동 재생을 위한 allow 속성이 포함되어 있습니다. 화면 낭독기 접근성을 위해 항상 title="Video title"을 추가하십시오. 타사 삽입 코드에는 일반적으로 sandbox 속성을 추가하지 않습니다. 보안 지침은 해당 문서를 확인하십시오.

값을 지정하지 않은 sandbox 속성은 기본적으로 아이프레임에 어떤 동작을 적용합니까?

아이프레임은 격리된 브라우징 컨텍스트에 외부 문서를 삽입합니다. sandbox 속성은 아이프레임의 기능을 제한하므로 필요한 최소 권한만 부여해야 합니다. postMessage는 안전한 출처 간 통신을 가능하게 합니다. 지연 로딩은 첫 화면 아래에 있는 아이프레임의 리소스 비용 발생을 늦춥니다. allow 속성은 신뢰할 수 있는 타사 삽입 콘텐츠에 권한 정책 기능을 부여합니다.