HTML 수업

외부문서삽입 - iframe

목적

 웹페이지에 다른 웹페이지를 삽입하는 방법인 아이프래임은 참 편리하면서도 위험한 방법입니다. 왜냐면 신뢰할 수 없는 사이트에서 악성코드 같은 것을 포함하고 있다면 삽입된 외부소스에서 악성코드가 실행될 수 있기 때문이죠. 이런 문제를 해소하기 위해서 HTML의 최신 버전인 HTML5에서는 샌드박스라는 것을 도입했습니다. 아이프래임으로 삽입된 웹페이지에서 자바스크립트 등이 실행되지 않도록 하는 방법인데요. 아이패래임이 무엇인지, 사용법, 그리고 보안을 개선할 수 있는 새로운 방법을 소개합니다.

등장시기

html4.01

댓글

댓글 본문
작성자
비밀번호
  1. 강의 잘보고있습니다. 감사합니다. :)

    아이프레임과 관련한 질문이 있는데요,
    메인페이지에 작성되는 코드가 길어서 여러 문서로 작성한다음, 각 문서들을 메인페이지에 'ifram'태그로
    불러오기를 했습니다. 이렇게 작업을 진행하도 무방한지 궁금합니다.

    예를 들면, 상품상세페이지에서 1)상품정보 2)상품리뷰 3)관련상품 이렇게 세개의 카테고리를 각각의 문서로 제작해서 아이프레임으로 불러오기를 했습니다.

    실무에서 이렇게 작업을 해도 되는지 아시는분 답변부탁드립니다.

    감사합니다 !
  2. 바람과 나무
    감사합니다.
  3. 최동희
    저도 같은 오타 보이네요. 앞에서는 다 아이프래임이라고 나오는데 마지막 문장에 이렇게 적혀 있네요. "...방법인데요. 아이패래임이 무엇인지, 사용법, 그리고..."
    대화보기
    • 흐에엥
      iframe : 웹페이지 안에서 다른 웹페이지를 불러올 수 있는 기법
      - 방법 <iframe src="...">태그 사용
      - *유튜브의 공유하기가 이 방식을 사용
      - 하지만 불러온 웹페이지의 악성코드 등이 자신의 웹페이지에 전파될 수 있는 보안적 취약점이 있음.
      - 그래서 HTML5부터 sandbox라는 속성 도입(자바스크립트나 폼태그와 같이 위험할 가능성이 있는 기술들은
      불러올 때 원천적으로 차단)

      지호님 글 끌어올리기
    • 이성준
      잘봤습니다
    • 오빠는다르다
      감사합니다~!!!
    • 반응형은 어떡해ㅠㅠ
      혹시 반응형일때는 어떻게 작업을 처리해야하나요?
    • 이주형
      감사합니다~!^_^
    • 이부분부터 can i use 부분까지는 생활코딩 유튜브 채널 HTML 재생목록에서 빠져 있습니다. 확인해주세요!
    • 잘 봤어요^^
    • 궁금해요
      혹시 아이프래임으로 들어 가있는 URL이 방화벽에 막혀서 안열려 있는 경우는 어떻게 되나요?
      안나오는것이 맞을것 같은데. 연결 할수 있는 방법이 있나요? 방화벽 어는것 말고
    • 행복하세요
      강의 잘 보고 있습니다. 좋은 강의 감사합니다.
    • 다사랑
      감사합니다.
    • viperchin
      good tutorials
    • 훈수르
      egoing님 언제나 항상 감사히, 그리고 유용하게 보고 있습니다. 열심히 배워서 단순히 제 이익만을 위해 사용하는 것만이 아닌, 블로그를 운영하는 사람으로서 방문자에게 최적의 웹 환경을 제공하고 더 나아가 올바른 웹 문화, 그리고 블로그 문화를 선도하는데 기여하도록 하겠습니다. 파이팅!
    • 14번째
      5.13.
    • SteveLee
      감사합니다.
    • php가 첫취업?
      보안에 민감한 사항이라....나중에 다룰거 아니면 실무에선 못다룰거같네요
    • 행머
      여기부터 왜 자막 없나요 ㅠㅠ
    • springstar
      오타 있어욘즈~!
      아이패래임 ->아이프래임
    • 배워시
      감사
    • 광뀨
      170124 완료
    • egoing
      언젠가 하겠죠? ^^ 아직은 라이브로 사용할 단계는 아닌 것 같아요
      대화보기
      • TigerWest
        독립적인 html,css,script영역을 페이지를 통채로 불러오는 방법으로 쓰는 태그가 iframe이잖아요?
        근데 몇년전부터 계속 논의되고 있는 웹표준 중 하나가 web component라고 알고 있습니다.
        이것에 대한 강의도 추가해주실수 있을까요?
      • 김종엽
        iframe 이 웹 접근성이 떨어지기 때문에 사용을 지양한다고 알고 있는데, 이를 대체할만한 게 무엇이 있을까요??
      • 껄강쇠
        새벽 야간 당직 스면서 웹 배우고 싶어 강의 듣고 있습니다. 훌쩍 ~! 감사해욘
      • 해커가꿈인사람
        2016.12.20 강의수강 완료
      • 임지호
        iframe : 웹페이지 안에서 다른 웹페이지를 불러올 수 있는 기법
        - 방법 <iframe src="...">태그 사용
        - *유튜브의 공유하기가 이 방식을 사용
        - 하지만 불러온 웹페이지의 악성코드 등이 자신의 웹페이지에 전파될 수 있는 보안적 취약점이 있음.
        - 그래서 HTML5부터 sandbox라는 속성 도입(자바스크립트나 폼태그와 같이 위험할 가능성이 있는 기술들은
        불러올 때 원천적으로 차단)
      • Kijin Roh
        아이패래임이 무엇인지 >> 오타 났네요 ^^;;
        좋은 강의 감사한 마음으로 잘 듣고 있습니다.
      • matheios
        완료! 감사합니다~
      • D.JA
        DONE!
      • 심외무별법
        감사합니다 . 잘보고있습니다.
      • 마엘
        계속 잘 수강하고 있습니다!
      • 김종엽
        2016.08.24 완료!
      • Daehyeop Ko
        sandbox 좋은 새 기능이네요!
      • wonhee lee
        감사합니다~
      • cicada
        감사합니다~
      • Ian Si Mong Seong
        수강완료
        2016.08.01
      • JustStudy
        2016,07,23 토
        고맙습니다 1.
      • 정주행!
        정주행 끝!!!
      • 이승민
        와우! DTD를 해줘도 해당 브라우저가 지원을 안하면 어쩔수 없군요... input 태그같은것도 html5에서 추가된 것들이 많던데 숫자를 강제하는 number 같은것도 어떤 브라우저에선 숫자만 들어오란 법이 없으니 전부 세탁을 해줘야 겠네요. 자바스크립트 코드나 php코드가 들어올 수도 있으니까요?
        대화보기
        • egoing
          정확하게 보셨어요~
          대화보기
          • 이승민
            이번강의도 감사히 잘봤습니다. 오래된 브라우저는 iframe 이 4.01 부터 지원됬으니 iframe은 되는데 sandbox 속성은 사용이 안되는 경우가 있을 수 있다는 건가봐요. 그러면 html5 를 지원안한다는 건데 그럼 html5 기준으로 작성한 코드가 개발자의 의도와 상관없이 과거의 문법으로 다르게 작동할 수도 있을까나요~~?
          • 내는아빠다
            감사합니다. 많은 도움 되고 있습니다.
          • 알려자바
            좋은수업 감사합니다.
          • 빨강머리앤
            감사합니다.^^
          • 좋은 강의 잘 들었습니다.
            감사합니다.
          • 감사합니다
            감사합니다! 혹시..보안쪽도 강좌 하실 계획이....있으신가여,,,,??

            있으면 좋겠네요...ㅋㅋ

            감사합니다!
          • 고고1
            감사함다~~
          • 김연재
            감사합니다><
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기