Handling cross-domain (multi-tenant) links

[timfrazee]

Hello,

I'm a seasoned Rails/Hotwire dev, but this is my first foray into Hotwire Native (or any native, for that matter).

I have a multi-tenant web app that separates tenants by subdomain (i.e. index.example.com shows all tenants, and one.example.com would be a tenant named "one"). I've set up a simple RouteDecisionHandler that looks for subdomains of the root domain and handles them with .navigate in order to prevent opening them in a modal. This works.

In iOS (haven't tried Android yet), the start page (index.example.com) displays correctly, and paths under that subdomain navigate as expected. However when I click a link to one.example.com, I get an error page:

The console shows the following error:

Error evaluating JavaScript function `window.turboNative.visitLocationWithOptionsAndRestorationIdentifier': SecurityError: Blocked attempt to use history.pushState() to change session history URL from https://index.example.com/ to https://one.example.com/. Protocols, domains, ports, usernames, and passwords must match.
pushState@[native code]

Clearly, the browser is rejecting Turbo's attempt to write to history because the domains don't match. Clicking "Retry" loads the page successfully, presumably because it forces the browser to fully reload and skips Turbo.

I believe I've found the relevant code here and here, but I don't see a way to work around this so long as window.Turbo is defined (which it always is). This means that even if I disable Turbo on the link (i.e. data-turbo='false') , the native handler ignores it and tries to do a Turbo visit anyway.

Is there a way to resolve this issue, perhaps by telling Turbo to not attempt to make any changes to history, or by bypassing it altogether and doing a full page load within the existing web view?

Thanks!

Edit: I watched Joe Masilotti's cast on route handlers where he mentioned that it may be possible to use WebViewPolicyDecisionHandler to handle subdomain multitenancy by "spinning up a new navigator" (timestamp), but I don't have much context for how I'd go about doing that.

[joemasilotti]

Turbo.js won't visit pages across subdomains due to security concerns. Instead, this should be intercepted and handled manually via a custom WebViewPolicyDecisionHandler in Hotwire Native.

Here's a rough sketch of how you could handle this. I left the TODO for you to provide your custom logic of "resetting" the app for the new subdomain. I hope this helps!

import HotwireNative
import UIKit
import WebKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        configureHotwire()
        return true
    }

    private func configureHotwire() {
        Hotwire.registerWebViewPolicyDecisionHandlers([
            SubdomainWebViewPolicyDecisionHandler(),
            ReloadWebViewPolicyDecisionHandler(),
            NewWindowWebViewPolicyDecisionHandler(),
            ExternalNavigationWebViewPolicyDecisionHandler(),
            LinkActivatedWebViewPolicyDecisionHandler(),
        ])
    }
}

class SubdomainWebViewPolicyDecisionHandler: WebViewPolicyDecisionHandler {
    let name = "subdomain-policy"

    func matches(navigationAction: WKNavigationAction, configuration: Navigator.Configuration) -> Bool {
        guard
            let requestHost = navigationAction.request.mainDocumentURL?.host(),
            let configHost = configuration.startLocation.baseURL?.host()
        else { return false }

        return requestHost != configHost && baseDomain(of: requestHost) == baseDomain(of: configHost)
    }

    func handle(navigationAction: WKNavigationAction, configuration: Navigator.Configuration, navigator: Navigator) -> WebViewPolicyManager.Decision {
        // TODO: User switched subdomains, reset the app and load the new URL.

        .cancel
    }

    private func baseDomain(of host: String) -> String {
        let components = host.split(separator: ".")
        guard components.count > 2 else { return host }
        return components.dropFirst().joined(separator: ".")
    }
}

[timfrazee]

Thanks Joe, this looks like it'll set me on the right path. I appreciate it!