This article explores the challenges and solutions of using third-party APIs in web applications while maintaining security. Browsers have a same-origin policy in place to prevent unauthorized data exchange between different domains. However, this policy can sometimes hinder the transfer of data between websites that have different origins. CORS, JSONP, and XHR proxies are three commonly used approaches to bypass this policy while still maintaining security.
CORS, or Cross-Origin Resource Sharing, is a standard that enables requests and responses to bypass their origins by placing information with the HTTP message header. CORS requires the server hosting the resource to include an Access-Control-Allow-Origin header in the HTTP message it sends to the requesting site. This header specifies that the server can access data from the requesting site. CORS is widely used and supports both XMLHttpRequest objects and the Fetch API.
JSONP, or JSON with Padding, is a legacy approach that uses the script element to return JSON data from a server running on a different origin. The data is returned within the script element as the parameter for a callback function, allowing developers to access the data without invoking the same-origin policy. However, JSONP brings executable code into the website, making it vulnerable to malicious attacks. JSONP only works with data in the JSON format, and there is no easy way to determine whether a request has failed and for what reason.
XHR proxies, or XMLHttpRequest proxies, route requests through trusted domains to bypass same-origin policies. This approach requires making requests to a proxy server that can then pass the information onto the web application. The app can use an AJAX request object or Fetch to make the request to the proxy server and include parameters indicating the API that will manage the response. CORS-Anywhere is an example of a proxy server that can manage requests, but developers must set up an account to utilize its features.
Each approach has its advantages and disadvantages, and developers must choose the one that best suits their security needs. CORS is widely used and straightforward, but it does not work with older browsers. JSONP is simple but has security risks and limited data format support. XHR proxies are a more flexible and secure solution, but they require additional configuration and management. In conclusion, developers must carefully evaluate their security requirements before using third-party APIs in their web applications.
EXAMPLES
Here are programming examples for each of the three approaches:
- CORS Example:
To enable CORS, the server hosting the resource needs to include an Access-Control-Allow-Origin header in the HTTP response message sent to the requesting site. Here’s an example code snippet that demonstrates how to use CORS with the Fetch API to make a cross-origin request to a server:
fetch('https://example.com/api/data', {
method: 'GET',
mode: 'cors',
headers: {
'Content-Type': 'application/json'
},
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});
In this example, the fetch function is used to make a GET request to the https://example.com/api/data endpoint. The mode property is set to cors to indicate that a cross-origin request is being made. The server hosting the https://example.com/api/data endpoint needs to include the following header in the response for the request to be successful:
Access-Control-Allow-Origin: *
Or if the request is done from www.domainXYZ.com then if you like to be the only website that can make this API request this should be:
Access-Control-Allow-Origin: www.domainXYZ.com
For doing this in PHP but only for some domains e.g. only for 4 domains see here:
http://leonidassavvides.com/blog/2023/04/24/enable-cors-for-multiple-domains-in-php/#.ZEYT9nZBwuU
- JSONP Example:
To use JSONP, you need to create a script element that calls an API running on a server from a different origin. The server returns the requested content in JSON format, which is treated as the parameter for a callback function. Here’s an example code snippet that demonstrates how to use JSONP to make a cross-origin request to the Giphy API:
function getGiphyData(callback) {
const script = document.createElement('script');
script.src = `https://api.giphy.com/v1/gifs/random?api_key=YOUR_API_KEY&callback=${callback}`;
document.head.appendChild(script);
}
function handleGiphyData(data) {
console.log(data);
}
getGiphyData('handleGiphyData');
In this example, the getGiphyData function creates a script element that calls the Giphy API with an API key and a callback function name. The callback function handleGiphyData is defined to receive the JSON data returned by the API. The getGiphyData function appends the script element to the head element of the document. Finally, the getGiphyData function is called with the callback function name as an argument.
- XHR Proxy Example:
To use an XHR proxy, you need to make a request to a trusted proxy server that can handle the cross-origin request on behalf of your app. Here’s an example code snippet that demonstrates how to use an XHR proxy with the XMLHttpRequest object to make a cross-origin request to the GitHub API:
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://cors-anywhere.herokuapp.com/https://api.github.com/repos/jquery/jquery/commits', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const data = JSON.parse(this.responseText);
console.log(data);
}
};
xhr.send();
In this example, the XMLHttpRequest object is used to make a GET request to the GitHub API through the https://cors-anywhere.herokuapp.com proxy server. The setRequestHeader method is used to set the Content-Type header to application/json. The onreadystatechange event is used to handle the response from the server. If the response has a status code of 200 and a ready state of 4, the JSON.parse method is used to parse the JSON data returned by the server. Finally, the parsed data is logged into the console.