Protect your DOM's href safe from curious eyes

Question

I am having a display page where is shows all our reports like this,

On mouse over it shows the file url (where it is located in our server). I want to protect this from users.

What is tried is this,

<li><a data-href="'.$value->uri.'">'.$value->filename.'</a></li>

and call script when click to download the file:

<script>
     $("a").click(function(event){

      var href = $(this).data("href");

      window.location.href=href;

     });
</script>

But still users can inspect and see url. Is there any way to hide url from users?

No. The fact that you published them on a publicly available server means you're offering them to the public. Hide this behind some authentication. If this is a corporate site, make this only available inside your network. — Joseph, Sep 16 '19 at 14:21
No. Anything that is client-side is available to the user. If it wasn't, then the client can't use it. And even if you "hide" the URL, you still need to *visit it* in order to get the file. — VLAZ, Sep 16 '19 at 14:21
i want to know is there any other way or procedure, except try to disable inspect element — arun, Sep 16 '19 at 14:24
@arun again - anything information on the client-side is available to the users using that client. — VLAZ, Sep 16 '19 at 14:25
If the files are in a DB, use the file's ID/GUID instead of path then handle that in the GET. If you're just reading a directory, you possible encode the file name (and decode) on the GET. ie hide the filename/path and then link to your application that decodes rather than link directly to the file — freedomn-m, Sep 16 '19 at 14:31
What do you mean "where it is located on the server"? The real location on the server is not visible to the users. Do you also want to hide the server-root relative path( and filename)? Plus, how do you serve the files, through apache or manually from inside php code? — Marinos An, Sep 16 '19 at 14:43

score 0 · Answer 1 · answered Sep 16 '19 at 14:31

Aside from the security implications of trying to enact a system like this (i.e. the level of security is hiding the href), as you've tagged PHP you could setup an endpoint in PHP that returns a 302 redirect for an href that redirects to the object on your server.

Use a DB to save the mapping of the 'public' href value that you see on mouseover and in the inspector, then when you hit this URI on your PHP server, look up the mapped resource and return it (if the user is authenticated).

nice_dev · Answer 2 · 2019-09-16T15:52:48.860

First, never show server path in the URL.
Second, make these links href as /download_file.php?file_name=your_current_file_name.
Third is to have a script on server side, like download_file.php which gets the file name, searches in it's directory for the file and downloads them on the client browser.
Fourth is to hide this behind the authentication that only logged in users could see it.
Fifth, you could have a database table of each file against a user to make sure that other users don't get access to someone's file. As an alternative, you could also make folders based on user_id to make it easier to get the parent directory to search through, as you could get current logged user from session.
Always store uploaded files outside of your public_html so that they aren't accessible from the web, except from your server scripts.

Side note: Storing user ID in session is fine with regards to security. See here: php storing user id in session?

Note: Disabling inspect element is really not the right way to handle this.

Ok, reason for downvote to improve? – nice_dev Sep 16 '19 at 14:36 — nice_dev, Sep 16 '19 at 14:36

Protect your DOM's href safe from curious eyes

2 Answers2