Accessing a document's text from an that's hosted on a different domain</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2009-10-02T16:38:08.860" class="fromnow">Oct 02 '09 at 16:38</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2010-05-04T18:00:37.837" datetime="2010-05-04T18:00:37.837">May 04 '10 at 18:00</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 932 times"> <span class="fc-light mr2">Viewed</span> 932 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="1510661" data-ownerid="167911" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1510661"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I'm implementing a "widget" that will be included on article/story pages of a 3rd-party website. This widget lives in an <iframe> hosted on our domain. It needs to gather text from the articles of its parent page (the 3rd-party website), which it then uses to make a variety of API calls to services that return related content, which is then displayed in our <iframe> widget.</p> <p>I can't access the DOM of the parent page due to cross-domain security restrictions, and therein lies the problem. I can place just about any code that I need to on the parent page (e.g., some JavaScript that parses out the content that I need), and the <iframe> is also totally under my control, but I'm not sure how to get the content from the host page into my <iframe> since they're hosted on different domains. Security is very important and I'd like to find a method that doesn't compromise that in any way.</p> <p>My initial thought was to pass the page content from the parent page into my <iframe src=""> attribute using a query parameter:</p> <pre><code><iframe src="http://www.mydomain.com/widget.html?page_content=This is some page content."></iframe> </code></pre> <p>I could use a <script> on the parent page to gather the text, then document.write an <iframe> that uses the string holding my text to create a dynamic "page_content" query parameter. The page_content parameter would then be available to my <iframe> page in document.href.</p> <p>However, I need to gather 8 KB of text from the parent page, and my understanding is that GET requests have a 1 KB limit - is this true? If not, or if I can configure that limit on my server, problem likely solved.</p> <p>If that is going to be a limitation, how else could I get creative and pass this text into my widget? This needs be a very scalable solution, as the parent website gets tens of millions of page views monthly. I also don't want to impact the performance of the parent page in a significant way.</p> <p>I have jQuery available in my widget, but can't rely on anything but plain JavaScript in the parent page.</p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/url" class="post-tag js-gps-track" title="show questions tagged 'url'" rel="tag">url</a> <a href="../../questions/tagged/iframe" class="post-tag js-gps-track" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/get" class="post-tag js-gps-track" title="show questions tagged 'get'" rel="tag">get</a> <a href="../../questions/tagged/cross-domain" class="post-tag js-gps-track" title="show questions tagged 'cross-domain'" rel="tag">cross-domain</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2009-10-03T21:04:14.077" class="relativetime">Oct 03 '09 at 21:04</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Bungle</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 02 '09 at 16:38">asked Oct 02 '09 at 16:38</time> <a href="../../users/167911/bungle" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/167911.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Bungle" /> </a> <div class="s-user-card--info"> <a href="../../users/167911/bungle" class="s-user-card--link">Bungle</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">19,392</li> <li class="s-award-bling s-award-blinggold" title="24 gold badges">24</li> <li class="s-award-bling s-award-blingsilver" title="79 silver badges">79</li> <li class="s-award-bling s-award-blingbronze" title="106 bronze badges">106</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">3 Answers<span style="display:none;" itemprop="answerCount">3</span></h2> </div> </div> </div> <a name="1510810"></a> <div id="answer-1510810" class="answer " data-answerid="1510810" data-ownerid="183250" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1510810"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If you're worried about having too much data for a GET request, use a POST request instead. You could try something like the answer to this question: <a href="../../questions/168455/how-do-you-post-to-an-iframe">"How do you post to an Iframe?"</a>. Then you could put the data in a hidden textarea and submit the form using JavaScript on the parent page.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited May 23 '17 at 12:11">edited May 23 '17 at 12:11</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 02 '09 at 17:15">answered Oct 02 '09 at 17:15</time> <a href="../../users/183250/wdebeaum" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/183250.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="wdebeaum" /> </a> <div class="s-user-card--info"> <a href="../../users/183250/wdebeaum" class="s-user-card--link">wdebeaum</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,101</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="22 silver badge">22</li> <li class="s-award-bling s-award-bling__bronze" title="12 bronze badge">12</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1510810" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1510810" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-1369045" class="comment js-comment " data-comment-id="1369045" data-comment-owner-id="167911" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1369045_1510810"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks for your reply, wdebeaum - that's a good suggestion, but wouldn't that involve a trip to the server to then make that POST data accessible to JavaScript within the <iframe> widget? I don't think there's a way for the widget to have access to the POST data otherwise; performance is crucial here so I'd like to avoid extra server trips if possible. The beauty of a GET request in this situation is that it's used more as a means to get easy access to some text (as a query parameter) from a different domain.</span> – <a href="../../users/167911/bungle" title="19,392 reputation" class="comment-user owner">Bungle</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1510661/accessing-a-document-s-text-from-an-iframe-that-s-hosted-on-a-different-domain#comment1369045_1510810"><span title="2009-10-03T21:03:21.410 License: CC BY-SA 2.5" class="relativetime-clean">Oct 03 '09 at 21:03</span></a></span> </div> </div> </li> <li id="comment-1383512" class="comment js-comment " data-comment-id="1383512" data-comment-owner-id="183250" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1383512_1510810"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I don't understand how a POST request would imply an extra trip to the server relative to a GET request... they're both going to the server in order to get the contents of the iframe. Then the server can put the query parameter (whether GET or POST) in its reply in a way that's accessible to the JavaScript in the iframe. If you're saying that setting the src attribute of the iframe should somehow propagate to the document.href property without actually requesting the page from the server, I'm not sure that's true.</span> – <a href="../../users/183250/wdebeaum" title="4,101 reputation" class="comment-user ">wdebeaum</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1510661/accessing-a-document-s-text-from-an-iframe-that-s-hosted-on-a-different-domain#comment1383512_1510810"><span title="2009-10-06T20:48:02.590 License: CC BY-SA 2.5" class="relativetime-clean">Oct 06 '09 at 20:48</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="1910956"></a> <div id="answer-1910956" class="answer " data-answerid="1910956" data-ownerid="128035" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="1910956"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Actually, you could use the name attribute for this, it has room for quite a lot of data.</p> <p>On the hosting page, you first create the iframe, sets its .name property to contain the needed data, then set the .src property to load the contained site. This would now have access to its own name, and hence the data.</p> <p>It is possible that the hosting site would need to set the iframes .src to a local page first, which would capture the parent documents data, put in its .name property and redirect to the inteded site.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 15 '09 at 22:38">answered Dec 15 '09 at 22:38</time> <a href="../../users/128035/sean-kinsey" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/128035.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Sean Kinsey" /> </a> <div class="s-user-card--info"> <a href="../../users/128035/sean-kinsey" class="s-user-card--link">Sean Kinsey</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">37,689</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="52 silver badges">52</li> <li class="s-award-bling s-award-blingbronze" title="71 bronze badges">71</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="2767766"></a> <div id="answer-2767766" class="answer " data-answerid="2767766" data-ownerid="126352" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="2767766"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>If you have control over both domains, you can try a cross-domain scripting library like <a class="external-link" href="http://easyxdm.net/" rel="nofollow noreferrer">EasyXDM</a>, which wraps cross-browser quirks (including the name property that Sean mentions above) and provides an easy-to-use API for communicating in client script between different domains using the best available mechanism for that browser (e.g. <a class="external-link" href="https://developer.mozilla.org/en/DOM/window.postMessage" rel="nofollow noreferrer">postMessage</a> if available, other mechanisms if not). </p> <p>Caveat: you need to have control over both domains in order to make it work (where "control" means you can place static files on both of them). But you don't need any server-side code changes.</p> <p>Another Caveat: there are security implications here-- make sure you trust the other domain's script!</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered May 04 '10 at 18:00">answered May 04 '10 at 18:00</time> <a href="../../users/126352/justin-grant" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/126352.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Justin Grant" /> </a> <div class="s-user-card--info"> <a href="../../users/126352/justin-grant" class="s-user-card--link">Justin Grant</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">44,807</li> <li class="s-award-bling s-award-blinggold" title="15 gold badges">15</li> <li class="s-award-bling s-award-blingsilver" title="124 silver badges">124</li> <li class="s-award-bling s-award-blingbronze" title="208 bronze badges">208</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>