Detecting WebView2 vs standalone Edge browser?

Question

I have a page that needs to render differently depending on whether it's being viewed from a WebView2 component (inside another application) or from a standalone Microsoft Edge browser. I tried distinguishing the two via the user agent string, but the strings are more or less identical (both contain "Edg"). Does anyone have a method to distinguish between a WebView2 and an Edge browser?

Answer 1

There's no perfect way for web content to identify that is running within a WebView2 because the host app of the WebView2 can customize so many aspects of the WebView2.

For example, the host app can change the user agent via CoreWebView2Settings.UserAgent to appear to be Chrome or any other browser. Or the host app can inject script using CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync and change the DOM or other objects in script.

However, if you are trying to determine if your web content is running within your own app, you can use those same customizations I mention above as a way for the host app to signal to the web content that the web content is running within a WebView2.

Answer 2

I stumbled upon this question a bit late, apparently, but there's a very specific way to detect WebView2 because the engine injects several members into the window object, including iFrames. For example, the method window.gc is something that won't normally exist, but let's see what happens in a WebView2 engine:

if ("gc" in window) alert("WebView2");

If you don't want to check the main window. you can do it from an emtpy iFrame, which will return true as well.