How to hide iframe url From HTML source code?
<iframe src="http://mysite.com" frameborder="0" scrolling="no" width="728" height="90"></iframe>
-
1Out of curiosity, why would you want to do this?David– David2013-03-21 12:41:21 +00:00Commented Mar 21, 2013 at 12:41
-
I'm trying to do this because there is a param in the url I don't want exposed on the clientBamBam22– BamBam222019-06-27 23:54:30 +00:00Commented Jun 27, 2019 at 23:54
Add a comment
|
5 Answers
You can use javascript to load the source, and it will not be visible in iframe url in page source code.
For example with jQuery:
<script type="text/javascript">
$(document).ready(function(e) {
$('iframe').attr('src','http://www.flickr.com/');
});
</script>
<body>
<iframe src="" />
</body>
You can combine it with $.post to get the value serverside:
$.post('get-iframe-src.php', function(data) {
$('iframe').attr('src',data);
});
You can even load iframe itself to some element like:
$.post('get-iframe.php', function(data) {
$('#element_id').html(data);
});
etc. solutions are many, this is just one of.
1 Comment
André Tzermias
That wont be enough: jsbin.com/suqupanume/edit?html,js,console,output When you use jquery, or for that matter, javascript to change the iframe attribute, it will become visible for those who inspect the iframe.
You can't. If the URL isn't in the HTML, how would the browser know where to get it?
One thing you could try is to obscure it to make it slightly harder for someone to find it. You could have the src attribute be blank and then when the document is ready fetch the URL value from the server in a separate AJAX request and update the iframe tag to include that value in the src.
This would be a fair amount of work, however, and wouldn't really accomplish anything. The only thing it would prevent is somebody finding it by viewing the page source. They can still look at the "current version" of the HTML in any web browser's debugging tools. (Right click on an element and inspect it, which is nearly ubiquitous at this point.) Or any other normal traffic-sniffing tools will see it plain as day.
Ultimately, if the web browser needs to know a piece of information, then that information needs to be visible on the client-side.
Comments
I decided for solution that does not use javascript, because most of the time it will be possible to read the "hidden" content.
Moreover, changing iframe SRC with javascript, will keep URL hidden when checking the source. However, inspecting the code will show the real URL.
My code is in PHP; however, I believe that the logic can be translated to other programming languages. This is how it works:
I kept the iframe tag as usual:
<iframe src="dash_url.php"></iframe>
The trick is inside the iframe_url.php, where I validate the referer. If it is valid, page is redirected to iframe URL. If it is not, than URL will be a message.
<?
$iframe_url = "https://example.com";
$Referer = @$_SERVER["HTTP_REFERER"];
$RefererHost = @explode(":", explode("/", explode("//", $Referer)[1])[0])[0];
if ($RefererHost == $_SERVER["SERVER_NAME"]) {
header("Location: " . $iframe_url);
} else {
echo "Invalid URL";
}
?>
If visitor inspects the page or checks the source, iframe tag will show SRC as dash_url.php.
2 Comments
Strong84
It is actually a good solution~ it gets the url on server side.
Noel Mallari
I tried this but once they open the dev tools they will see at the bottom of iframe the loaded real url...
#document (REAL URL) so they can copy it and place to browser url.There's no way to fully block source viewing. But there are a couple ways to disable right-clicking:
1) Javascript:
<script language="JavaScript">
<!--
var message="Your message goes here.";
function click(e) {
if (document.all) {
if (event.button == 2) {
alert(message);
return false;
}
}
if (document.layers) {
if (e.which == 3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown=click;
// -->
2) Add the following into your tag: oncontextmenu="return false"
reference https://forum.powweb.com/archive/index.php/t-36161.html
Comments
You can load the source into the iframe and then remove the request or src URL afterward. I hope this helps you. Thank you for this post!.. I finally find a solution to my problem...
Example
File name : view.php
<?php
session_start();
// Secure token verification not super secure you need to edit this HEHE.
if (!isset($_SESSION['token'])) {
$_SESSION['token'] = "1"; //Make me secured token.
}
// A simple validation for iframe requests.
if (!isset($_GET['token']) || $_GET['token'] !== $_SESSION['token']) {
die("Unauthorized access"); // I'm gonna die if someone view me.
}
// View Content what ever your want
echo '<html>
<body>
<h1> View Loaded Successfully</h1>
<p>Now the source file is hidden!</p>
</body>
</html>';
?>
File name : index.html
<html>
<body>
<div id="iframeContainer"> <!--Mother/Father of your iframe. <3-->
<iframe
id="fakeIframe"
src="view.php"
style="width: 600px; height: 400px; border: none"
></iframe> <!--Declared Iframe, I'm here buddy!! <3-->
</div>
<script>
fetch("view.php?token=1") //It will equal to your declared token so if someone view this directly it will say Unauthorized Access but make sure you obfuscate this code to prevent direct viewing.
.then(response => response.text())
.then(html => {
let iframe = document.getElementById("fakeIframe").contentWindow.document;
iframe.open();
iframe.write(html);
iframe.close();
// OPTIONAL: Delete token after loading
history.pushState({}, "", "getView.php");
})
.catch(error => console.error("Failed to load View", error));
</script>
</body>
</html>
//when they open dev tools they will only see the default iframe like this.
<iframe id="fakeIframe" src="view.php" style="width: 600px; height: 400px; border: none" __idm_id__="5234689"></iframe>
#document(https://view.php)
