Proof of concept iOS app demonstrating how to serve a local (embedded) website in WKWebView, while also being able to make cross-origin remote AJAX calls and handle cookies without worrying about Same-Site restrictions.
The solution uses GCDWebServer and shikaraba's Swift 4 rendition of sciolist's CORS proxy.
- Import the project in Xcode (I used version 11.5 & Swift 5)
- Under the Web folder in Project navigator you will find a very basic static website having an index.html homepage.
You can replace it down the line with your static website which you want to embed in the app. - Under the Web folder, for convenience, there is also a controller package containing PHP files for a very basic API that the homepage will call using AJAX.
To serve this api on your local network, in terminal navigate to the Web folder from earlier (not the controller folder) and run the following command, replacing the IP with your Mac's:php -S 192.168.100.2:8083
- Open the index.html from the Web folder in Xcode and edit the
$apiUrl
variable at the top of the scripts.
As you see from the code, we are pointing any AJAX calls to the PHP API we have exposed on the local network in the last step.
As observed, in order to enable cross-origin AJAX calls and Same-Site cookies, we must prefix our target url withhttp://localhost:8884/CORS/
. If our API is running at 192.168.100.2:8083 as configured above, then the value for the$apiUrl
variable will be:var $apiUrl = "http://localhost:8884/CORS/http://192.168.100.2:8083"
- Deploy the application on your device using Xcode. The basic website served has two buttons: Login and Get protected message.
The Login button will initiate an AJAX call to the API. During the response, a cookie will be set. GET is used for simplicity's sake. The cookie expires in 12 seconds to facilitate testing.
The Get protected message button will return different messages based on the presence of the non-expired cookie set using the Login button.
The above POC testing instructions demonstrate that our GCDWebServer bound to localhost:8884 on your iOS device is capable of proxying calls to a cross-origin API on a specific /CORS/
subpath. All the other paths served by the lightweight webserver are considered resources of the embedded website.
Modifying the above POC to enable similar behavior for your local website should be self-explanatory. Feel free to experiment and alter the code to suit your needs.