<div id="readability-page-1" class="page"><div>
                                            <p><a href="/m/category/%EC%9B%B9%20%EC%A0%84%EB%B0%98%2C%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80/HTML%2C%20CSS">웹 전반, 브라우저/HTML, CSS</a></p><h2>Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서</h2>
                    <p><cite>
                        <span>DarrenKwonDev</span>
                    </cite>
                </p></div><p><time>2021. 7. 11. 13:28</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p><div>
                    <p data-ke-size="size16">회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다.</p>
<p data-ke-size="size16">결론은 "<b><span>안된다</span></b>"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다.</p>

<p data-ke-size="size16">iframe과 내부에 있는 html을 단순히 확인하는 것은 가능합니다.</p>
<p data-ke-size="size16">그러나 iframe 내부에 있는 google doc을 조작하는 것은 <b>보안상의 문제로 불가능</b>합니다.</p>

<figure data-origin-width="847" data-origin-height="451" width="750" height="399" data-ke-mobilestyle="widthOrigin"><span data-url="https://blog.kakaocdn.net/dn/bpjqbG/btq9lnZO88a/Ow5zHsa9K2nMNkFCqEa6n1/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/bpjqbG/btq9lnZO88a/Ow5zHsa9K2nMNkFCqEa6n1/img.png" data-origin-width="847" data-origin-height="451" width="750" height="399" data-ke-mobilestyle="widthOrigin"></span></figure>

<p data-ke-size="size16">그럼에도 불구하고 시도해본 것들은 다음과 같습니다.</p>


<h4 data-ke-size="size20"><b>시도 1) contentWindow을 사용하여 접근하려는 경우</b></h4>
<p data-ke-size="size16"><b>contentWindow</b>란 부모 window에서 임베디드된 &lt;iframe&gt;을 참조할 때 사용되는 메서드입니다.</p>
<p data-ke-size="size16"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow</a></p>

<p data-ke-size="size16">그러나 저희 typed에서 iframe 내부 에디터를 contentWindow로 확인해보려고 하면 다음과 같은 에러 메세지를 출력합니다.</p>
<p data-ke-size="size16"><span>Uncaught DOMException: Blocked a frame with origin "&lt;http://localhost:5000&gt;(client)" from accessing a cross-origin frame.</span></p>

<p data-ke-size="size16">위 에러 메세지의 의미는 저희 측의 origin이 iframe의 origin과 같지 않으므로 접근할 수 없다는 것입니다.</p>
<p data-ke-size="size16">이는 브라우저의 동일 출처 정책(same origin policy)과도 관련이 있습니다. 아래 문서를 참고해주세요.</p>
<p data-ke-size="size16"><a href="https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy">https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy</a></p>

<pre id="code_1625977490514" data-ke-language="javascript" data-ke-type="codeblock"><code>// origin을 출력해보고 싶다면...
window.location.origin</code></pre>


<h4 data-ke-size="size20"><b>시도 2) contentDocument을 사용하여 접근하려는 경우</b></h4>

<p data-ke-size="size16"><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument">https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument</a></p>

<p data-ke-size="size16">If the iframe and the iframe's parent document are Same Origin, returns a Document</p>
<p data-ke-size="size16">결론적으로는 origin이 같지 않으므로 contentDocument는 null을 반환하고, 실제로 null을 반환하는 것도 확인했습니다.</p>

<h4 data-ke-size="size20"><b>시도 3) 부모 Browsing Context 에서 자식 Browsing Context에 위치한 DOM에 직접 접근하려는 경우</b></h4>

<p data-ke-size="size16">단순히 내부 DOM을 출력하지 않습니다.</p>
<pre id="code_1625977526650" data-ke-language="javascript" data-ke-type="codeblock"><code>// iframeDom은 document.getElementById('iframe') 꼴로 가져온 형태임.
// &lt;iframe&gt;...&lt;/iframe&gt; 꼴

iframeDom.querySelectorAll('*')// NodeList가 비어있음</code></pre>


<h4 data-ke-size="size20"><b>시도 4) postMessage를 통해 데이터 전달???</b></h4>

<p data-ke-size="size16">특정 data를 iframe 내부에 전달해서 google editor 내부에 삽입할 수 있지 않을까하는 막연한 생각에 조사해보았습니다.</p>
<p data-ke-size="size16">Window.postMessage 메서드를 통해 부모, 자식 browser context간 소통을 할 수 있습니다.</p>
<p data-ke-size="size16"><a href="https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage">https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage</a></p>

<pre id="code_1625977539145" data-ke-language="javascript" data-ke-type="codeblock"><code>targetWindow.postMessage(message, targetOrigin, [transfer]);</code></pre>

<p data-ke-size="size16">그러나 저희 typed에서 사용하려고 할 때</p>
<p data-ke-size="size16">(1) 다른 origin의 정보를 담고 있는 iframe의 contentWindow에 접근하는 것 자체가 불가능하므로 해당 메서드를 사용할 수 없습니다.</p>
<p data-ke-size="size16">(2) 애초에 남의 origin에 script를 삽입한다는 것 자체가 웹 해킹입니다.</p>

