[html] 웹 개발자를 위한 iframe 사용법과 팁 (feat. 티스토리 연동)

이번에 업무를 하면서 iFrame 태그를 사용해야 하는 일이 생길 것 같다.

그래서 iFrame 태그를 어떻게 사용하는지, 어떤 점을 주의해야 하는지 등에 대해 검토해 보았다.

 

iframe이란?

A라는 웹사이트의 특정 페이지를 B라는 웹사이트에 삽입하고 싶을 때 사용하는 태그이다.

<iframe src="삽입할 대상 웹사이트의 url" 
        width="100%" 
        height="600" 
        style="border: 1px solid #ccc;" 
        frameborder="0">
</iframe>

 

이런 식으로 다른 웹사이트의 페이지 전체를 이식해 올 수 있다.

아래는 내가 예전에 만든 간단한 웹서비스 페이지를 이식한 것이다.

 

 

이처럼 다른 웹사이트의 특정 페이지를 불러와서 내 웹사이트에 삽입하는 태그가 iframe 태그이다.

 

iframe 사용의 장점

iframe 태그를 이용하면 기능 접근 가능한 웹페이지의 기능을 매우 빠르고 간단하게 구현할 수 있다.

또한, 기존 페이지의 UI/UX를 100% 동일하게 보여줄 수 있다.

 

즉, 회사 내의 특정 서비스 페이지를 다른 웹사이트에 보여줘야 하는 경우 큰 강점을 지닌다.

 

 

주의할 부분

 

iframe은 유용한 태그이지만, 여러 가지 단점이 존재하므로 신중하게 사용해야 한다.

1. 보안 문제: 만약 iframe으로 불러오는 외부 페이지가 악의적인 스크립트를 포함했다면, 내 웹사이트의 사용자들에게 보안 위협이 될 수 있다. 신뢰할 수 없는 사이트는 절대로 가져와선 안된다.
2. 성능 저하: iframe은 페이지 안에 또 다른 페이지를 삽입하는 것이다. 따라서 내 웹사이트의 로딩속도 + 삽입한 웹사이트의 로딩속도로 성능 저하가 발생할 우려가 있다.
3. 검색 엔진 최적화에 불리: 검색 엔진은 iframe 내부의 콘텐츠를 부모 페이지의 콘텐츠로 인식하지 않을 수 있다. 
4. 반응형 디자인: iframe 내부의 콘텐츠는 부모 페이지의 크기에 맞춰 자연스럽게 조절되지 않을 수 있다.
5. 뒤로 가기: iframe 내부에서 여러 페이지를 이동하는 경우, 브라우저의 '뒤로 가기' 버튼은 iframe 내부가 아닌 부모 페이지의 이전 기록으로 이동하게 된다.

 

 

 

고려할 부분

1. iframe 전용 경량화 페이지 제공을 고려한다. 기존 페이지에는 header나 footer, 광고 또는 스크립트 등 이식하려는 페이지에는 필요 없는 기능들이 존재한다. 이 기능들은 페이지의 로딩 속도와 사용자 경험을 저해할 수 있다. 따라서 가능하다면 꼭 필요한 기능만 제공할 수 있는 경량화된 페이지를 생성하여 경량 페이지를 이식한다.
2. 보안 헤더를 설정한다. 페이지를 제공하는 웹서버에 보안 헤더를 설정해서 허가된 도메인으로만 페이지를 제공한다.
3. 만약 iframe에서 선택한 특정 요소에 대해 통신 연결이 필요한 경우, postMessage를 구현해서 부모 페이지에 정보를 넘긴다.
4. 이식한 페이지에선 postMessage에 대응하는 함수를 만들어 정보를 수신한다.

Nginx 설정

Content-Security-Policy: frame-ancestors [제공 받을 서버의 도메인 주소];

 

보내는 쪽

// iframe 내부
link.addEventListener('click', (e) => {
  e.preventDefault();
  const postId = '12345';
  // 부모 창으로 메시지 전송
  window.parent.postMessage({ type: 'postClick', id: postId }, 'https://example.com');
});

 

받는 쪽

// 부모 페이지
window.addEventListener('message', (event) => {
  // 자식 도메인에서 온 메시지만 신뢰
  if (event.origin !== 'https://target.com') return;

  if (event.data.type === 'postClick') {
    const postId = event.data.id;
    // 전달받은 ID로 새로운 페이지를 열거나 처리
    window.open(`https://example.com/posts/${postId}`);
  }
});

 

---

티스토리에 iframe 삽입

위의 드럼머신은 내 서버에서 돌아가고 있는 서비스이다.

nginx 웹서버로 서빙 중이고, 티스토리 블로그에 iframe을 이용하여 삽입했다.

 

다음은 nginx 설정이다.

server {
	...
    listen 80;
    server_name sub.your-domain.com;
	
    location / {
        ...
        
        # "내 콘텐츠는 https://your-domain.com 이라는 부모 안에서만 프레임으로 표시될 수 있어" 라는 의미
        add_header Content-Security-Policy "frame-ancestors https://your-domain.com;";
    }
    
    ...
}

 

다음은 티스토리의 HTML 에디터를 연다.

<p>
  <iframe src="도메인~" width="100%" height="1000" frameborder="0"></iframe>
</p>

 

위와 같은 설정으로 간단하게 특정 웹페이지를 내 콘텐츠에 삽입할 수 있다.