The motivation to use redirection can vary, in most cases, it's because:
You moved to another domain for any reason, so you can redirect users to the new domain when they access the content on an older domain.
You have multiple pages whose content varies based on location, language, browsers, or other factors based on which you redirect users to the most suitable page.
You redirect unauthenticated or unauthorized users' requests to resources to a login page.
You send users to other pages correlated with the content of the current site.
All of these are practically achieved through the
Location object that contains URL information. There are a few ways to do this, by fiddling around with different properties of the
- Redirect Users with location.href
- Redirect Users with location.assign()
- Redirect Users with location.replace()
- Security Implications and Side-Effects
- Influence on SEO
The window.location Property
window.location object denotes the current location, or rather, URL of the window/user. It's technically a read-only property, though, nevertheless, we can manipulate it by assigning new values (
DOMStrings) to its properties. The
windows prefix in
windows.location object can be omitted since it is hierarchically located at the top of the scope.
Redirect Users with location.href
location.href property denotes the current URL as a String. Changing the
href property will automatically also navigate the user to the new
href value. Changing the
href property is as easy as simply assigning a new value to it:
location.href = "https://stackabuse.com/";
Note: A functionally equivalent line of code is:
windows.location = "https://stackabuse.com";
It's worth noting that you can redirect a user to a domain other than the domain they're currently on with this approach, though, security issues can arise from this, so the practice should be avoided if possible.
Redirection is typically tied to some sort of event, such as pressing a button that redirects a user to a different webpage, or other events, such as a user performing some operation on a website (uploading an image on social media, after which they're redirected to that post, for example). Let's write a simple function that redirects a user on the click of a button:
href property is similar to what a mouse-click would do.
Redirect Users with location.assign()
location.assign(url) method loads the resource in the provided
url, and displays it in the
window. This is actually the preferred approach to redirecting users compared to setting the
href property, since it also checks for the safety of the provided
url, throwing an exception if it's not a safe destination. Another benefit is that it creates a new entry in the browser's history, allowing the user to gracefully go "Back" if they'd like to.
It's also worth noting that
location.assign() doesn't allow cross-origin redirection. You can only redirect to the same domain in which the call is made, which has a positive impact on security.
Other than that, it can be used in much the same way as assigning a new value to
location.href. Let's rewrite our page to use the
assign() function instead:
Redirect Users with location.replace()
replace(url) method can be used to replace the current resource on the
window, with the resource loaded from the
url. It doesn't really redirect a user, and doesn't get stored in the browser's history. The same security-constraints exist as with the
assign() method, which makes this a desirable method to use if you'd like to replace the content by another page:
It's also worth noting that the
assign() method has a serious, potential, con. If the user is to go back onto a page which automatically runs the
assign() method, they'll be redirected back to the page they've tried going back from. They'd then enter a loop of going "back" via the Back Button, but being redirected to another page due to the
If you're using
assign(), make sure that it's not automatically called on the page, and that its invocation requires a user's action, such as invoking it on a button press. If not - use
location.replace() is the closest to an HTTP redirect, since the original link doesn't get added to the browser's history.
Security Implications and Side-Effects
The mentioned security applies to all of the methods above and it refers to the following aspects:
- If the origin of the script that's calling the method are not the same as the origins of the current page - it will be treated as a security violation and DOMException of
SECURITY_ERRORtype will be thrown. That's to say, external libraries and services embedded into your own page won't be able to redirect users.
- If the stored URL is invalid, a
DOMExceptionwill be thrown.
- If you're redirecting a user to a domain other than the domain they were already on, CORS may kick in and prevent it.
Some of the possible side-effects that could happen due to human-induced design issues are:
- When redirection (other than
replace()) occurs too quickly (i.e. in less than 3 seconds) it can break the back button on a browser. This means that each time you try to move back to the previous page, the redirection will occur once again almost immediately, creating an infinite loop.
- It can be considered as Doorway Page(i.e pages created for SEO indexes manipulation) which is not recommended
- Poorly planned and used redirections can cause chain redirects, redirecting between two or more pages.
Influence on SEO
The best way to overcome these issue may be:
To ether properly issue an HTTP redirect on the server-side with any of redirect status codes (
301..308) or to issue a
404for the pages you no longer want to host or to redirect to.
To inform search engines of a duplicate page by adding
<link rel="canonical" href="https://original_link"/>in the
<head></head>section. This is easier to implement than doing any additional work on the server-side, but keep in mind that not all web crawlers will appreciate it.