Exploring the intricacies of AJAX CORS and its impact on web

I am seeking to deepen my comprehension of how CORS functions and why it operates in its particular manner.

According to the insights I gained from this article, when a page from www.a.com initiates an AJAX request to www.b.com, it is entirely up to www.b.com to determine whether or not the request should be permitted.

However, what aspects are actually safeguarded on the client within this framework? For instance, if a malicious actor manages to carry out an XSS script injection on my webpage, they could then execute an AJAX request to their domain for storing user data. Consequently, the hacker's domain would undoubtedly authorize such a request.

My initial impression was that www.a.com should be the entity responsible for determining which domains can receive requests. Therefore, in theory, I envisioned compiling a comprehensive list of approved domains for AJAX CORS requests within the header Access-Control-Allow-Origin.

Can someone elucidate the security challenges that the current CORS implementation addresses?

javascriptajaxcross-domaincors

Answer №1

From what I gathered from this discussion, it seems that when a page hosted on www.a.com sends an AJAX request to www.b.com, the decision to allow or block the request lies with www.b.com.

Actually, the request isn't blocked (unless it's considered a simple request).

Generally, JavaScript on www.a.com doesn't have automatic access to responses from www.b.com.

CORS serves as a mechanism through which www.b.com can grant permission for JavaScript on www.a.com to access the response.

But what exactly is being safeguarded on the client side in this setup?

It prevents the owner of www.a.com from extracting data from www.b.com using the browser of a User who has interacted with both sites and has authenticated credentials on www.b.com (thus accessing non-public data).

For instance, if Alice is logged into Google and visits malicious.example trying to retrieve data from gmail.com via XMLHttpRequest, the same origin policy restricts malicious.example from reading sensitive information.

What about scenarios where a hacker manages to inject XSS script into my site, allowing them to send AJAX requests to their domain to store user data? Will the hackers' domain automatically permit such requests?

Exactly. Dealing with XSS requires addressing security flaws at the source (www.a.com), rather than solely relying on browser restrictions.

Answer №2

In addition to @Quentin's insightful response, there is also a technology called Content Security Policy that addresses the same issue.

The idea was that www.a.com should have control over which domains are permitted for requests. In theory, I would like to include a list of allowed domains in the Access-Control-Allow-Origin header for CORS AJAX requests.

CSP allows you to set a header from your domain (www.a.com in this case) to limit AJAX requests:

connect-src restricts the origins for XHR, WebSockets, and EventSource connections.

To implement this, you can add the Content-Security-Policy HTTP header to your HTML response:

Content-Security-Policy: connect-src 'self'

This will confine AJAX requests to www.a.com if the header is included in the response from www.a.com:

'self' matches the current origin, excluding its subdomains

Check out this link for information on supported browsers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

save choice in antd select in react js

In the process of developing a ReactJS project, I am utilizing the antd select component to display a list of companies. Upon selecting a company name, the users registered under that company will be shown. The attached video showcases the functionality fo ...

javascriptreactjsselectrenderingantd

Uploading images to an S3 bucket in base64 format using Angular 7

