Protect your DOM's href safe from curious eyes [duplicate] - javascript

This question already has answers here:
How to disable View source and inspect element
(4 answers)
Closed 3 years ago.
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?

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).

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.

Related

dynamically generate content for a page when clicking on product

everyone. I am making a website with t-shirts. I dynamically generate preview cards for products using a JSON file but I also need to generate content for an HTML file when clicking on the card. So, when I click on it, a new HTML page opens like product.html?product_id=id. I do not understand how to check for id or this part ?prodcut_id=id, and based on id it generates content for the page. Can anyone please link some guides or good solutions, I don't understand anything :(.
It sounds like you want the user's browser to ask the server to load a particular page based on the value of a variable called product_id.
The way a browser talks to a server is an HTTP Request, about which you can learn all the basics on javascipt.info and/or MDN.
The ?product_id=id is called the 'query' part of the URL, about which you can learn more on MDN and Wikipedia.
A request that gets a page with this kind of URL from the server is usually a GET request, which is simpler and requires less security than the more common and versatile POST request type.
You may notice some of the resources talking about AJAX requests (which are used to update part of the current page without reloading the whole thing), but you won't need to worry about this since you're just trying to have the browser navigate to a new page.
Your server needs to have some code to handle any such requests, basically saying:
"If anybody sends an HTTP GET request here, look at the value of the product_id variable and compare it to my available HTML files. If there's a match, send a response with the matching file, and if there's no match, send a page that says 'Error 404'."
That's the quick overview anyway. The resources will tell you much more about the details.
There are some solutions, how you can get the parameters from the url:
Get ID from URL with jQuery
It would also makes sense to understand what is a REST Api and how to build a own one, because i think you dont have a backend at the moment.
Here some refs:
https://www.conceptatech.com/blog/difference-front-end-back-end-development
https://www.tutorialspoint.com/nodejs/nodejs_restful_api.htm

How would custom user links work?

By custom user links, i mean like for example when a user registers to the website, a page is created specifically for that user with a link.
For Example
https:/domain.com/users/customerName
Then after creating the link, the website will automatically customize the website by using a clone of a specific webpage.
*Btw i've already took Care of the Login/Register part. I just need to know how custom user links would work.
Option 1: example.com/user
Use a single PHP file and an .htaccess file. Check out How to create friendly URL in php?
Option 2: user.example.com
Create sub-domains for each user, also uses .htaccess. Check out How to let PHP to create subdomain automatically for each user?
Option 3: example.com?user=name
Create a single php file and use $_GET parameters. This is the most usual and easiest way to customize the website based on the user who registered and logged in. (usually using user ID number: example.com/profile.php?user=71)
Of course there's also Session handling.
I think you searching for URL rewriting concept.
If user login the page no need to clone the page.you could access the same page with this user data and specification(dynamic page).Many the page content with php functions
URL rewriting
you could the function in .htaccess
if user enters the page
http://example.com/someuser
its rewrite the url with
http://example.com?q=someuser
if you see the url bar its like special page for the user.
It's actually fairly simple. You just use GET within PHP and the URL would be something like http://example.com/user?id=4453623 - If you've ever been on facebook you'll notice they use PHP for the profile pages and much other things too. If you go to your profile page, you'll notice a "id=" variable up in the URL and that's how they determine which profile page to display to you.
This is basically what #Granny commented.

Access File only via Redirect, Block other Methods

I have the following files on my server:
var/www/html/web/
-- login.html
-- files/content.html
-- css/
-- js/
-- images/
My aim is when a valid user heads to my domain and/or opens login.html, it will redirect them to content.html. I can do this easily with JavaScript.
Next, I need to block access to content.html through any other method but that redirect. If a user tries to head straight to the reference of the file, it will not allow access; the same goes for all my other folders. Also If the content page access via new tab , then also it redirect to login page .
How can I go about doing this? Usage of .htaccess?
I'm about to vote to close this, but commenting here rather than in the comment box (due to space restrictions).
You have a "login.html" page but you don't want users to login before getting access to the content. This appears to be absurd. There might be a sensible reason for it, which might have something to do with the problem you are trying to solve. If that is the case, then knowing what it is would help in formulating a response.
Next, I need to block access to content.html through any other method but that redirect
This requires you to perform some sort of state management. You've not mentioned any capability serverside for this (PHP, Perl, python etc). You could drop a cookie in Javascript and redirect away based on the cooie, but this only proves that the user has previously visited the login.html not that they navigated to the page via the previous redirect. Further state is therefore maintained and asserted by the client which is insecure.
You've provided no explanation of what you are trying to achieve with this redirection, nor provided any context nor details of any constraints.
You can use document.referrer to see where the user came from. Then if a user didn't come from there you redirect him back or something like that.
You could also set a cookie on the login page and the content page checks for that.

