Member Avatar for genieuk

Hi,

I basically have some links on a sidebar that loads some demos i made of mine in an iframe.

I have one problem.

As these links are on a page that does not have the iframe i need to somehow tell it to first load the iframe page.

Problem i have is if i click on a link it opens my demos in a new window as it unable to find the iframe which is of course not on the same page.

I done this before with a WYSIWYG editor, basically if you tried loading the page from an iframe it would redirect to the page that had the iframe, basically meaning stopping people from viewing it directly by accessing the link.

My site is built using html, css, php.

so this is what i am basically trying to do.

Anyone help me on this please?

I hope i explained well enough it sort of hard i think to explain it.

Thanks as always
genieuk

EDIT

I think i can explain better,

the pages must load in iframe and must not be able to be accessed directly via url. So when user clicks on link in sidebar it will load the page with the iframe on it.

  • 5 Contributors
  • 7 Replies
  • 109 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by itsjareds

Dani AI

Generated

Short summary and a practical plan that ties the suggestions already posted into a secure, maintainable solution.

You actually have two different problems: 1) make sidebar links load a demo into the iframe (client-side behavior), and 2) prevent users from opening the demo pages directly by typing their URLs (access control). , and covered the client-side part (links that target or set the iframe src). and pointed toward redirect/GET approaches. Those are fine for navigation, but client-side tricks alone can be bypassed — so enforce access on the server.

Two recommended server-side measures (use both):

  1. Block framing by other sites and limit who can embed your content: send the X-Frame-Options/CSP headers from demo pages.
    header('X-Frame-Options: SAMEORIGIN');
header("Content-Security-Policy: frame-ancestors 'self'");
  2. Require a short-lived, signed token (or a session flag) that the parent page issues when it builds the demo link. The iframe page validates the signature and expiry before serving content. Example pattern (PHP): parent creates a token with hash_hmac and expiry; frame.php recomputes and verifies with hash_equals; if invalid, redirect back to the parent page.

Practical notes and cautions:

  • Use basename() or strict allow-lists for any path you accept to avoid directory traversal.
  • Prefer signed tokens or server-side session flags over Referer checks — Referer is optional and spoofable.
  • If parent and iframe are cross-domain you cannot share server sessions; you will need a signed URL or a postMessage-based handshake.
  • For background reading on these headers and clickjacking defenses see MDN’s X-Frame-Options and CSP frame-ancestors and OWASP’s clickjacking guidance:

This keeps navigation simple (links set the iframe src) while giving the demo pages server-side protection so direct URL access is rejected unless the request is legitimately issued by your parent frame.

Recommended Answers

All 7 Replies

Member Avatar for essential

Try the following format in your links':

<a target="iframeName" href="iframePage.html/#iframeName/yourDemoPage.html">DEMO</a>
Member Avatar for genieuk

Hi, i already did try that and that's what make it load in a new window, i then tried _self but only difference is it it just opens in current window but not in iframe.

I have been reading that Javascript can acheive this but not sure how i would do it meaning i need to add it to a link.

thank you,
genieuk

Member Avatar for genieuk

I am managed to solve it using an if statement so basically it checks a variable if that variable is nto equal to a specific url it wont show links.

It works a treat.

Now i need to force the iframe pages to only be allowed to show in iframe and not by directly going to url.

thank you,
genieuk

Member Avatar for essential

That's great and you've finally solved your own issue...

Member Avatar for JugglerDrummer

You could redirect to a page on your site with an iframe, then maybe set the src in a GET in the URL.

Member Avatar for almostbob 
<a href="" onclick='document.getElementByID("iframeID").src="href";'>demo</a>
<iframe frameborder='0' src='blank.html' id='iframeID'>iframe</iframe>
Member Avatar for itsjareds

To add on to almostbob's post, this is what worked for me (Firefox v3.0.10):

<a href="http://www.w3.org/" target="iframeID">Redirect frame to W3.org</a><br/>
<iframe frameborder="0" src="http://www.daniweb.com/" name="iframeID" style="width:100%; height:90%;">iframe</iframe>

As for making sure the pages can only be viewed in a frame, try adding this JavaScript to all your frame pages:

if (window == window.top)
	window.location.href = "example.php?showFrame=frameContent.html";

My advice is to make your parent frame a PHP frame, and add a GET variable that, if present, will show this HTML page instead. Example:

<?php
if ($_GET['showFrame'])
	$frameURL = $_GET['showFrame'];
else
	$frameURL = "homepage.html";
?>
<iframe src="<?php echo $frameURL ?>" name="myFrame"/>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.