CORS (cross origin resource sharing)

https://www.tutorialspoint.com/spring_boot/spring_boot_cors_support.htm

Cross-Origin Resource Sharing (CORS) is a security concept that allows restricting the resources implemented in web browsers. It prevents the Javascript code producing or consuming the requests against different origin.

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

The CORS standard describes new HTTP headers which provide browsers a way to request remote URLs only when they have permission

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#Examples

Limiting the possible Access-Control-Allow-Origin values to a set of allowed origins requires code on the server side to check the value of the Origin request header, compare that to a list of allowed origins, and then if the Origin value is in the list, to set the Access-Control-Allow-Origin value to the same value as the Origin value

Headers

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing#Headers

Response headers

Access-Control-Allow-Origin
Access-Control-Allow-Credential

PHP example

read.example.org/index.php

   1 <?php
   2 header("Content-type:application/json");
   3 header("Cache-Control: no-cache");
   4 header("Pragma: no-cache"); 
   5 header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']  ); 
   6 header("Access-Control-Allow-Credentials: true");
   7 session_start();
   8 $user = $_SESSION["user"];
   9 
  10 echo("{\"key\":\"readData\" , \"user\": \"" . $user . "\" }");
  11 ?>

auth.example.org/index.php

   1 <?php
   2 header("Content-type:application/json");
   3 header("Cache-Control: no-cache");
   4 header("Pragma: no-cache"); 
   5 header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
   6 header("Access-Control-Allow-Credentials: true");
   7 
   8 session_set_cookie_params(0, '/', '.example.org');
   9 session_start(); 
  10 
  11 $_SESSION["user"] = "userx " .  time();
  12 
  13 echo("{\"key\":\"authData\"}");
  14 ?>

app.example.org/index.html

   1 <html>
   2 <head>
   3 <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
   4 
   5 <script>
   6 $(document).ready(function(){
   7   console.log('Iooo');
   8 
   9   $.ajax({
  10   url: "http://auth.example.org/",
  11   xhrFields: { withCredentials: true  },
  12   success:  function(data, textStatus,jqXHR ){ $("#auth").text(data.key); },
  13   error: function( jqXHR, textStatus, errorThrown ){console.log(textStatus);}
  14   });
  15 
  16   $.ajax({
  17   url: "http://read.example.org/",
  18   xhrFields: {withCredentials: true},
  19   success: function(data,textStatus,jqXHR){ $("#read").text(data.key + ' ' + data.user  ); },
  20   error: function( jqXHR, textStatus, errorThrown ){console.log(textStatus);}
  21   });
  22 
  23 });
  24 
  25 </script>
  26 </head>
  27 <body>
  28 <p id="auth"></p>
  29 <p id="read"></p>
  30 </body>
  31 </html>

Apache vhosts configuration

<VirtualHost *:80>
    ServerName app.example.org
    DocumentRoot "/var/www/htdocs/app.example.org"
    <Directory "/var/www/htdocs/app.example.org">
      Require local
      AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName auth.example.org       
    DocumentRoot "/var/www/htdocs/auth.example.org"
    <Directory "/var/www/htdocs/auth.example.org">
      Require local
      AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    ServerName read.example.org       
    DocumentRoot "/var/www/htdocs/read.example.org"
    <Directory "/var/www/htdocs/read.example.org">
      Require local
      AllowOverride All
    </Directory>
</VirtualHost>

Spring pointers

Just adding the annotation @CrossOrigin on an endpoint makes it accept all origins,

Firefox browser tests

The URL in the tab where the test is made must be different than the URL called in window.fetch().

No CORS support on server side

   1 window.fetch('http://localhost:8080/').then( (response)=>{ 
   2   response.text().then( (data)=>{ console.log(data); } );
   3 });

Outputs something like

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource.

CORS support on server side

Returns header Access-Control-Allow-Origin: *

   1 window.fetch('http://localhost:8080/').then( (response)=>{ 
   2   response.text().then( (data)=>{ console.log(data); } );
   3 });

Outputs something like

Hello world