<pre id="code_1625977612196" data-ke-language="javascript" data-ke-type="codeblock"><code>// parent browser context
window.addEventListener('message', function (event) {
  console.log(event.data) // { data: 'parent' } 
  // 애초에 same origin policy로 인하여 contentWindow에 접근 불가
  document.getElementById('iframe').contentWindow.postMessage({data: "haha"}, '*') })
  
// iframe child browser context.
// 그러나 애초에 script를 삽입할 수 없음.
&lt;script&gt;
  window.onload = function() { 
    window.parent.postMessage({ data: 'parent' }, '*');
  };
  window.addEventListener('message', function(e) {
    console.log(e.data); // {data: "haha"} } );
&lt;/script&gt;</code></pre>

<h4 data-ke-size="size20"><b>시도 5) iframe Dom을 click() 이벤트를 발생시켜 editor에 포커스 시킨 다음 text를 삽입하려는 경우</b></h4>
<pre id="code_1625977632419" data-ke-language="javascript" data-ke-type="codeblock"><code>const clipData = await navigator.clipboard.readText()

// click 이벤트를 발생시켜도 별다른 반응이 없음
iframeDom.click()

// 그리고 google doc을 아래와 같이 가져올 수도 없음
document.querySelector('.editor').innerText += clipData</code></pre>

                                                            
                    
					
                    
                    
                </div></div>

HotHandCoding

DarrenKwon

회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다.
결론은 "안된다"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다.
 
iframe과 내부에 있는 html을 단순히 확인하는 것은 가능합니다.
그러나 iframe 내부에 있는 google doc을 조작하는 것은 보안상의 문제로 불가능합니다.
 
 
그럼에도 불구하고 시도해본 것들은 다음과 같습니다.
 
 
시도 1) contentWindow을 사용하여 접근하려는 경우
contentWindow란 부모 window에서 임베디드된 <iframe>을 참조할 때 사용되는 메서드입니다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow
 
그러나 저희 typed에서 iframe 내부 에디터를 contentWindow로 확인해보려고 하면 다음과 같은 에러 메세지를 출력합니다.
Uncaught DOMException: Blocked a frame with origin "<http://localhost:5000>(client)" from accessing a cross-origin frame.
 
위 에러 메세지의 의미는 저희 측의 origin이 iframe의 origin과 같지 않으므로 접근할 수 없다는 것입니다.
이는 브라우저의 동일 출처 정책(same origin policy)과도 관련이 있습니다. 아래 문서를 참고해주세요.
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
 
// origin을 출력해보고 싶다면...
window.location.origin
 
 
시도 2) contentDocument을 사용하여 접근하려는 경우
 
https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentDocument
 
If the iframe and the iframe's parent document are Same Origin, returns a Document
결론적으로는 origin이 같지 않으므로 contentDocument는 null을 반환하고, 실제로 null을 반환하는 것도 확인했습니다.
 
시도 3) 부모 Browsing Context 에서 자식 Browsing Context에 위치한 DOM에 직접 접근하려는 경우
 
단순히 내부 DOM을 출력하지 않습니다.
// iframeDom은 document.getElementById('iframe') 꼴로 가져온 형태임.
// <iframe>...</iframe> 꼴
iframeDom.querySelectorAll('*')// NodeList가 비어있음
 
 
시도 4) postMessage를 통해 데이터 전달???
 
특정 data를 iframe 내부에 전달해서 google editor 내부에 삽입할 수 있지 않을까하는 막연한 생각에 조사해보았습니다.
Window.postMessage 메서드를 통해 부모, 자식 browser context간 소통을 할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
 
targetWindow.postMessage(message, targetOrigin, [transfer]);
 
그러나 저희 typed에서 사용하려고 할 때
(1) 다른 origin의 정보를 담고 있는 iframe의 contentWindow에 접근하는 것 자체가 불가능하므로 해당 메서드를 사용할 수 없습니다.
(2) 애초에 남의 origin에 script를 삽입한다는 것 자체가 웹 해킹입니다.
 
// parent browser context
window.addEventListener('message', function (event) {
  console.log(event.data) // { data: 'parent' } 
  // 애초에 same origin policy로 인하여 contentWindow에 접근 불가
  document.getElementById('iframe').contentWindow.postMessage({data: "haha"}, '*') })
  
// iframe child browser context.
// 그러나 애초에 script를 삽입할 수 없음.
<script>
  window.onload = function() { 
    window.parent.postMessage({ data: 'parent' }, '*');
  };
  window.addEventListener('message', function(e) {
    console.log(e.data); // {data: "haha"} } );
</script>
 
시도 5) iframe Dom을 click() 이벤트를 발생시켜 editor에 포커스 시킨 다음 text를 삽입하려는 경우
const clipData = await navigator.clipboard.readText()
// click 이벤트를 발생시켜도 별다른 반응이 없음
iframeDom.click()
// 그리고 google doc을 아래와 같이 가져올 수도 없음
document.querySelector('.editor').innerText += clipData

Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서

댓글