Within my Ionic 4 Angular 7 application, I am attempting to upload an image captured using the Cordova camera plugin. The output data from this Camera plugin is in the form of base64 image data. this.camera.getPicture(options).then((imageData) => { ...

javascripttypescriptamazon-s3file-uploadionic4

Exploring the integration of Django Rest Framework with Angular

I am just starting out with Django Rest Framework (DRF) and AngularJs. I am trying to figure out the best way to integrate these two technologies. Combining DRF and AngularJs in one project (Most of the tutorials recommend this) Using DRF as the backend ...

javascriptpythondjangoangularjsdjango-rest-framework

Plotly.js issue with second Y-axis not properly adjusting scale

I am dealing with a unique dataset that comprises two sets of x-y data. Both sets have x values representing dates within a common range, albeit at different specific points. The y values associated with each set represent entirely distinct data with varyi ...

javascriptplotly

I am experiencing a problem where my webpage does not load properly when trying to access it

After setting up a route triggered by a specific click event using AJAX, I noticed that although my route is being called, the page content is not rendered as expected. Here is my AJAX function: function showProfile(user_id) { console.log("show pro:" + u ...

javascriptnode.jsajaxexpressejs

What is the best way to create a shaking image animation using React Native?

I am trying to create a shaking image animation in React Native when a TouchableOpacity is pressed. So far, I have implemented an animated image with the following code: const backgroundImage = require('./components/images/baby-sleep.jpg') cla ...

javascriptandroidcssreactjsreact-native

Select three unique numbers at random from the total number of elements in the array

I currently possess an array containing a variety of objects. At present, there are 21 objects in this array, although this number is subject to change. To iterate through the array and generate the necessary content, I am implementing the following code ...

javascriptarraysloopsrandom

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it. I tried implementin ...

javascriptjquerycss

Troubleshooting jQuery onclick Issue with the <a> Tag on iOS 10

Dealing with a slow loading link on a webpage led me to create this javascript code below that triggers a loading message. The issue I'm facing is that it doesn't seem to work properly on mobile devices. I have attempted using touchstart and touc ...

javascriptjqueryhtmlios

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, i ...

javascripthtmlcss

Validation of phone numbers based on country codes

How can I validate phone numbers based on the selected country in Angular? Are there any Angular packages specifically for this task? I've attempted to use regex, but it only works for certain countries. I need a solution that can validate mobile an ...

javascriptangularjsvalidationpackage

fetching the name of the button from a servlet on a JSP page

I am currently working on a project in eclipse using JSP. I am facing an issue with detecting which button is pressed when submitting a form with an ajax call. The request.getParameter(button-name) method is returning null within the doPost method of the s ...

javajqueryajaxjspservlets

Having trouble locating the OBJ file in your Three.js WebGL project?

I am attempting to load an obj file using Three.js, but despite following various tutorials and resources online, I am only met with a black screen and no error messages in the console. The console output from the LoadingManager indicates that the objects ...

javascriptthree.jssketchup

Can you provide guidance on how to divide a series of dates and times into an array based

Given a startDate and an endDate, I am looking to split them into an array of time slots indicated by the duration provided. This is not a numerical pagination, but rather dividing a time range. In my TypeScript code: startDate: Date; endDate: Date; time ...

javascripttypescriptmomentjs

The consistent index is shared among all dynamically generated elements

I'm currently working on a project where I am generating dropdowns within a table dynamically. I am attempting to determine the index of the dropdown that triggered the event in the following way: $(".template").on('change', '.dataType ...

javascriptjquery

Is there a way to obtain HTML code within a contentEditable DIV?

When working in a contentEditable-DIV, my goal is to extract the HTML code from the starting position (0) to the end position where the user has clicked. <div id="MyEditableId" contentEditable="true"> 1. Some text 123. <span style="background-c ...

javascriptjqueryhtmlcss

The if-else statement is providing a misleading outcome

While working on my map using leaflet, I decided to implement a dynamic color concept based on input data. However, despite comparing 3 sets of data to ensure accuracy, some parts of the color scheme are displaying incorrect results. Below is the snippet o ...

javascriptleaflet

Proper technique for utilizing loadImage in p5.js?

I've been working on loading image URLs from a json file and everything seems to be functioning correctly, except for the actual images not displaying. Currently, I have a simple click carousel set up where clicking moves the index to the next image. ...

javascriptasynchronousprocessingp5.js

Encountered an issue with the response - SyntaxError: Unexpected end of input while utilizing the 'no-cors' mode

I attempted a Fetch call in ReactJS to a REST-API and am trying to manage the response. The call is successful, as I can see the response in Chrome Dev Tools: function getAllCourses() { fetch('http://localhost:8080/course', { method: 'P ...

javascriptjsonreactjscorsfetch-api

Tips for detecting when a button is being hovered over

Is there a specific JavaScript property that can be used to determine if a button is being hovered over? I need this functionality for performing a task when the mouse is already hovering over the button. I know about the onMouseOver event, but I haven&ap ...

javascripthtmlcss