loading...

cmpct.io - Why is it safer?

tommcclean profile image Thomas William McClean Updated on ・4 min read

Background

Ever since mid December 2019, I have spent a lot of my free time working on my latest project (https://cmpct.io), I wrote an article about that it at the time, why not catch up? https://cmpct.io/OGhfcj-R

I talked a lot about why my link shortener (cmpct.io) is safer than its competition. The primary reason was that a user is not automatically sent to the destination URL when given a short URL, but instead they see a landing page like the picture below so they can see the destination and choose to visit or not.

Alt Text

Since then I have been working hard to add even more reasons for why cmpct.io is the safest choice of all (and to even further differentiate). Read on to learn about two amazing new features (or watch the video), and how I implemented them...

A great demo video can be found here: http://www.youtube.com/watch?v=KY3ufDTRpY4

Taking safety to the next level

Great, you are already safer because you actually have the choice to visit a link knowing where it will go, that works perfectly when it is obvious that a link is unsafe but it is only a first step; a URL can only tell you so much.

Additionally irregardless of safety, how do you even know that visiting the website is worth your time or in line with your interests.

Now you can learn more about a link without visiting it, we show you the page title - so instead of seeing a link like https://www.bbc.co.uk/sport/live/football/51284877 and not knowing what the article is, now you also see Oxford v Newcastle, plus four other FA Cup fourth-round replays - Live - BBC Sport

Another great example is shown below, you can't tell whether the page is interesting to you or not from the URL alone, but the page title may be more enticing.

Alt Text

Instead of being left to fend for yourself and guess what a website is about, now we do our best to give you more information up front.

Our second new feature is even better, we capture a screenshot of the page for you on our own servers, so you can see a picture of the web page that was shared with you. (Simply click the picture icon on any link)

Alt Text

When somebody shares a link with you to cmpct.io, you see (1) where the link will go, (2) what the page title is and (3) you get a screenshot of the page so you can see what it looks like without having to even visit it!

Useful when you are sent a URL you don't recognise, but a step above any other link shortener when sent an unsafe link, because you can see the scam before it hits you.

So how did we achieve this?

cmpct.io is a Nuxt/VueJS single page application; it communicates with a .NETCore WEB API to get information from the database and to add new links. However scraping a website, and capturing a screenshot is an intensive process.

You wouldn't want to do this on the client side, that could endanger the user. You also wouldn't want to do this in the API as it could block threads for 30 seconds at a time, lowering performance and scalability.

So we now have an Azure Functions app, every time you create a new link on cmpct.io, our API stores the basic information, and then the Azure function is triggered. The Azure function requests the page HTML to grab the page title, and captures a screenshot, it then updates the route in the database.

That means when you generate a link, it doesn't have anything more than a link, but then you share the URL with a friend, and in the 10 seconds it takes for them to visit it, we have already populated the page with all this information.

Using Azure Functions is dirt cheap, doesn't affect the scalability of our Website and API and as the information is "nice to have" rather than imperative, should anything go awry the website continues to function at its best!

To get page titles, I am simply performing a GET request on the page from my function and then searching the HTML for the title tag.

To get the screenshot I am using Grabzit - https://grabz.it, having tested many solutions; this was the most convenient and fastest.

What do you think?

This feature is very new, so we are keen to get feedback and learn how we can add more cool features to make your web browsing more productive, and most importantly; safer!

Check out an example link: https://cmpct.io/py8_HZBV or generate your own!

Posted on by:

tommcclean profile

Thomas William McClean

@tommcclean

Software Developer Extraordinaire and Technology Enthusiast from Bristol, United Kingdom

Discussion

pic
Editor guide