iframe에서 src가 없을경우의 동작
에디터를 이용하여 데이터를 load할 경우 css가 많이 포함되어있으면 기존 css를 상속받아 예상치 못하게 html이 그려지는 현상을 종종 발견 할 수 있다.
저는 이런 현상을 방지하기 위해 html 격리를 위해 iframe안에 에디터 소스를 넣는 방식을 취한다.
<html>
<body>
<style>*{font-size:12pt;}</style><iframe src="/index.html"></iframe>
<iframe id="a"></iframe>
<script>
document.querySelector("#a").contentWindow.document.body.innerHTML += "<style>* {font-color:blue} </style>";
</script></body>
</html>
문득 이런생각이 들게 되었다.
iframe에 src를 넣지 않을경우 src 속성은 어떤식으로 동작을 할까??
만약 현재 페이지에 대한 호출이 일어나게 될 경우 현재 운영중인 서비스에서는 서버 성능에 큰 영향을 미치게 된다.
*현재까지 알고 있는 지식
- iframe태그는 src안에 url 분석 해당 서버에서 contents를 가져와 해당 영역에 load 하는걸로 단순하게 알고 있다.
*가설
- 만약 iframe에 src가 없는 형태의 페이지를 호출했을때 해당 페이지 접속 기록과 iframe 접속 기록 2가지가 생길 것임(apache access.log를 통해 확인)
*테스트
- 빈 iframe 태그에 src는 없는 상태로 페이지 생성 (src=”about:blank” 있게 없게 둘다 테스트)
- apache access log 확인
*결과
- 접속 페이지 로그만 발생
*결과분석
1: If the element has no
srcattribute specified, or its value is the empty string, let url be the URL"about:blank".
Otherwise, parse the value of thesrcattribute, relative to the element’s node document.[1]
If that is not successful, then let url be the URL “about:blank". Otherwise, let url be the resulting URL record.[1]if entered. Examples are opera (Opera) or chrome (Google Chrome). An exception is ‘about:blank’, which is not translated.[2]
-> 요소의 url 이 지정이 안될경우 about:blank 로 동작, 그렇지 않을 경우 src attribte를 분석함
-> 그리고 iframe에서 about:blank 일 경우는 아무런 동작을 하지 않는다
참고
[1] https://www.w3.org/TR/html5/semantics-embedded-content.html#the-iframe-element
