How to modify headers with Safari on iOS

I want to use Safari for my GraphiQL page testing but with the added security of an API key, I have no way to edit headers to allow access to the GraphiQL interface. Firefox and Chrome both have extensions to edit headers, and the rails-graphiql gem is testing the implementation of editing headers directly in the GUI. But until that update get's pushed, there's no solution I suppose.

You can use the Requestly Desktop app - https://requestly.io for Intercepting network requests from the Safari browser and modifying HTTP request & response headers. Requestly allows you to launch any browser directly from the app and modify its traffic. Not only headers, but you can also modify the response body, request URL, request Body, etc. Check out more at https://requestly.io

Is there a solution to modify headers on safari for iOS just like with ModHeader extension for other browsers

You can use the Requestly desktop app[1] to intercept and debug network traffic on safari and iOS.

To add headers you can use the modify headers rule[2]

For iOS, they have thorough documentation[3] on how to setup the proxy and the ssl certificates. This is a one time setup and helps you not just intercept and inspect the traffic (even https) but also to make easy modifications using many common rules like the redirect rule, headers rule, modify response rule, etc.

I have the same issue all the time, when in the office at least i could share my laptops network connection (and thus routing for testing restricted apps) but now I’m dead in the water

Your laptop will still need to be on the same network to debug iOS traffic

I want to use Safari for my GraphiQL page testing but with the added security of an API key, I have no way to edit headers to allow access to the GraphiQL interface.

They also provide support for specifically targeting GraphQL requests inside the modify. request[4] and modify response rule.

Links:
[1] Desktop app - https://requestly.io/desktop
[2] Modify headers - https://docs.requestly.io/getting-started/modify-http-request-using-rules/modify-headers
[3] iOS setup - https://docs.requestly.io/desktop-app/how-to.../ios-interception
[4] Modify GraphQL requests - https://docs.requestly.io/getting-started/modify-http-request-using-rules/modify-ajax-response-rule/mock-graphql-api-response

If you connect your iPhone to your Mac with a Lightning to USB-C cable, under the "Develop" nav option (which you have to enable in Safari's preferences | "Safari Settings > Advance > Show Develop Menu in menu bar").

Under Develop, find your phone and then click the site you want to override request or responses for.

Then you will have access to the Safari Developer Tools for that mobile webpage. Go to "Network", find the request you want to edit. Right click and pick if you want to override the request or response. Then edit the file there.

I believe you could edit the HTML, request headers, ect... this way.

https://www.youtube.com/watch?v=ei1sNP2zAhA