Web Security 02 — Referrer

4 min readApr 21, 2020

1. Intro

The Referrer request header contains the address of the previous web page from which a link to the currently requested page was followed. The Referrer header allows servers to identify where people are visiting them from and may use that data for analytics, logging, or optimized caching, for example. ( Reference MDN Definition, Blog ).

When we talking about referer security, there are 2 aspects.

Referer Check — How do we check referer to ensure visitors are from the same origin in order to enhance security
Referer Hide ( by Referer Policy )— How do we protect our clients from leaking previous page link

2. Security — Check Referrer

If we don’t check Referrer, API can be called from anywhere, which may cause security problems (usually related to CSRF attack).

2.1. Sample

We will demo with the Website in the prepare session, then mock another website, which contains a malicious link to attract user to click. This malicious link is to transfer points to other user(usually the attacker’s account).

This is our simple static file backend server:

This is the frontend HTML page:

Let’s start the our blog system and hack system. (Blog Site on 8888, and Malicious page on 8889)

npm i
npm start
npm run-script startHack

This is what the malicious page looks like:

When a customer incidentally click the link, the authentication will fail.

This is because we haven’t login yet. But what if we’ve opened our Blog Site and already login? Now, we jump to the malicious website, and click the link, the successful message {"message":"success!"} will be shown on the page. and user01 will transfer his points to user02, unconsciously.

2.2 How to fix

As we can see, this is totally something we are not expecting: how can a user from another site, calls API in our site? A simple way to fix this problem is to use Referrer to disable visits from other sites: APIs should be only called from the same site. Calls from other sites should be rejected.

Now, let’s add Referrer check function (in indexSafe.js):

Then we start a safe server:

npm run-script startSafe
npm run-script startHack

Whether the user is login or not, requests from the malicious site will not be permitted.

3. Security — Referer Hide ( by Referer Policy )

While Referrer check is very important, some users don’t want to expose their Referrer at all. Assume that we had just visited a video site for a break, then we visit a shopping site like Amazon. Amazon collects the video site information, and will put their ads on the video site, which could be annoying.

To prevent this happens, we can use Referrer Policy.

There are many types of Referrer policy :

“no-referrer”
“no-referrer-when-downgrade”
“same-origin”
“origin”
“strict-origin”
“origin-when-cross-origin”
“strict-origin-when-cross-origin”
“unsafe-url”

So many definitions, but mainly we can use same-origin .

3.1 Sample

Let’s make a little change to our code. Add a link in html page staticFile/index.html :

<br>
<a href='http://localhost:8889'>Go To 8889</a>

And start our websites:

npm run-script startSafe
npm run-script startHack

When we click the link, our browser will load 8889’s index.html with referrer 8888:

3.2 How to fix

Let’s add some referrer policy:

const helmet = require('helmet')
...
app.use(helmet.referrerPolicy({ policy: 'same-origin' }));

Now, let’s start our websites and check again:

npm run-script startSafe
npm run-script startHack

There will be no referrer at all.

Where is the code:

brianshen1990/WebSecurity

Contribute to brianshen1990/WebSecurity development by creating an account on GitHub.

github.com

What is this place? Taipei 101, Taipei, Taiwan