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 프레임워크를 사용하여 페이지를 동적으로 구성합니다.