JS & Jquery

[JS] Iframe 사용 안하는 이유

늑인 2024. 11. 20. 11:59

1. 보안상의 문제

1) Clickjacking 공격

  • iframe을 이용하여 사용자의 의도와는 다른 페이지를 보이도록 하거나, 민감한 정보 입력을 유도할 수 있습니다.
  • 예를 들어, 공격자가 투명한 iframe을 오버레이하여 사용자가 보이지 않는 버튼을 클릭하게 유도할 수 있습니다.
 
2) Cross-Origin 문제
  • iframe으로 다른 도메인을 로드하는 경우, 동일 출처 정책(Same-Origin Policy) 때문에 부모 페이지와 상호작용이 제한됩니다.
  • 예를 들어, iframe 내부의 데이터를 부모 페이지에서 직접 접근하거나 조작할 수 없습니다.

2. 유지보수 어려움

  • 복잡한 구조: iframe은 독립적인 문서를 포함하기 때문에 부모 페이지와는 별개의 DOM을 가집니다. 이로 인해 스타일(CSS)이나 스크립트(JavaScript)를 적용하거나 관리하기 어렵습니다.
  • 의도하지 않은 충돌: 부모와 iframe 간의 스타일 또는 스크립트가 충돌할 가능성이 있습니다.

3. SEO 및 접근성 문제

  • 검색 엔진은 iframe 내부의 콘텐츠를 크롤링하거나 색인화하기 어렵습니다.
  • 스크린 리더를 사용하는 사용자는 iframe 콘텐츠를 제대로 이해하지 못할 수 있습니다.

4. 성능 문제

  • iframe은 새로운 브라우저 문맥(Context)을 생성하므로 페이지 로드 시간이 길어지고 성능이 저하될 수 있습니다.
  • 많은 수의 iframe을 사용할 경우 렌더링 비용이 증가하고, 사용자 경험에 부정적인 영향을 미칩니다.

5. 대안 기술

현대 웹 개발에서는 iframe을 사용하는 대신, 다음과 같은 방법을 선호합니다:

1) JavaScript를 통한 데이터 렌더링 (API 호출)

  • REST API 또는 GraphQL API를 호출하여 데이터를 가져오고, 필요한 UI를 렌더링합니다.
  • 이를 통해 보안 및 성능 문제가 개선됩니다.

2) 웹 컴포넌트

  • iframe 대신 모듈화된 웹 컴포넌트를 사용하여 재사용 가능한 UI를 구현할 수 있습니다.

3) Reverse Proxy 사용

  • 서버 단에서 iframe 대신 Reverse Proxy를 활용하여 다른 콘텐츠를 통합합니다.

4) SPA (Single Page Application)

  • React, Vue.js, Angular와 같은 SPA 프레임워크를 사용하여 페이지를 동적으로 구성합니다.