<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
This Pen doesn't use any external CSS resources.