How to target iframe on a different page

Freeway
1

Still trying to find answers to this idea. I have products scattered throughout my site that are customized in real time using a design utility on a different host. I want my customers to stay within my site when using the utility, thus I want to use an iframe.

What I want to do:

Page One - has an iframe.

Page Two - contains specific links that when clicked will open a specific web page in the iframe on page one.

Here are the instructions from a previous post on how this is accomplished on a single page, but it doesn’t seem to work across multiple pages.

The original post reads

(freewaytalk.net/thread/view/9246#m_9332):

“… what you do is create the link for each url > then press the extended button > then press new > in the name box type “target” ( without the quotes ) > then in the value box type the name of your iframe ( i.e. iframe, fred, or whatever” ) > then type ok > and ok again.”

Following these instructions causes the web page to open, but does not target inside my iframe.

This is what I am doing: 1. Create an iframe named “designer” on page 2. 2. Create a link on page one and in Edit Hyperlink dialog choose “other or http” 3. Type the full url to the page I wish to open. 4. While in the Edit Hyperlink dialog click the “extended” button 5. In extended attributes click the “new” button and name=target and value=”the name of my iframe” (in this case “designer” 6. Okay all windows. 7. When preview in browser or upload clicking the link opens the targeted website, but it doesn’t open in in my iframe.

Sorry for the long post. Anyone have insight on how to make this work?

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Can you post a link to the pages in question Cecil so that we can read the code that is being used.

In your Document settings > output make sure that HTML more readable has been selected.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Thanks David.

This is page one which contains the link to the iframe.
The link is attached to the “Blank Design” graphic.

The page does not open in the iframe which is at this address:

(Note: There appears to be two headers on the designer.html because the targeted page inside the iframe contains a header which I will delete when this gets to working properly)

Hope this makes sense. I had to upload the test page.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

I have had a look at this and found this thread on another Forum

Which implies that this may not be doable in just html and offers a php solution if you have php on your server.

Probably Walter is the guy that will be able to tell you for sure.

Walter are you listening?

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

And of course you do have php I see.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

If you are on the same page as the iframe, you can use the target
attribute to “send” links into the iframe. But from another page, you
have to overload the default url of the iframe to get the same effect.

There’s two steps to this process.

One is to read the URL and decide if this process needs to happen.

The other is to change the src attribute of the iframe.

The first part is relatively simple. Add the url you want to load to
the link as a querystring:

http://yoursite.com/yourframe.php?site=www.somesite.com

If you need to have slashes or other “special” characters in there,
you must url-encode them. Nothing path-like is allowed to the right
of the question mark in the URL.

If you want to load a page within your site, then it could be as easy
as adding the filename of that page in the same manner:

http://yoursite.com/yourframe.php?page=somepage.html

So in Freeway, on your iframe page, do the following:

Change the filename extension to .php

Open the Page > HTML Markup dialog, and enter the following block of
code into the Before HTML section:

<?php
$src = 'your_default_page.html';
function clean($string){
	return trim(strip_tags(urldecode($string)));
}
if(isset($_GET['page'])){
	$src = './' . clean($_GET['page']);
elseif(isset($_GET['site'])){
	$src = 'http://' . clean($_GET['site']);
}
?>

Make sure that you change the placeholder ‘your_default_page.html’ to
be the filename of the page you want to load if there is nothing in
the querystring.

Now, click on your iframe, and in the Actions palette, change the URL
from whatever it is currently to this:

<?=$src?>

Preview the page into a text editor, and confirm that Freeway (or the
Action) did not change any of the angled brackets into &lt; escape
sequences.

Now, upload your site again. You will not be able to test this except
on a real PHP Web server.

When nothing is in the querystring portion of the URL, the default
page should load. If there is a variable called site or page, then it
should load. All of this will follow the usual rules of Web server
security, so you won’t have to worry about someone entering
‘page=…/…/…/etc/passwd’ into their browser’s navigation bar. Only
files that Apache has access to will be served by this trick. You
will have to worry about people entering ‘site=www.whitehouse.com’ in
there and getting your page framing a porn site, though. There’s a
way to work around that, but it basically consists of making a
“whitelist” of approved sites, and then using an array to choose
which one to load. It’s more work, and less clear for a first-time
programmer, so hopefully this will be a good start for you.

Walter

On Mar 17, 2008, at 8:24 PM, DeltaDave wrote:

I have had a look at this and found this thread on another Forum

http://www.dynamicdrive.com/forums/showthread.php?t=10132

Which implies that this may not be doable in just html and offers a
php solution if you have php on your server.

Probably Walter is the guy that will be able to tell you for sure.

Walter are you listening?

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Thank you David and Walter.

David, I read the linked article and it was a bit above my knowledge, however it enticed me to research on the web and I believe I have an understanding of what you propose. Just didn’t know how to implement in Freeway.

Alas, here’s Walter to the rescue with just such research I found on the web.

I will follow your recommendations later when time permits and report back.

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

Walter,

I’m struggling to get this. I have created a test site. Maybe you can give some explanation of where I’ve messed up and help other also.

On the test site I’ve included a link to download the Freeway file for the test.

http://cecilsellers.com/test_iframe/

Thank you for your valuable time.

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

You left out the PHP code from the Before HTML block of the iframe
page that would set up the value of $src. Right now, your iFrame is
trying to load nothing. If error reporting was turned on on your
server, you would see an error saying that $src is not set.

If you look up this thread, you will see this block of code:

<?php
$src = 'your_default_page.html';
function clean($string){
    return trim(strip_tags(urldecode($string)));
}
if(isset($_GET['page'])){
    $src = './' . clean($_GET['page']);
elseif(isset($_GET['site'])){
    $src = 'http://' . clean($_GET['site']);
}
?>

Paste that into your Page: HTML Markup: Before HTML dialog and
publish again. Once you have that in place, this page should work
correctly.

Walter

On Mar 26, 2008, at 7:13 AM, cosjr wrote:

Walter,

I’m struggling to get this. I have created a test site. Maybe you
can give some explanation of where I’ve messed up and help other also.

On the test site I’ve included a link to download the Freeway file
for the test.

NameBright - Coming Soon

Thank you for your valuable time.

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

Sorry Walter. I had that entered in a million times. Must have deleted it somehow.

I’ve now entered the code like this:

<?php $src = 'http://www.google.com/'; function clean($string){ return trim(strip_tags(urldecode($string))); } if(isset($_GET['page'])){ $src = './' . clean($_GET['page']); elseif(isset($_GET['site'])){ $src = 'http://' . clean($_GET['site']); } ?>

gives a 404 error page.

I must be still missing something.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Try adding a curly bracket to the left of the elseif : }elseif(…

I don’t know why that is missing, but that’s where the problem is
starting from.

Walter

On Mar 27, 2008, at 12:05 PM, cosjr wrote:

Sorry Walter. I had that entered in a million times. Must have
deleted it somehow.

I’ve now entered the code like this:

<?php $src = 'http://www.google.com/'; function clean($string){ return trim(strip_tags(urldecode($string))); } if(isset($_GET['page'])){ $src = './' . clean($_GET['page']); elseif(isset($_GET['site'])){ $src = 'http://' . clean($_GET['site']); } ?>

gives a 404 error page.

I must be still missing something.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Thanks Walter.

Now iframe page will load with the default Google site in the iframe. However, the link page link still gives an error 404 when click on.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Actually, I’m thinking this might be because the link extended doesn’t have http://www before the entry?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

Thank you Walter. Finally. I have it working. I learned my mistake by paying close attention to what was in the url on the error page.

Your example:

yoursite.com/yourframe.php?site=www.somesite.com

I simply left off the “yoursite.com/” and all is well. So the corrected working link in the example is now:

iframepage.php?site=www.apple.com

Thank you so very much. I hope this helps others along the way.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

So, now I have a further how-to-do-this question.

Scenario:
When clicking the link on the link page the correct url is loaded in the iframe on another page. Good, but as Walter explained earlier, there are some security issues. Also, I’d rather not have the full url showing in the address bar at all. When you add a link on the same page as the iframe using the extended attribute “target=iframename” the url in the address bar displays only the page that contains the iframe and not the iframe target url. That is what I prefer.

So, I’m thinking why not put some kind of container link on the same page as the iframe with a dynamic call that captures the link url on the link page and passes it off to the iframe much the same way as you’ve done with the html markup.

By doing this can we overcome the security issue and hide the target url? I’m also thinking if this method would allow the original link to not be url encoded. (I will have lots of links on many pages and translating is a pain).

Probably not possible, huh?

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

16

On Mar 29, 2008, at 7:50 AM, cosjr wrote:

So, now I have a further how-to-do-this question.

Scenario:
When clicking the link on the link page the correct url is loaded
in the iframe on another page. Good, but as Walter explained
earlier, there are some security issues. Also, I’d rather not have
the full url showing in the address bar at all. When you add a link
on the same page as the iframe using the extended attribute
“target=iframename” the url in the address bar displays only the
page that contains the iframe and not the iframe target url. That
is what I prefer.

So, I’m thinking why not put some kind of container link on the
same page as the iframe with a dynamic call that captures the link
url on the link page and passes it off to the iframe much the same
way as you’ve done with the html markup.

There’s a chicken-or-egg problem here. How will you encode the link
that you pass to the “container” link? You are going to have to put
the URL that you want to load into the iframe somewhere.

By doing this can we overcome the security issue and hide the
target url? I’m also thinking if this method would allow the
original link to not be url encoded. (I will have lots of links on
many pages and translating is a pain).

The only security issue (which is solved in the code example I
posted) would be if you allowed any old file to be included using
PHP. PHP runs as the same user as the web server, and it has read
access to much of the server’s filesystem (above and beyond the Web
root). If your code function was using include() or require() to
merge another file into the current page, then your page could be
tricked into loading …/…/…/…/etc/passwd into that same space. But
you’re using an iframe, and the usual rules of the Web server apply.
Nothing awful can happen here, unless your server administrator has
been hitting the bottle or something.

What you have here is a curiosity issue more or less. Oooh! Look what
happens if you put in www.pr0nsite.com after the URL! Look, Ma! I
hAx0red the server!

If you really want to get around this issue, it’s going to be more
work, not less. What I would do is stash all of the sites you want to
load in a single PHP array:

$sites = array(
	'www.apple.com',
	'www.softpress.com',
	'www.google.com',
	'www.somesite.com'
	);

Then on your page where you want to create your link, you would use
this notation:

<a href="myframepage.php?site=0">Apple</a>

(Arrays start with the index 0, so the first item is 0 and the last
item is [number of items] -1.)

On your frame page, you would change the script to read like this:

if(is_numeric($_GET['site'])){
	$site = (isset($sites[$_GET['site']]) ?
		$sites[$_GET['site']] : $sites[0];
	$src = 'http://' . $site;
}

That block would interpret the incoming index number (which is very
secure since it means nothing to the visitor) and then translate that
to the proper site. There’s a check step in there to see if the index
is valid, and if not, the first item on your list is loaded. This
technique is known as a whitelist, since only sites on your approved
list can be loaded at all.

Back on your other pages, you simply have to keep track of the index
numbers of the various sites, but you won’t have to url-encode
anything when you make a link.

Walter

Probably not possible, huh?

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

17

What you have here is a curiosity issue more or less. Oooh! Look what
happens if you put in www.pr0nsite.com after the URL! Look, Ma! I
hAx0red the server!

If you really want to get around this issue, it’s going to be more
work, not less.

Okay. I don’t care how others get their jollies, so will ignore this issue.

Do have a question about this:

The first part is relatively simple. Add the url you want to load to
the link as a querystring:

http://yoursite.com/yourframe.php?site=www.somesite.com

If you need to have slashes or other “special” characters in there,
you must url-encode them. Nothing path-like is allowed to the right
of the question mark in the URL.

All the links I want to use have slashes. After the question mark (?site=www.somesite.com) needs to be url-encoded? Researching that term I came across a few sites that will return a url-encode if you type in a normal url. Is that what this means? When I try that and paste the result after the ?site= I get an error when published.

For example this would be my link for a site without slashes or other special characters:
iframepage.php?site=www.apple.com

But if my url contained a slash it would look like this:
iframepage.php?site=www.apple.com/itunes/

So therefore, I need to encode iTunes - Apple
Using a url-encode site I get this:
www.apple.com%2Fitunes%2F

But, this doesn’t work in my test. The apple.com home page loads instead of the itunes page. So I guess my encode is incorrect?

Cecil

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

18

On Apr 1, 2008, at 6:36 AM, cosjr wrote:

What you have here is a curiosity issue more or less. Oooh! Look what
happens if you put in www.pr0nsite.com after the URL! Look, Ma! I
hAx0red the server!

If you really want to get around this issue, it’s going to be more
work, not less.

Okay. I don’t care how others get their jollies, so will ignore
this issue.

Do have a question about this:

So therefore, I need to encode iTunes - Apple
Using a url-encode site I get this:
www.apple.com%2Fitunes%2F

But, this doesn’t work in my test. The apple.com home page loads
instead of the itunes page. So I guess my encode is incorrect?

Cecil

There are two levels of url-encoding possible in PHP. One is regular
urlencode(), which would not replace the slashes as your example did,
but would replace spaces with a + and ampersands with & and a few
other special characters with their entity escapes. The next level is
called rawurlencode() and is what your encoding service is showing
you. Everything that isn’t a-Z,0-9 is escaped.

Now most web servers will automatically undo urlencode() (the
equivalent in PHP would be to explicitly run urldecode() against the
input). But none will do the reverse of rawurlencode(). You can
simply apply it to your input by using the PHP function rawurldecode
() in your processing function. Modify the clean() function to use
rawurldecode instead of plain urldecode and you will be all set.

function clean($string){
    return trim(strip_tags(rawurldecode($string)));
}

Walter

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

19

Modify the clean() function to use
rawurldecode instead of plain urldecode and you will be all set.

function clean($string){
return trim(strip_tags(rawurldecode($string)));
}

Thanks Walter. This works, but has introduced a new unexpected problem. My crazy long url link is causing a problem. It is best for you to see the problem as explained on the test page:

http://cecilsellers.com/test_iframe/link_page.html

I would also love to find a way to not show that full url address in the address bar so that only my page that contains the iframe would show and not the target url of the iframe. Any ideas here also? Would a javascript function serve that purpose?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

20

That’s easy to fix. The issue is that you have not made a valid
querystring to the inner page. If you look at the red text, you will
see that you have abettersign/index.php&cpi – that needs to be
abettersign/index.php?cpi. The question mark as the first thing after
the index.php is mandatory if you are trying to pass variables to
your server. The fact that the same link is loading correctly into a
new window is due to your browser correcting the mistake silently.
(In other words, you are not requesting a valid URI from the server,
so your browser helps out and fixes it for you, converting that first
& to a ? when the request fails the first time.) When you are
requesting the page through PHP, no such magic is going on behind the
scenes.

Walter

On Apr 7, 2008, at 10:57 AM, cosjr wrote:

Thanks Walter. This works, but has introduced a new unexpected
problem. My crazy long url link is causing a problem. It is best
for you to see the problem as explained on the test page:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options