Posted on Apr 25, 2021

Finding mission people with 31 lines of JavaScript

#tracking #coordinates #qrcode #javascript

Here's a very simple project that IMHO can help finding missing people, whether is someone with limited cognitive capabilities or even a "normal" person who happens to pass out in an unknown location, e.g. The requirements is that the target person carries a QR code (a forearm tattoo is suggested).

Disclaimer

Despite its good cause, this project can illustrate how dangerous and malicious a JavaScript code can be, as this one will send and email with the users' coordinates to an unknown person without their knowledge.

There is the purposed flow:

Person "A" goes missing
Person "B" finds person "A"
"B" scans the QR code using a phone
A web page is loaded, and 2 things happen:
"B" sees some basic info for person "A"
In the background, an email is sent to person "C" (who is responsible for person "A"), containing person "B" 's coordinates (provided that they have location settings on).

Tips:

Host web pages for free: https://pages.github.com/
Use a url-shortener to get a simpler QR code
Use DuckDuckGo's search engine to get a QR code. Just type qr and the desired URL

Here's what the page could look like:

Here you will get the library to send emails and info on how to get a free SMTP server: https://smtpjs.com/

JS:

script.js

 function sendEmail(body) { Email.send({ Host: "smtp.elasticemail.com", Username: "<mail>", Password: "<password>", To: '<email>', From: "<email>", Subject: "John Doe has been found!", Body: body }); } function sendEmailWithCoordinates(pos) { let lat = pos.coords.latitude; let lng = pos.coords.longitude; let url = `https://www.google.com/maps/dir//${lat},${lng}/@${lat},${lng},21z/data=!4m2!4m1!3e2`; sendEmail(url); } function sendEmailWithoutCoordinates() { sendEmail("Could not get the device's coordinates..."); } function startLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(sendEmailWithCoordinates, sendEmailWithoutCoordinates); } } window.addEventListener("load", startLocation);

By using this same API (navigator.geolocation), you can set the location for a "watch" mode, and keep sending multiple emails with the updated coordinates, instead of sending it only once. For more info regarding Geolocation API: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API

HTML

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HELP ME. I AM LOST</title> <link rel="stylesheet" href="style.css"> <script defer src="https://smtpjs.com/v3/smtp.js"></script> <script defer src="script.js"></script> </head> <body> <div id="main"> <img src="photo.jpg" alt="JOHN DOE'S PHOTO"> <h1>JOHN DOE</h1> <h2>PLEASE, CALL MY RELATIVE:</h2> <a href="tel:+351999999999"> <h1>(+351) 999 999 999</h1> </a> <h3>MY ADDRESS:</h3> <address>10,MAIN STREET</address> <a href="https://www.google.com/maps/dir//41.2766,-8.3762/@41.2766,-8.3762,21z/data=!4m2!4m1!3e2"> <button>MAP TO MY HOUSE</button> </a> </body> </html>

CSS

style.css

body, html { margin: 0px; height: 100%; } #main { justify-items: center; align-items: center; text-align: center; background-color: lightcyan; padding: 5%; } img { width: 60%; border: solid 3px; border-radius: 3px; } button { padding: 5%; margin: 5%; background-color: blue; color: white; }