0

I have a website where I'm going to be partnering with another website. They want to view one specific page of mine, in their [WordPress] website. They aren't developers, so I looked into how to do this.

At first glance, it appears as though the WordPress iFrame plugin is the easiest route. My next thought is, they'll probably still want to show their own header and footer in their page, while showing the content of my page in the iFrame. No big deal.

I'm thinking of developing a View on my [MVC 4] website that will be used ONLY for their iFrame purposes. Since they'll probably want their own headers, I'll probably design a page that uses no layout, and just a custom header and/or footer that shows that the information is coming from MY website.

Here are my questions: 1) The page that will be displayed contains MANY anchor tags, if that's embedded in an iFrame, what happens if the user on THEIR website clicks the link in the iFrame? Does the iFrame page change, or does their ENTIRE page change?

2) Depending on the answer to #1, should I just disable all hyperlinks/anchor tags in the iFrame page on my site so it doesn't cause any funkyness on their site?

3) What if I WANT some hyperlinks on the iFrame page so they come visit my website? Is that a matter of telling them to put a real link on their site to my own?

4) What security concerns do I have with allowing a page of my own to be accessible via iFrame from another site? Should I only allow traffic to my iFrame page when it's from their site? If it's not from their site, then re-direct to my "real" page?

Thanks all!

  • FWIW it might be worth exploring writing a custom wordpress plugin for this and exposing the data as an API -- will be cleaner than iframing and really shouldn't be horribly involved if the requirements are such that you can handle it with an iframe. – Wyatt Barnett Jul 9 '14 at 15:42
1

1) The page that will be displayed contains MANY anchor tags, if that's embedded in an iFrame, what happens if the user on THEIR website clicks the link in the iFrame? Does the iFrame page change, or does their ENTIRE page change?

Iframes are self-contained websites. As such, any links inside the iframe will change only the contents of the iframe, unless the link has specified the target attribute.

A good example of this in practice are Facebook tab apps. Many Facebook tab apps are actually iframes of external sites built for use into the Facebook iframe.

2) Depending on the answer to #1, should I just disable all hyperlinks/anchor tags in the iFrame page on my site so it doesn't cause any funkyness on their site?

It might be an option, if those links will go to somewhere that has your branding on it. Otherwise, it's not necessary.

3) What if I WANT some hyperlinks on the iFrame page so they come visit my website? Is that a matter of telling them to put a real link on their site to my own?

Them linking to your own is one way, another is to use the target attribute. To open the link in a new window/tab (so the user can still easily get back to the page with the iframe in it), you'd use target=_blank. To open the link in the same tab/window, requiring the user to hit the "back" button to get back to the page with the iframe in it, you'd use target=_top.

For more information on anchor (link) attributes, and more detailed descriptions of the values available for target, see the MDN article on anchors.

4) What security concerns do I have with allowing a page of my own to be accessible via iFrame from another site? Should I only allow traffic to my iFrame page when it's from their site? If it's not from their site, then re-direct to my "real" page?

Since iframe content is self-contained, and is basically just a stand-alone page being accessed from inside another one, you have the same security concerns as you would for any other page of the same nature as the iframe content. The container page cannot access the contents of the iframe, and the iframe cannot access the container page. Therefore, visiting the page outside of the context of the iframe does not pose any security risks that aren't also present when visiting from inside the iframe. (Note - there are ways that you can open communication channels via JavaScript and/or server-side code, between the iframe container and the content, but that requires code on both sides and intentionally opening up such channels. See again, Facebook tab apps.)

Now, there is the matter of user experience, when it comes to the chance of a user visiting the page outside of the iframe. The chance of someone seeing it outside of the iframe context can be minimized by taking measures to exclude it from spider crawling (so it doesn't show up in search engines), and to not link to it outside of the iframe context. If you really want, you can use JavaScript to see if the iframe content's loading context is the top to determine if it's in an iframe, and redirect the user as necessary, though it should be noted that turning off JavaScript will defeat that, so it's not bulletproof.

  • Phenomenal answer! I didn't think about using the target attribute. I already use it when linking to other sites/blogs, but it never crossed my mind for a page destined to be in an iFrame. I'll need to read-up more on the _top value. Thanks again! – ganders Jul 9 '14 at 15:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.