Setup Laravel 10.x Homestead in Windows 10/11

Section – 1 [Install Software]

https://laravel.com/docs/10.x/homestead#installation-and-setup

vagrant_2.3.7_windows_amd64.msi – https://developer.hashicorp.com/vagrant/downloads

VirtualBox-6.1.46-158378-Win.exe – https://www.virtualbox.org/wiki/Download_Old_Builds_6_1

VirtualBox 6.1.46 (released July 18 2023) << This and Not the >> VirtualBox 7.0.10 platform packages – ​Windows hosts

According to: https://laravel.com/docs/10.x/homestead#installation-and-setup

Code Editor/IDE: PhpStorm-2023.1.4.exe or VSCodeSetup-x64-1.80.1.exe

Lastly install: Git-2.41.0.3-64-bit.exe – https://git-scm.com/downloads

Section – 2 [ENABLE VT-x in Hardware/BIOS/UEFI if disabled]

http://leonidassavvides.com/blog/2023/07/23/enable-vt-x-in-hp-z640-workstation/

Section – 3 [Installing Homestead]

https://laravel.com/docs/10.x/homestead#installing-homestead

Go To CLI Terminal in IDE/Editor or Windows Terminal or Git Bash Terminal and execute:

git clone https://github.com/laravel/homestead.git D:\htdocs_xampp\Homestead

where D:\htdocs_xampp\Homestead the Homestead directory, after entering this directory:

d:
cd d:\htdocs_xampp\Homestead

Next, execute the bash init.bat command from the Homestead directory to create the Homestead.yaml configuration file. The Homestead.yaml file is where you will configure all of the settings for your Homestead installation. This file will be placed in the Homestead directory: if there is a problem with the

init.bat 

use

./init.bat

Section – 4 [Configuring Homestead]

Follow the instructions at:

https://laravel.com/docs/10.x/homestead#configuring-homestead

For configuring the file: Homestead.yaml

Section – 5 [Launching The Vagrant Box]

After all, the steps above, it is time to:

Launching The Vagrant Box

You must have in mind the 4 most used CLI commands FROM CLI/Terminal at d:\htdocs_xampp\Homestead\:

vagrant up # if error on this - please Section 6 below
vagrant status
vagrant suspend
vagrant ssh

Section – 6 [Configuring SSH Keys]

In case the first attempt of running:

vagrant up

you getting

Please give the command to generate ssh keys in Windows:

ssh-keygen -t rsa -C "username@email.com"

This will create the:

C:\Users\lwdls\.ssh\id_rsa.pub
C:\Users\lwdls\.ssh\id_rsa

Then you have to go to Homestead.yaml and edit the SSH Keys with the correct Keys you have just created:

authorize: C:\Users\lwdls.ssh\id_rsa.pub
keys:
     - C:\Users\lwdls.ssh\id_rsa

Then you return to Section – 5 and give the command: vagrant up

The first time you have to await some time to download the Vagrant VM – Ubuntu Server from the repositories…

After the VM OK is launched go to: http://homestead.test/phpinfo.php to see the webpage of phpinfo():

phpinfo.php

<?php
phpinfo();
?>

if any problem put the phpinfo.php

in

public/phpinfo.php

to stop the VM – shutdown the PC – give

vagrant suspend

To add additional sites:

Adding Additional Sites

https://laravel.com/docs/10.x/homestead#adding-additional-sites

To create a Laravel Site – start with download Laravel files with the:

https://laravel.com/docs/10.x/installation#your-first-laravel-project

At Terminal d:\htdocs_xampp\

composer create-project laravel/laravel example-laravel-app

Composer can be installed from:

https://getcomposer.org/download/

Also, the composer comes preinstalled in Homestead/Vagrant/VM

And, a second way is:

After:

vagrant up 

Give:

vagrant ssh

and from Terminal at /home/vagrant/ give the command:

 composer create-project laravel/laravel example-laravel-app

Any way you choose, be sure to edit the Homestead.yaml and every new website added to run:

vagrant reload --provision

And lastly

To run a new URL locally modify the host file at:

On macOS and Linux, this file is located at /etc/hosts. On Windows, it is located at C:\Windows\System32\drivers\etc\hosts:

192.168.56.56 homestead.test
192.168.56.56 another1.test
192.168.56.56 another2.test

Again, according to

Homestead.yaml

After, download the Laravel 10.x bootstrap code base, view the Laravel homepage accordingly by going to http://another1.test.

Happy Laravel Web Development & Coding…!

Enable CORS for multiple domains in PHP

In this article, we’ll explain to you how to permit CORS requests for multiple origins in PHP.

To get the response from a simple cross-origin POST request, we need to include the header Access-Control-Allow-Origin. The specification of Access-Control-Allow-Origin allows for multiple origins, or the value null, or the wildcard *.

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: https://domainXYZ.com
Access-Control-Allow-Origin: null

The above is a simple implementation.

For multiple domains permissions of CORS, we can use a PHP snippet like below:

<?php
$allowedOrigins = [
   'https://domainXYZ.com',
   'https://z1.domainXYZ.com',
   'https://z2.domainXYZ.com',
   'https://z3.domainXYZ.com',
   'http://z4.domainXYZ4.com',
];

if(in_array($_SERVER['HTTP_ORIGIN'], $allowedOrigins))
{
	$http_origin = $_SERVER['HTTP_ORIGIN'];
} else {
	$http_origin = "https://example.com";
}
header("Access-Control-Allow-Origin: $http_origin");
?>

Exploring Security Issues with JavaScript Web APIs

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:

  1. 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

  1. 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.

  1. 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.