<h1>Get the user's IP using just JavaScript (and <a href="https://www.cloudflare.com/cdn-cgi/trace">a CloudFlare API</a>)</h1>
<p>
	So, you want to get the user's IP address? Here's one way to do it. You are dependent upon a Cloudflare service but it's better than nothing?
</p>

<div id="app">
	<p>IP Address: {{ip}}</p>
	<p>User Agent: {{useragent}}</p>
	<p>Timestamp: {{tsFormatted}}</p>
	<p>The full response from Cloudflare: {{response}}</p>
</div>

<p><a href="https://volkanyilmaz.com.tr/">Volkan</a></p>
new Vue({
	el: "#app",
	data() {
		return {
			response: null,
			ip: null,
			useragent: null,
			ts: null
		};
	},
	watch: {
		response: function () {
			this.ip = this.response.substring(
				this.response.search("ip=") + 3,
				this.response.search("ts=")
			);
			this.ts = this.response.substring(
				this.response.search("ts=") + 3,
				this.response.search("visit_scheme=")
			);
			this.useragent = this.response.substring(
				this.response.search("uag=") + 4,
				this.response.search("colo=")
			);
		}
	},
	computed: {
		tsFormatted() {
			return new Date(this.ts * 1000);
		}
	},
	mounted() {
		axios
			.get("https://www.cloudflare.com/cdn-cgi/trace")
			.then((response) => (this.response = response.data));
	}
});

External CSS

  1. https://codepen.io/wolkanca/pen/wvgOPWb

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js
  3. https://codepen.io/wolkanca/pen/wvgOPWb