I have an iOS hybrid app centred around a WKWebView loading local web assets with loadFileURL. The WKWebView municates over HTTPS to a backend API with jQuery.ajax. The app is mobile-only and I want the API to also be "mobile-only". That is, I want to block browsers such as Chrome and Firefox from using the API.

My strategy is to set the Access-Control-Allow-Origin header on API responses as follows:

Access-Control-Allow-Origin: app://myApp

Can I change the origin of the WKWebView to app://myApp to avoid browsers from querying the API?

I have an iOS hybrid app centred around a WKWebView loading local web assets with loadFileURL. The WKWebView municates over HTTPS to a backend API with jQuery.ajax. The app is mobile-only and I want the API to also be "mobile-only". That is, I want to block browsers such as Chrome and Firefox from using the API.

My strategy is to set the Access-Control-Allow-Origin header on API responses as follows:

Access-Control-Allow-Origin: app://myApp

Can I change the origin of the WKWebView to app://myApp to avoid browsers from querying the API?

• javascript
• ios
• wkwebview

1 Answer 1

Case:1

You can inject a JS into WKWebview at time of document creation or document finished loading and hook the java script XMLHTTPRequest open method with your custom implementation to add this custom header for all the AJAX requests from WKWebView.

example code

NSString *XMLHTTPRequestHookJSPath = [[NSBundle mainBundle] pathForResource:@"XMLHTTPRequestHook.js" ofType:nil];
NSString *kXMLHTTPRequestHookJS = [NSString stringWithContentsOfFile:XMLHTTPRequestHookJSPath encoding:NSUTF8StringEncoding error:NULL];
WKUserContentController *contentController = [[WKUserContentController alloc] init];
WKUserScript *script = [[WKUserScript alloc] initWithSource:kXMLHTTPRequestHookJS injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
[contentController addUserScript:script];
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.userContentController = contentController;

self.lastUsedWebView = [[WKWebView alloc] initWithFrame:self.webContainerView.bounds configuration:configuration];
self.lastUsedWebView.navigationDelegate = self;

And in the XMLHTTPRequestHook.js try to hook XMLHttpRequest with your custom implementation to add this custom header and call back the original open method.

Case 2 If you want this header to be added while loading the URLRequest in WKWebview , you can add this header to NSMutableRequest as below and load this request in WKWebview. However with this method you may not have this header in all the AJAX calls from WKWebview.

example code:

WKWebView * webView = /*set up your webView*/
NSMutableURLRequest * request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://example./index.html"]];
[request addValue:@"app://myApp" forHTTPHeaderField:@"Access-Control-Allow-Origin"];

// use stringWithFormat: in the above line to inject your values programmatically
[webView loadRequest:request];

Hope this helps.