Checking and rectifying website addresses with JavaScript

Question

Checking and rectifying website addresses with JavaScript

Summary: User inputs a short-form/alias URL into a field (website.com). I need to identify the full URL and replace the input with it (which could be www.website.com or www2.website.com based on redirection).

--

My web service allows users to input URLs. Upon submission, my service sends GET/POST requests to that URL from the server and processes the data received.

The issue arises when users enter short-form URLs like washingtonpost.com instead of the complete https://www.washingtonpost.com. While browsers handle this by automatically following the redirect, managing this logic on the server end is complex and I'd prefer to avoid it.

I am seeking a way to "validate" the entered URL. One approach is to add www to all URLs without it, but not all websites follow that convention. Some use www2, while others omit it entirely. The most reliable method seems to be listening for redirects and extracting the location value from the response.

One idea involves using JavaScript to validate the URL by sending a GET request, analyzing the response for a redirect status code (301, 302, etc.), and replacing the input with the final destination URL.

The challenge here is CORS. This results in an error in the console:

XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access.`

What would be the optimal approach to solve this? Preferably with JavaScript.

javascript http-redirect

Answer 1

Answer №1

It is not feasible to achieve this task using Javascript due to the security restrictions it imposes in such scenarios.

One workaround is to create an iframe and load the URL, but when dealing with cross-domain redirects, the iframe may restrict access to its location.href.

Alternatively, you can attempt to make AJAX requests, but this method requires the target server to have CORS enabled, which may not be possible if users are allowed to input any URL.

In essence, the solution you seek would violate the cross-domain security policies of browsers, so it might be better to perform this check on the backend.

If backend implementation is not an option:

Fortunately, there are proxy servers available that support CORS and offer their services for reuse. You can utilize their services as long as no sensitive data is exposed. An example includes using a service like cors-anywhere and accessing the custom final URL provided in their header (X-Final-Url). Just remember to specify the protocol (http/https) in the URL.

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

 $.ajax({
   type: 'HEAD', //'GET'
   url:'http://washingtonpost.com',
   success: function(data, textStatus, request){
        console.log(request.getResponseHeader('X-Final-Url'));
   },
   error: function (request, textStatus, errorThrown) {
        console.log(request.getResponseHeader('X-Final-Url'));
   }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

It is not feasible to achieve this task using Javascript due to the security restrictions it imposes in such scenarios.

One workaround is to create an iframe and load the URL, but when dealing with cross-domain redirects, the iframe may restrict access to its location.href.

Alternatively, you can attempt to make AJAX requests, but this method requires the target server to have CORS enabled, which may not be possible if users are allowed to input any URL.

In essence, the solution you seek would violate the cross-domain security policies of browsers, so it might be better to perform this check on the backend.

If backend implementation is not an option:

Fortunately, there are proxy servers available that support CORS and offer their services for reuse. You can utilize their services as long as no sensitive data is exposed. An example includes using a service like cors-anywhere and accessing the custom final URL provided in their header (X-Final-Url). Just remember to specify the protocol (http/https) in the URL.

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

 $.ajax({
   type: 'HEAD', //'GET'
   url:'http://washingtonpost.com',
   success: function(data, textStatus, request){
        console.log(request.getResponseHeader('X-Final-Url'));
   },
   error: function (request, textStatus, errorThrown) {
        console.log(request.getResponseHeader('X-Final-Url'));
   }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Checking and rectifying website addresses with JavaScript

Answer №1

Similar questions

Choosing the right framework for implementing push notifications can be a critical decision. Should

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Instructions for creating a scrollable unordered list when it reaches its maximum capacity

What could be causing my cmd to report an error stating that it is unable to locate the node-modules

The parameters remain consistent across all Angular directives

Transmitting chosen option using AJAX and JavaScript

The use of jquery UI.js is causing issues with loading select menus dynamically

Trouble with Mongoose save() function failing to update data

Redirecting pages without a hash portion

Using React for form validation

Creating a personalized scrollbar for the body using Bootstrap 3

Utilize AJAX response to mark checkbox as checked

Challenge with executing javascript library (photo sphere viewer)

Transition smoothly between two images with CSS or jQuery

Switch to display only when selected

How to dynamically display content based on option selection in AngularJS using ng-show

Running a function on a specific route within the same file in Node.js - here's how to do it

Enhancing JSON Objects in AngularJS with Custom Properties and Calculations

Using Angular to retrieve data from a JSON file correlating with information in another JSON file

Guide for running an await function consecutively with JavaScript and React