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

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