Acrobat Javascript: passing a UTM parameter from URL into a PDF button

I have a PDF that has a button with field name ctaButton.
ctaButton currently has a url pointing to https://mywebsite.com.
I want to host the PDF on my server at https://mywebsite.com/hosted.pdf.
And when I send someone a link to the PDF, I want to attach a UTM_term parameter ?utm_term=customer1 and then have the PDF read this parameter and update the ctaButton url to https://mywebsite.com/?utm_term=customer1.
I've been messing around with the Javascript actions in Acrobat for a couple of hours trying to make this happen. Any help greatly appreciated.
You can get the full url to the document using...
var myURL = this.url;
"this" in Acrobat JavaScript is the document context.
I did hours of research and came to this conclusion – Javascript in Acrobat is like trying to code in 1985 AND browsers will not execute whatever code you come up with.
So I used this workaround:
When I send the PDF to someone, I send it as a link with a base64
encoded stringified JSON package that contains a bunch of tracking
data but importantly, the name of the file to access as well as utm
parameters specific to the recipient
The link hits a server handler (NodeJS) that extracts the encoded
JSON package, and uses the data in the package to serve up an HTML
redirect page pointing to the right PDF file
Importantly, the HTML page also saves the JSON package to the
browser's localStorage . . . this comes in handy in subsequent
steps
The PDF file opens in browser (it doesn't have to, could be opened on
desktop) and the call to action link has a link to a get request
handler
The get request handler serves up ANOTHER redirect page
This second redirect page accesses the browser's local storage, looks
for the utm parameters I set for that user, and then redirects to the
sale page, with nice utm parameters attached
So to sum up, you don't add the utm parameters to the call to action link in the PDF (because that would make the world too easy to live in) and instead you do all these acrobatics (no pun intended) to attach utm parameters in the link clicks (via JSON strings saved in localStorage) during the process (i.e. when user opens email to extract file via link, and then when user clicks call to action in the PDF).
Any questions or clarifications please let me know in the comments and I will do my best to address.
Caveats
Only works if user uses same browser in all steps (i.e. if Susan opens the email in Safari, saves the PDF, then clicks the call to action in the PDF, and the link opens in Chrome, utm parameters will not be passed).
Assumes browser is modern and has localStorage
UPDATE: I came across another solution. It's a bit more convoluted. Diagram below.
Porky.io is a Javascript extension for Adobe Indesign. So flow is:
send Porky.io the customer data you need (e.g. utm's for links)
Porky.io generates PDF from a template you provide with the customer data you provided
Listen for a new file save from Porky
Do something with the file (e.g. email it to customer)
I believe you need to run an instance of Windows somewhere in the cloud (e.g. on Azure) to run Indesign with the Porky.io. Unless you want to rely on your laptop.
My project's not big enough yet to warrant setting this up . . . but good alternative if I need to make my current solution more robust.

Handling Facebook Like Button Information (title and image) with Links with Hashtags

On my website, Like buttons are generated dynamically. The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200"). The issue is that I can't seem to set the title or image. When a page loads with a hashtag, a database is queried and then the page title, meta data, and other things are changed. Facebook seems to be using the metadata that's set before the database has had time to load and the content has been changed. Does anyone have any idea how I can solve this problem? I'd love to be able to set the title and image when the like button is loaded if there's anyway to do that. Here's my like button code:
<fb:like href='http://website.com/"+postname+"/"+data.id+"' send='true' layout='button_count' width='450' show_faces='true'></fb:like>
The URLs associated with these Like buttons are links that automatically redirect (with htaccess) to its respective hashtag url (i.e. ".com/event/200" redirects to ".com/#event/200").
That’s your error right there.
Since the Hash part of an URL does not get transmitted to the server, it’s only usable client-side. So redirecting to it server-side is a really bad idea, since you know nothing about the client’s capabilities (f.e. if it supports JavaScript).
Don’t do server-side redirects - make them client-side instead, via JS.
This tutorial shows how to basically go about making an “AJAX-Page” crawlable: http://support.google.com/webmasters/bin/answer.py?hl=en&answer=174992

Categories