DEV Community

Cover image for Exploring the Web: Chapter One
Naufan Rusyda Faikar
Naufan Rusyda Faikar

Posted on • Edited on

Exploring the Web: Chapter One

Below is just a normal hyperlink:

<a href="https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493">
    Read Naru's First Blog Post
</a>
Enter fullscreen mode Exit fullscreen mode

As we all knew, it contains:

Nothing special.

#1

The code will appear as we would expected as end-users:

Read Naru's First Blog Post

In most cases, it is the only way to properly provide hyperlinks. So, people will not be confused by this sort of thing:

https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493

Most people would not realise where the hyperlink is actually pointing. We would expect that it will lead us to the first blog post of mine published on DEV, as the content usually indicates the destination page.

What if we change it to:

<a href="https://dev.to/naruaika/i-was-betrayed-by-computer-science-students-244j">
    Read Naru's First Blog Post
</a>
Enter fullscreen mode Exit fullscreen mode

It will still looks the same:

Read Naru's First Blog Post

Right?

The browser has abstracted everything for us but the content. Thus no one will notice it. Even an IT guy will not always inspect the link's destination. All we do is assume that the hyperlink is trustworthy.

Some of today's email applications will alert us when clicking on a link that it is written as:

<a href="https://dev.to/naruaika/i-was-betrayed-by-computer-science-students-244j">
    https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493
</a>
Enter fullscreen mode Exit fullscreen mode

But what do they know about this?

<a href="https://dev.to/naruaika/i-was-betrayed-by-computer-science-students-244j">
    Read Naru's First Blog Post
</a>
Enter fullscreen mode Exit fullscreen mode

As developers, should we consider this?

Read Naru's First Blog Post:
<a href="https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493">
    https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493
</a>
Enter fullscreen mode Exit fullscreen mode

Or even this?

Read Naru's first blog post at https://dev.to/naruaika/switching-to-windows-subsystem-for-linux-2493
Enter fullscreen mode Exit fullscreen mode

On the other hand, we as users do not click on any hyperlinks without inspecting, as we may end up accessing the wrong page.

If it is a login page to Facebook, but it is actually facebok.com and not facebook.com, that would be a big problem. That is why Facebook bought—I am not sure, please do not try to access it—facebok.com to prevent people from logging into fake login page that would inevitably expose their credentials to crime.

If it is an unsubscribe hyperlink from an unknown mail, which we might assume we have subscribed to the newsletter but do not remember that we have not actually done, is it really safe to click on it? Despite having no login form there.

#2

We all knew that we can help people to send an email by providing:

<a href="mailto:idmuslimdev@gmail.com">
    Send email to Naru
</a>
Enter fullscreen mode Exit fullscreen mode

It will look as usual:

Send email to Naru

Or this:

<a href="mailto:idmuslimdev@gmail.com?subject=Friend Request&body=Let's be friend!">
    Send email to Naru
</a>
Enter fullscreen mode Exit fullscreen mode

Surprisingly, there was a time when some email clients do support:

<a href="mailto:idmuslimdev@gmail.com?subject=Friend Request&body=Let's be friend!&attach=~\.ssh\id_rsa">
    Send me an email
</a>
Enter fullscreen mode Exit fullscreen mode

What on earth will it do with our SSH private keys!

#3

An anchor can also be used for navigation,

<a href="#35">go to the next section</a>
Enter fullscreen mode Exit fullscreen mode

e.g. go to the next section.

#3.5

Or even better:

<a href="javascript:history.back()">
    Go to the previous page
</a>
Enter fullscreen mode Exit fullscreen mode

But what if:

<a href="javascript:alert('You have been hacked! Contact us at blablabla to save your computer.');">
    Go to the comment section
</a>
Enter fullscreen mode Exit fullscreen mode

See? As for clueless people, it is enough to bully them. Disabling JavaScript barely solves the problem.

#4

Suppose someone was looking for a job. He had just found a good-looking website listing several job vacancies. Arguing that the job details would not fit on just one page, he was forced to download a PDF document.

<a href="blablabla/job-details.pdf" download>
    Download the job details
</a>
Enter fullscreen mode Exit fullscreen mode

The document is opened and the details were there. Nothing suspicious; he had no idea that he had been compromised as soon as he opened it. As we knew that PDFs, JPEGs, and any type of file can be infected by a virus.

#5

I googled the Samsung 980 SSD. Hopefully, it would be the best bet to replace my old turtle HDD. Then all of a sudden, the product had appeared everywhere in plenty of applications and web pages as advertisements.

In the early hours of my research, I was not particularly hooked on just one product or two. Instead, I was looking for a product that gives me the best value. But I happened to be interested in the 980 SSD.

There is no way Google knew right away, when I started typing "best budget ssd", that the 980 SSD will be an option. Well, there was Google Trends for sure, but Google has probably known me for a long time that I am not a typical who wants to be part of a trend.

So, I think that there were some specific reasons and I assume they have done it by the number of clicks. Let us replicate the incident.

I am using Mozilla Firefox on my notebook, but let us grab Google Chrome this time. Inspecting on the first hyperlink listed on the search result page, we will read:

<a
    href="https://www.pcmag.com/picks/the-best-cheap-ssds"
    data-ved="2ahUKEwiZ7eqB17L1AhVUUGwGHWxOCv8QFnoECAgQAQ"
    ping="/url?sa=t&amp;source=web&amp;rct=j&amp;url=https://www.pcmag.com/picks/the-best-cheap-ssds&amp;ved=2ahUKEwj7uYfkx7H1AhUSjeYKHRW4ALAQFnoECAIQAQ">
    ...
</a>
Enter fullscreen mode Exit fullscreen mode

What could we guess from the ping attribute here? It would send a sort of PING to https://www.google.com/url. More accurately, according to the MDN Web Docs, it will sent a POST request with a body containing only literally "PING" as text.

If we look closely to the string query parameters, we might think ourselves reading some interesting data. But I have checked on Google Chrome and Microsoft Edge, logged in to my Google account or not, using incognito or not, using my brother laptop or mine, using the home Wi-Fi or mobile network, they are exactly the same. So, I could say not a thing.

But if we dive into the request details, we will find out that it also sent a bunch of information in the header including my cookies. I assume the header contains my identity in any form. Among them, there are cookies named 1P_JAR, DV, and NID. Wait ... NID!? What is it exactly? I believe ID from NID refers to identity. So, it could be a national ID, namespace ID, or the like.

We may have a plan to do open link in a new tab instead, have not we? But I have seen that the pings were still being sent. Maybe, the best way to avoid this is by doing copy link address, open a new tab, and then paste it by hand.

Meanwhile, it is a little different on Firefox, as Firefox does not support the ping attribute by default, although we can enable it via about:config. I believe, Google uses the Beacon API to achieve the same goal. But I have heard that they would put this sort

https://www.google.com/url?sa=t&source=web&rct=j&url=https://www.pcmag.com/picks/the-best-cheap-ssds&ved=2ahUKEwj7uYfkx7H1AhUSjeYKHRW4ALAQFnoECAIQAQ

as a value for the href attribute. It is supposed to redirect to the actual page once it is done logging us.

Discussion

We have seen how a single click on hyperlinks can drive people to insecurity. As tech lovers, how do we save people?

References

Top comments (0)