반응형
iframe이란 inline frame의 약자이다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있다.
iframe 내부에 크롤링한 링크를 걸어줄건데
iframe 내부에서 사이트 이동을 막아주고 싶다.
아무것도 클릭못하고 해당 게시글만 볼 수 있게!!
어떻게 해야하나 찾아보니 sandbox 속성으로 제한 사항을 걸어줄 수 있네
sandbox
sandbox=" " 공백은 모든 제한 사항 적용
따옴표안에 요소들 하나씩 넣어서 제한을 해제 시켜줄 수 있음 (콤마로 구분)
1. allow-forms : 폼 데이터를 제출할 수 있도록 허용
2. allow-pointer-lock : Pointer Lock API를 사용할 수 있도록 허용
3. allow-popups : window.open()이나 target=“_blank”, showModalDialog() 등의 팝업을 허용
4. allow-same-origin : same-origin policy를 통과된 것처럼 취급될 수 있도록 허용
5. allow-modals : 모달 윈도우를 열 수 있도록 허용
6. allow-orientation-lock : 화면 방향 전환을 잠글 수 있도록 허용
7. allow-popups-to-escape-sandbox : 모든 제한 사항이 적용된 문서(sandboxed document)에서 새로운 창(window)을 열 때 제한 사항을 상속받지 않은 창을 열 수 있도록 허용
8. allow-presentation : 프레젠테이션 세션을 시작할 수 있도록 허용
9. allow-scripts : 스크립트를 실행할 수 있도록 허용하지만, 팝업창은 생성하지 못함.
10. allow-storage-access-by-user-activation : Storage Access API를 사용하여 상위 스토리지 기능에 접근 요청을 할 수 있도록 허용
11. allow-top-navigation : 최상위 브라우징 컨텍스트(_top)를 탐색할 수 있도록 허용
12. allow-top-navigation-by-user-activation : 사용자의 요청이 있을 때만 최상위 브라우징 컨텍스트(_top)를 탐색할 수 있도록 허용
모든 제한을 걸어두니 사진 로딩이 안된다.
<iframe id="inlineFrameExample" title="Inline Frame Example" frameborder=1 width="1300" height="600"
src="https://blog.naver.com/howmany70/222746069090" sandbox=" ">
</iframe>
자바스크립트 제한을 허용해주니 사진은 잘 로딩된다.
왜 스크립트를 제한하면 사진이 안뜨는지는 따로 찾아봐야겠다.
<iframe id="inlineFrameExample" title="Inline Frame Example" frameborder=0 width="1300" height="600"
src="https://blog.naver.com/howmany70/222746069090" sandbox="allow-scripts">
</iframe>
클릭도 막히긴 하는데 어떤 부분은 클릭되고 어떤 부분은 클릭이 막힌다.
왜그런지 더 찾아봐야겠다.
반응형
