Fixing “white page” CDN issues in iOS & Android WebViews with a workaround

Article sections

    Some websites load perfectly in a normal mobile browser but show a blank white screen when opened inside an app’s WebView. A common culprit is the CDN (or its WAF/bot-protection layer) refusing to serve content to embedded browsers. If you can’t change CDN settings quickly, here’s a simple, reliable workaround you can ship today.

    TL;DR (the quick fix)

     

    1. Host a tiny index.html somewhere that’s not behind your problematic CDN (or use a different CDN).

    2. That index.html immediately redirects to your real site (which is on the CDN).

    3. Point your app’s WebView at the new index.html instead of your main domain.

     

    This extra “hop” often bypasses CDN heuristics that block first loads from WebViews.

     

    Why this works

     

    Many CDNs and WAFs score requests with heuristics (e.g., unusual User-Agents, missing cookies, iframes/embeds, in-app browsers). A clean first request to a neutral host can:

    • Set initial cookies/headers cleanly,

    • Avoid tripping bot rules on the first navigation,

    • Land the user on your real site immediately after.

     

    If your CDN challenge happens only on first paint, this simple redirect hop can get you past the white-screen wall.

     

    Step 1 — Create a minimal index.html on a neutral host

     

    You can use any free/basic static hosting (there are lots of lists and threads out there with options, e.g., https://www.reddit.com/r/software/comments/1i0av3m/whats_the_best_free_hosting_site_for_a_basic_site/). The file should be as empty as possible and perform an instant redirect.

    Example index.html

     

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Loading…</title>
    <!-- HTML fallback -->
    <meta http-equiv="refresh" content="0; url=https://your-cdn-site.com/" />
    <script>
      // JavaScript redirect (more reliable than meta refresh)
      (function () {
        var target = "https://your-cdn-site.com/?src=webview-hop";
        // Use replace() to avoid back-button loop
        window.location.replace(target);
      })();
    </script>
    <noscript>
      <meta http-equiv="refresh" content="0; url=https://your-cdn-site.com/?src=noscript-hop" />
    </noscript>
    <style>html,body{background:#fff;height:100%;margin:0}</style>
  </head>
  <body></body>
</html>

    Tips

    • Add a simple query param like ?src=webview-hop so you can see hop traffic in analytics and debug loops.

    • Keep it static—no frameworks, no external scripts, no cookies.

     

     

    Step 2 — Point your WebView to the neutral

    index.html

     

    Android (Config.java)

    see webviewgold.com/docs/android

    iOS (Config.swift)

    see webviewgold.com/docs/ios

     

    Step 3 — Test the flow

     

    1. Cold start your app (force-quit first).

    2. Confirm the WebView loads the neutral page and then quickly redirects.

    3. You should land on your real site (on the CDN) without a white screen.

    4. Check your analytics for hits with src=webview-hop.

     

     

    Troubleshooting & hardening

     

    • Avoid redirect loops:

      If your main site sometimes redirects back to the neutral host, add a rule on the main site: if src=webview-hop is present, do not redirect again.

    • HTTP 301/302 vs. JS/meta:

      If you can configure the neutral host to respond with an HTTP 302 to your main site, that’s even cleaner. Otherwise, the JS location.replace() shown above is reliable.

    • HTTPS & HSTS:

      Ensure the neutral host supports HTTPS (no mixed content). Some strict CDNs plus HSTS can block downgraded or mixed requests.

    • Cookies / SameSite:

      If your main site needs cookies on first load, make sure they’re set with attributes compatible with in-app browsers (e.g., SameSite=None; Secure where appropriate).

    • User-Agent tweaks (optional):

      Some CDNs block uncommon User-Agents. A modern mobile UA string can help—test before shipping.

    • Error reporting:

      Add console/JS error reporting (e.g., Sentry) to see if the WebView is blocked by CSP, CORS, or script errors that look like “white screen” issues.

     

     

    When to use this workaround (and when not to)

     

    Use it when:

    • You see a white screen only inside WebViews and only on the first load.

    • You don’t control CDN rules or can’t get them fixed quickly.

     

    Prefer a CDN fix when possible:

    • Whitelist your app’s User-Agent or domain.

    • Relax overly strict bot/WAF rules for your origin.

    • Check CSP, CORS, and TLS/H2/HTTP3 settings that can confuse embedded browsers.

     

    This “redirect hop” is a pragmatic patch you can deploy fast; long-term, align your CDN/WAF to support in-app browsers properly.

     

    Copy-paste checklist

     

    • Create neutral index.html with instant redirect (JS + meta refresh).

    • Host it on a non-problematic origin (no WAF/CDN hurdles).

    • Point Android/iOS WebViews to that URL.

    • Add a query param (e.g., src=webview-hop) for debugging/analytics.

    • Verify no redirect loops; confirm HTTPS everywhere.

    • Monitor errors and analytics; iterate as needed.

     

     

    Bonus: server-side redirect variant

     

    If your neutral host lets you set server rules, a simple 302 is ideal. For example, on Apache:

    # .htaccess
Redirect 302 / https://your-cdn-site.com/?src=server-hop

    Or on Netlify (_redirects file):

    /  https://your-cdn-site.com/:splat  302!

     

    Got stuck or still seeing a white screen? Write to our support, we are happy to help!

    in WebViewGold for Android, WebViewGold for iOS

    Related Articles