DEV Community

Cover image for How to detect if a website is running on a webview?
Aneesh
Aneesh

Posted on

How to detect if a website is running on a webview?

Step 1 - Customise the userAgent string of the webview. Below is an example from React-Native

<WebView
  userAgent={"web-view-user-agent-123"}   
  ref={"WEBVIEW"} 
  automaticallyAdjustContentInsets={false}
  source={{ uri: this.state.url }}
/>
Enter fullscreen mode Exit fullscreen mode

In this example, we're setting the UserAgent to "web-view-user-agent-123". This is the UserAgent that will be sent with HTTP requests made by the WebView.

Step 2 - read this userAgent string in the client side code of the website.

We can read the userAgent string in the client side code of the website by

if (window.navigator.userAgent === "web-view-user-agent-123") {
  console.log("the website is embedded in a webview");
} else {
  console.log("the website is not in a webview");
}
Enter fullscreen mode Exit fullscreen mode

Conclusion:

This simple yet powerful technique can be used in various scenarios, such as tracking user activity, implementing custom logic, or providing a personalized experience to users within your WebView.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay