박코딩

박코딩

공부기록 블로그

외부문서 삽입

1 minute read

iframe

외부문서를 삽입할 때 사용하는 태그이다.

<html>
  <body>
    <iframe width="400" height="240" src="https://www.youtube.com/embed/DbyILRPrIfo"></iframe>
  </body>
</html>

일반적으로 비디오를 문서에 참조할 때 많이 사용되기도 한다.

웹에서 플레이가 가능한 프로그램이라면 iframe으로 바로 참조한 프로그램도 바로 플레이가 가능하다.


보안 문제

웹에서 바로 로딩을 할 수 있다는 점이 편리하지만 때론 독이 되기도 한다.

검증되지 않은 출처의 문서를 삽입하는 경우 내 웹 페이지를 통해서 다른 방문자들이 문서를 열람하는 방식으로 문제를 발생기킬 수 있기 때문에 보안에 대한 지식이 없다면 iframe 태그의 사용은 권장되지 않는다.

보안 문제 예시

하나의 소스 문서를 만들고 다른 문서에서 iframe으로 가져와서 웹에 띄우는 준비 단계를 만들어 놓는다.

<!-- iframe.html -->
<!DOCTYPE html>
<html>
  <body>
    <iframe src="iframe_source.html" frameborder="0"></iframe>
  </body>
</html>

<!-- iframe_source.html -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      body{
        background-color:tomato;
        color:PowderBlue;
      }
    </style>
  </head>
</html>

자바스크립트를 사용하여 코드를 작성한다.

<!-- iframe_source.html -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      body{
        background-color:tomato;
        color:PowderBlue;
      }
    </style>
  </head>
  <body>
    <script>
      alert('Hello World!');
    </script>
  </body>  
</html>

입력한 자바스크립트 코드는 Hello World! 문구의 알림창을 띄우는 동작을 한다.

즉 이런식으로 외부 문서를 iframe으로 가져왔을 뿐이지만 그 외부 문서안에 작성된 자바스크립트 코드를 통해 페이지에서 특정 동작을 작동시킬 수 있게 된다.

자바스크립트는 복잡하면서 다양한 기능들을 수행할 수 있기 때문에 단순히 알림창을 띄우는것이 아닌 더 심각한 문제를 가져올 수 있다.

해결 방법

기본적으로 신뢰할 수 없는 문서는 가져오지 않는것이 우선이다.

그 다음에 추가적으로 보안을 하기 위해서는 iframe 태그에 속성을 추가한다.

<!-- iframe.html -->
<!DOCTYPE html>
<html>
  <body>
    <iframe src="iframe_source.html" frameborder="0" sandbox></iframe>
  </body>
</html>

sandbox를 추가해주면 iframe으로 삽입한 문서안의 자바스크립트와 같은 위험할 수 있는 행위를 원척적으로 차단시킨다.

You may also enjoy