HTML 수업

외부문서삽입 - iframe

목적

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

등장시기

html4.01

댓글

댓글 본문
작성자
비밀번호
  1. SlowStarter
    감사합니다!
  2. tianma
    감사합니다
  3. 스페이스몽키
    보안쪽으로가니까 약간 헷갈리네요. 제대로 웹을 구현할때 다시한 번 공부해봐야할거같아요
  4. Heungkeun Lim
    잘 들었습니다
  5. sparkah
    잘봤어용
  6. 초코파이찬
    밑에서 두번째줄 아이패래임!!!!!!!!!!!
  7. 삐링
    본문에 오타가 있네요!
    밑에서 두번째줄 : 아이패래임
    수업 잘 보고 있습니다.
  8. 180101 감사합니다!

    1. <iframe>태그 : 외부의 컨텐츠를 문서로 불러와 보여주는 기능
     <iframe src="URL" frameborder="수치" width="수치" height="수치"></iframe>

    2. sandbox 속성 : iframe으로 불러온 페이지에 포함된 javascript나 <input>태그 등의 기술을 차단하는 속성값
     <iframe src="URL" ~~~ sandbox></iframe>
    ※ 출처가 의심되는 사이트를 iframe으로 가져오면 방문자들에게 피해를 줄 수 있으므로 보안의
      측면에서는 상당히 취약한 기술이다. 이에 대한 대책으로 sandbox 속성값을 사용한다.
  9. 갓챵
    안녕하세요. 항상 감사히 강의 듣고 있습니다.
    이고잉님께서 하신 대로 iframe태그에 주소를 넣었는데 아무런 내용이 없는 빈 칸만 뜹니다.
    http://opentutorials.org를 넣어도 안나오고,
    유튜브의 생활코딩 동영상 주소를 넣어도 안나오는데 뭐가 문제인지 궁금합니다 ㅠㅠ
  10. 임하진
    이고잉님 안녕하세요. 감사하게[ 잘 듣고 있습니다.
    그런데 iframe태그를 적용하려 하는데,
    Refused to display 'https://www.youtube.com/watch?v=6Y8PpdMb6BI&feature=youtu.be' in a frame because it set 'X-Frame-Options' to 'sameorigin'. 오류가 뜨는데 따로 설정해줘야 할 옵션이 있는건가요..?
  11. 푸른하늘
    7
  12. 강의 잘보고있습니다. 감사합니다. :)

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

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

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

    감사합니다 !
  13. 바람과 나무
    감사합니다.
  14. 최동희
    저도 같은 오타 보이네요. 앞에서는 다 아이프래임이라고 나오는데 마지막 문장에 이렇게 적혀 있네요. "...방법인데요. 아이패래임이 무엇인지, 사용법, 그리고..."
    대화보기
    • 흐에엥
      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.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기