April 26, 2020
Estimated Post Reading Time ~

Adobe AEM - Cross Domain AJAX Request

A common problem for developers is a browser to refuse access to a remote resource. Usually, this happens when you execute AJAX cross-domain request using jQuery or plain XMLHttpRequest. As result is that the AJAX request is not performed and data are not retrieved.

Figure 1. The same-origin policy restriction in effect

ERROR:
XMLHttpRequest cannot load http://remote-domain/url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:4502' is therefore not allowed access

SAME-ORIGIN POLICY
This is a security policy who defines the rules of how a web page can access an external resource (e.g. fonts, AJAX requests). Under the same-origin policy, web browsers do not permit a web page to access resources who origin differs from that of the current page. The origin is considered to be different when the scheme, hostname or port of the resource does not match that of the page. Overcoming the limitations of same-origin security policy is possible using a technique called Cross-origin resource sharing or simply CORS.

CROSS-ORIGIN RESOURCE SHARING
CORS is a mechanism that defines a procedure in which the browser and the web server interact to determine whether to allow a web page to access a resource from different origin.

Figure 2. Cross-domain ajax request
When you do a cross-origin request, the browser sends the Origin header with the current domain value.origin: http://zinoui.com

When the server receives the request, check whether the origin header is within the allowed list, and sends a response with Access-Control-Allow-OriginAccess-Control-Allow-Origin: http://zinoui.com

If you want to allow access for all, use a wildcard '*'Access-Control-Allow-Origin: *

AJAX CROSS DOMAIN REQUEST
1. Simple request
A simple cross-domain request is one that:
Does not send custom headers (such as X-PINGOTHER, etc.)
Only uses GET, POST or HEAD request methods
This is how the simple cross domain ajax request should looks like:

<script type="text/javascript">
// jQuery cross domain ajax
$.get("http://www.example.org/ajax.php").done(function (data) {
    console.log(data);
});

// using XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.org/ajax.php", true);
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();
</script>

2. Preflight requests
Setting custom headers to XHR triggers a preflight request. With simple words this means that preflight requests first send an HTTP request by the OPTIONS method to the resource on the remote domain, to make sure that the request is safe to send. According to W3C for non-same origin requests using the HTTP GET method a preflight request is made when headers other than Accept and Accept-Language are set.

<script type="text/javascript">
// jQuery preflight request
$.ajax({
    type: "GET",
    headers: {"X-My-Custom-Header": "some value"},
    url: "http://www.example.org/ajax.php"
}).done(function (data) {
    console.log(data);
});

// XMLHttpRequest preflight request
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.org/ajax.php", true);
xhr.setRequestHeader("X-My-Custom-Header", "some value");
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();
</script>
3. Request with credentials
By default, for nonsame origin requests, browsers will not send credentials (such as HTTP Cookies, HTTP Authentication, and client-side SSL certificates). A specific attribute has to be set on the XMLHttpRequest object when it is invoked.
<script type="text/javascript">
// jQuery CORS example
$.ajax({
    xhrFields: {
        withCredentials: true
    },
    type: "GET",
    url: "http://www.example.org/ajax.php"
}).done(function (data) {
    console.log(data);
});

// XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.example.org/ajax.php", true);
xhr.withCredentials = true;
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();
</script>

4. The Response
Let's see how the server response should look like:

<?php
// http://www.example.org/ajax.php
if (!isset($_SERVER['HTTP_ORIGIN'])) {
    // This is not cross-domain request
    exit;
}

$wildcard = FALSE; // Set $wildcard to TRUE if you do not plan to check or limit the domains
$credentials = FALSE; // Set $credentials to TRUE if expects credential requests (Cookies, Authentication, SSL certificates)
$allowedOrigins = array('http://zinoui.com', 'http://jsfiddle.net');
if (!in_array($_SERVER['HTTP_ORIGIN'], $allowedOrigins) && !$wildcard) {
    // Origin is not allowed
    exit;
}
$origin = $wildcard && !$credentials ? '*' : $_SERVER['HTTP_ORIGIN'];

header("Access-Control-Allow-Origin: " . $origin);
if ($credentials) {
    header("Access-Control-Allow-Credentials: true");
}
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Origin");
header('P3P: CP="CAO PSA OUR"'); // Makes IE to support cookies

// Handling the Preflight
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 
    exit;
}

// Response
header("Content-Type: application/json; charset=utf-8");
echo json_encode(array('status' => 'OK'));
?>

Few notes:
A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true.
Gecko 11.0 (Firefox 11.0 / Thunderbird 11.0 / SeaMonkey 2.8) removed support for using the withCredentials attributes when performing synchronous requests.
BROWSER SUPPORT
Chrome 3+, Firefox 3.5+, IE 10+, Opera 12+, Safari 4+


By aem4beginner
Posted by at
Labels: ,

No comments:

Post a Comment

If you have any doubts or questions, please let us know.