웹에 객체 임베딩 <iframe>, <object>, <embed>

<iframe>: 다른 HTML 페이지 중첩하는 브라우징 컨텍스트 

youtube iframe 예시: 

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/QH2-TGUlwu4" 
    title="YouTube video player" 
    frameborder="0" allow="accelerometer; 
    autoplay; clipboard-write; encrypted-media; 
    gyroscope; picture-in-picture" allowfullscreen>
</iframe>

HTML  iframe 예시: 

<iframe src="https://neda.tistory.com/"
          width="100%" height="20%" allowfullscreen sandbox
          style="border:2px solid #111111;"
          >
  </iframe>

기본적인 적용사항

• border : none
  • 브라우저에서 기본적으로 표시하는 테두리 제거한다. 
• allowfullscreen
  • 전체화면 기능을 가능하게 한다
• Fallback content
  • chlidren 값으로 대체 컨텐츠를 넣어 iframe이 지원하지 않을 때 표시

<iframe src="http://fqawg.drydyr/"
          width="100%" height="20%" allowfullscreen sandbox
          style="border:2px solid #111111;"
          >
          <p>
          	<a href="https://neda.tistory.com/">
            	blog home page
            </a>
          </p>
  </iframe>

• sandbox
  • 강화된 보안 설정 <- 필수적 

보안문제

iframe으로 다른 이의 컨텐츠를 포함할 때에는 완전히 신뢰할 수 있을 때까지는 믿어서는 안되고

위험하다고 가정해야 한다.

=> HTTPS 필요성 

<object> 외부 개체 요소

이미지나 중첩된 브라우징 컨텍스트, 플러그인으로 처리할 수 있는 리소스 등의 외부 리소스

<object type="application/pdf"
    data="http://www.africau.edu/images/default/sample.pdf"
    width="250"
    height="200">
</object>

<embed> 외부 콘텐츠 요소

<embed type="video/webm"
       src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"
       width="250"
       height="200"
       title="red flower">
</embed>