CyberSecurityNews.com published a gif on X showing Top 8 Cyber Attacks 2024 last spring that shows the top 8 cybersecurity threats for 2024. This chart has popped up in many places. I like the way it's paired with Beethoven's Moonlight Sonata here:
I've worked on product releases where we just scoured the front end to try to eliminate any HTML that might lead to a security issue
If you look closely at the list 3 out 8 of these attacks rely on front end software, that is, a vulnerability in the browser. Fullstack application developers can use this awareness to help prevent these problems. The list of attacks is shown below. Attacks 1, 5, and 6 are attacks that occur in the browser.
- Phishing
- Ransomware
- Denial of Service (DoS)
- Man-in-the-middle (MiTM)
- SQL Injection
- Cross Site Scripting (XSS)
- Zero-Day Exploits
- DNS Spoofing
Both Phishing and Cross Site Scripting rely on links that a user clicks on to carry out the attack. In the case of Phishing the link is in often in an email.
In this post, I'm going to focus on Phishing. Both Phishing and Cross Site Scripting are forms of Social Engineering that rely on the user's trust and possibly lack of knowledge. I'm going to focus on Phishing in this post because it is one of the most prevalent types of attack.
Companies are aware of the losses that result from cyber crimes, and instruct employees in what to look for to prevent attacks that involve links. However, the nature and attributes of the HTML anchor element that is used to create links might make it difficult for users to spot a problem with the link.
I've worked on product releases where the goal is rework any HTML that could create a vulnerability. But in the end, if you tell a user to 'hover over each link on the email and make sure that the underlying URL looks OK', you're asking a lot.
Let's look at the anchor tag attribute variations that might make it difficult for a user to just hover over the link to determine if the link is OK.
1. Expected Anchor Element.
The HTML anchor tag was created to make navigation between web
pages easier. The structure of a basic anchor element does
this includes a URL assigned to an href attribute and text
content that describes where the URL will navigate to.
```html
<a href="https://www.example.com" target="_blank">Example</a>
```
The design of the anchor element strongly suggests that the
user shouldn't have to know what the URL is. If the URL is to
be known, it could be copied in the text content. If all the
URLs were spelled out, it would make for an unattractive and
probably messy looking web page. This variation is the most
commonly used. If the user hovers over `Example` they will see
`https://www.example.com`.
2. Using onclick
in an Anchor Element.
We can introduce more complex instructions into the anchor tag
by adding an onclick
event handler and JavaScript. Here are
three examples of what we can do when we want to run some
JavaScript when the link is clicked. In all cases, hovering
over the link won't show you the onclick
event.
**a. `onclick` returns false.**
When you the JavaScript in the onclick handler returns false,
the navigation to the URL in href is not executed. But if
there is a problem from the JavaScript itself, it's too late
once you've clicked on a link in which hovering over it showed
a URL that was OK
```html
<a href="https://www.example.com" target="_blank"
>Say Hello</a>
```
**b. `onclick` doesn't return false.**
If the `onclick` handler JavaScript code doesn't return false,
then the link will navigate as intended. Hovering over the
link will return an OK URL and the code will navigate to the
URL. In this case, all will seem well, but if the JavaScript
contained a problem, it's too late to fix it.
```html
<a href="https://www.example.com"
target="_blank">onClick me</a>
```
**c. anchor tag doesn't contain an href attribute.**
If the `href` is not included in the anchor tag element will
render without text decoration, but will still be clickable if
an `onclick` is included. For users that are used to clickable
items showing some sign of click-ability like `text-decoration`
or a CSS that style to clickable text to look like a button,
there may be some confusion here. A user instructed to hover
over links would likely ignore clicking on this entirely.
```html
<a target="_blank">onclick me</a>
```
3. No encryption in URL.
If the URL references a site that doesn't use encryption, like
`http://www.example.com` vs. `https://www.example.com`, this
could a raise a question. These days browser will often
encrypt the web page even if the scheme is `http`. There are
extensions and settings to make browsers automatically encrypt,
but if the user hovers, and finds that HTTP instead of HTTPS is
used, this could be the sign of a problem.
```html
<a href="http://info.cern.ch/" target="_blank"
;
return true;>info.cern.ch is unencrypted</a>
```
4. href
refers to a URI with a javascript:
pseudo scheme.
Although it's most common to see a scheme in a URI like
`https:`, other schemes are in use. For example `mailto:` and
`tel:` are used to send message via email and SMS. These
schemes are followed by email addresses and telephone numbers.
These are refereed to as URI's instead of URL's. The scheme is
provided an **identifier** instead of a **location**. Both
`mailto:` and `tel:` are visible when hovering on a link.
It's also possible to use `javascript:` as a scheme. It is
then followed by a call to a function in the context of the
HTML. In the example below it is calling the function
`doSomething`. This will be visible upon hovering, but because
the contents of the JavaScript code is not known, it may raise
a question.
```html
<a href="javascript:doSomething()">Javascript me</a>
```
I hope the examples above show how difficult it could be for a user to determine if a link in their email should be clicked on or reported as a possible threat. What's the solution?
Create a Browser Extension
What is needed is a full analysis and report on what is going on within the links on a webpage. There needs to be a way to quickly generate some information that shows the links without hovering and provides alerts as to which links may have some unexpected attribute settings. We need a Phish Bait analyzer report. It would be nice if browsers had this feature, but until they do we can create a Chrome extension to do it.
I created an extension named Link Reveal and published it in the Chrome Web Store. I'm not the only one that thought of this. If you search the Store for terms like "link" or "phish", you'll find many extensions that relate to the anchor tag. If you're interested, you can also look at the code. There are a couple of test pages you can use:
Page with a lot of different anchor tags.
Page with no anchor tags.
Other Solutions that Preventing Phishing
The Chrome extension is useful for getting a better look at the attributes of rendered anchor elements. In some cases, once an email web page is opened, the malware has already been installed. There are tools to investigate emails before they are opened. Any links containing suspicious URLs or URI can be removed before the user can access them. This blog summarizes some of those tools and how they work.
Learn More About Cybersecurity
The chart below shows that phishing is on the rise.
Cybersecurity awareness is important for developers. I joined ICS2 and learned a lot.
See this guide for creating and publishing the browser extension described in this post.
Top comments (0)