웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > html

iframe 태그에 css 스타일 적용할 수 없는가

Last Modified : 2018-06-02 / Created : 2018-05-28
13,330
View Count
웹사이트에서 iframe태그를 사용하여 다른 페이지를 불러오는 경우 내부의 엘리먼트에 접근해 css 스타일을 변경하려고 합니다. 가능할까요?




# iframe으로 불러온 웹페이지 css 적용 가능 여부

결론부터 말하면 css 스타일을 적용할 수 없습니다. iframe 태그 안에 존재하는 document는 해당 웹페이지에 적용된 css에만 영향을 미치게됩니다. 물론 가장 큰 이유는 보안에 따른 문제 소지가 있기 때문입니다. 혹시라도 iframe으로 웹페이지를 불러오는 특정 웹사이트가 악의적인 의도로 사용될 수도 있겠죠.


! host가 동일한 경우에는 어떻게되는가?

결론부터 얘기하면 hostname이 동일한 경우라도 결과는 같으며 적용되지 않습니다... 즉 subdomain이 다르고 호스트가 같은 상황이라도 불구하고 a.webisfree.com과 b.webisfree.com의 어느 한쪽을 iframe으로 불러온다고해도 스타일 적용은 안됩니다.

결국 안전하고 유일한 방법은 해당 css 스타일은 페이지 내부에 적용되어야한다는 점입니다.만약 이것이 가능하다면 스타일을 교묘히 바꾸어 의도하지 않은 행동이 발생하도록 만들 수 있을 것입니다.

Previous

[LESS] 여러개의 LESS 파일을 하나의 css로 만드는 방법

Previous

HTML title 속성으로 툴팁(tooltip) 보여주기