How to stop image hotlinking on nodejs? - node.js

Question

How do I prevent people from hotlinking images on an app using nodejs and express? I'm hosting on my own server. Is this something I would need to build into the app.js file? Thanks.

Answer 1

You need to write middleware to only accept certain valid referers from your website. Be sure to accept modern search engines, social media sites, and no referers too.

Answer 2

If you are using nginx with node, here is a solution.
Basically, it checks for referrer and returns 403 if not authorized.
You could also write a middleware for express using the same logic.

Answer 3

Create a middleware to check Referer in HTTP request header, with domains of popular search engines, media, and websites.
Add this in your app.js file. Assuming you are using express 4.x.
app.use('/', (req , res , next) => {
const referrer = req.get('Referrer');
if (referrer == null) {
next(); // referrer is an optional http header, it may not exist
}
if (["https://www.facebook.com", "https://www.google.com"].includes(referrer)) { // compare referrer with your whitelist
res.status(403).send("You are not allowed to view this photo!"); // block the request
}
next();
});
app.get('/',(req,res)=>{
res.sendFile(`PATH_OF_YOUR_IMAGE`);
});
Find out more about Referer HTTP header
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer

Answer 4

The issue using referrer is that most hotlinks do not use this header and browsers do not send it either with the image in an tag or src="" property... if your website is using cookies and cookies are accepted by the users of your website you could verify the presence of the cookie in the request by adding the following server.get() funcion before the static folder generic case (assuming you use an express server):
server.get(['/assets/img/**','/assets/images/**'], (req, res, next) => {
if(req.url == '/assets/images/logo*.*') {
next();
}
console.log('requested image' + req.url);
let maxage;
if (!isBot(req)) {
let cookieLang = req.cookies['my_cookie'];
if (!cookieLang) {
console.log('no cookie ');
res.status(403);
maxage = 5; // 5 seconds, in order not to damage your website visibility if viewer ends up visiting your site
res.setHeader('Cache-Control', 'public, max-age='+maxage);
res.setHeader('Expires', new Date(Date.now() + maxage * 1000).toUTCString());
res.sendFile(join(distFolder + '/assets/images/logo.png'));
} else {
console.log('withcookie ' + cookieLang);
res.set({'Cache-Control': 'max-age=31536000'});
res.sendFile(join(distFolder + req.url));
}
} else {
res.set({'Cache-Control': 'max-age=31536000'});
res.sendFile(join(distFolder + req.url));
}
});
server.get('*.*', express.static(distFolder, {
maxAge: '1y'
}));
in my case in order to help me benefit from hotlinks I return the logo of our company instead of the requested image :o) but you could return just nothing.
Also in this example there is a isBot() funcion where I check the user agent in order to let WhatsApp, Twitter and other bots get the required image for company visibility when adding a link in a post in those social networks.
Any idea of improvement welcomed !