I'm trying to hide the href from a download link using PHP and Javascript (To hide the file location). The problem is that most solutions including my code bellow don't really hide the link since the link is still clearly visible in the source code.

I checked many stackoverflow answers and most users say its actually impossible to hide it. However I keep finding websites hiding their links like for example

Is there any working solution for this? Any idea how they are doing it? Thanks.

My code:

<?php
$link = ".txt";
?>

<a href="#" id="Link" onclick="Link()">Link</a>

<script>
   var download_link = '<?php echo $link; ?>';
   function Link() {
   document.getElementById("Link").href = download_link;
        }
</script>

I'm trying to hide the href from a download link using PHP and Javascript (To hide the file location). The problem is that most solutions including my code bellow don't really hide the link since the link is still clearly visible in the source code.

I checked many stackoverflow answers and most users say its actually impossible to hide it. However I keep finding websites hiding their links like for example https://krizis.itch.io/limito

Is there any working solution for this? Any idea how they are doing it? Thanks.

My code:

<?php
$link = "https://www.google./robots.txt";
?>

<a href="#" id="Link" onclick="Link()">Link</a>

<script>
   var download_link = '<?php echo $link; ?>';
   function Link() {
   document.getElementById("Link").href = download_link;
        }
</script>

• javascript
• php

Share Improve this question Follow edited Nov 20, 2019 at 14:38 ramenknight asked Nov 20, 2019 at 14:17 ramenknightramenknight 9711 silver badge77 bronze badges 8

• What do you mean hide href? Can you show us an example? Maybe obfuscate is what you're after. – waterloomatt Commented Nov 20, 2019 at 14:23
• The idea is to hide the url from a button/link, the code I posted don't really work properly since the url is still visible in the source code. Somehow for example krizis.itch.io/limito seems that is able to hide their urls from their download buttons... – ramenknight Commented Nov 20, 2019 at 14:29
• 1 They aren't hiding their links they are retrieving the link from the server and starting the download. The client can still get the link if they want to get it. For instance that site uses jQuery's get() method to do an ajax request to get it. As a client I could just hook that function call and get the retrieved link. Or externally just see how they are making the url for doing the ajax request and do it independently of a browser – Patrick Evans Commented Nov 20, 2019 at 14:30
• 2 You can make the links harder to find but you can't make them disappear. The site you linked uses JS to launch the request. It's still pretty trivial to find the link used, just open your debug panel and watch for the network request. It's not an effective means to keep a URL secret or to prevent unauthorized downloads. – Alex Howansky Commented Nov 20, 2019 at 14:30
• 1 One tricky solution is to send an ajax request onClick and on respose or ajax request , you can return the href and make a window.location call to redirect. – Ajith Commented Nov 20, 2019 at 14:34

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

You can do the following to achieve your requirement

<a href="#" id="Link" onclick="Link()">Link</a>

<script>
function Link() {

    jQuery.ajax({
        url: "getLink.php",
        type: "POST",
        data:  {
                // more fields can be added here
        },
        dataType: 'json',
        success: function(return){              
            // process success 
            window.location.href = return.url
        },
        error: function(err) {
            // Process failure
        }           
});

}
</script>

In your getLink.php I have returned a static url, You can perform any conditions if needed

<?php

$return = array();
$return['url'] = "https://www.google./robots.txt";
echo json_encode($return); 

There isn't a way, that I know of at least, to pletely hide the URL from the end-user. If you could, then you'd hide it from the browser too which would essentially break the internet.

However I keep finding websites hiding their links like for example https://krizis.itch.io/limito

Ajinth's answer shows how to implement the example but it won't hide the URL pletely.

The example you posted uses AJAX to retrieve the URL from the server. You can see the final URL by inspecting the network traffic between your browser and the server. See screen shot.

You can't hide a download URL. The browser uses it to download the file.

The example that you gave (https://krizis.itch.io/limito) "hide" the download URL but it's still visible on browser Developer Tools.

Just to you understand the flow on this example:

1. When you click the button, it do a XHR request to https://krizis.itch.io/limito/file/1784632?after_download_lightbox=true
2. This requests returns an URL to some CDN
3. The Javascript open that URL in a new window using: window.open("www.theurl./foo/bar", "_blank")

What happens here is just an attempt to hide the link. Most of the End Users almost never will find this, but anyone with a little of expertise will find it.

IF you want to protect some link, use some unique secret on it

You didn't specified the reason you are trying to hide your link, but let's suppose that you have a link that should be used just once, or should belong to a specific user authenticated on your website, you must create a endpoint on your backend that receives a secret (aka. password) to allow that download.

Example:

You are designing a link protector website (some of that annoying websites used to hide some torrents) that ask you to follow someone on a social network before downloading the torrent.

You will need to have a backend that after user do the desired action, give to the user a download link. This download link must be valid only once, or for a period of time, otherwise the user will share the final URL with his friends.

So, the backend will provide a URL like this:

https://my-annoying.service./download/torrent-x-y-z?token=TjLytA2MwVmXJvyJjjOEDWF9zgCJAKQh

And behind the scenes, the backend must know that the token expires at first usage or after a few hours.

And, the given download link isn't the direct URL to the file, instead it points to some PHP (or any language) script that processes it and output the file. Something like this:

if (isTokenValid($_GET['token'])) {
    $file = 'path/to/the/file';

    header("Cache-Control: public");
    header("Content-Description: File Transfer");
    header("Content-Disposition: attachment; filename=filename.torrent");
    header("Content-Type: application/x-bittorrent");
    header("Content-Transfer-Encoding: binary");

    readfile($file);
} else {
    die('Invalid token');
}

Note that this code is only conceptual, just a help to you understand it. You will need to develop it to your own usage.