Search code examples
angularjsnode.jsexpresshelmet.js

nosniff causing img src not to work


I have an Angular 1.5 client, published off of a Node 4,Express 4 server. I do 99% of my manual testing in IE Edge. (The rest is in Mocha, Karma, and before delivery, I hit Firefox.)

We recently added this line to our http server, using helmet:

//Prevent Mime type sniffing/infering
app.use(helmet.noSniff());

PROBLEM: The nosniff option broke all of my thumbnails.

In one of my other Angular modules, which is a controller and view component, I have this line:

...
<img ng-src="/api/thumbnail/{{title}}"/>
...

On my Node/Express server, my /api/thumbnail/:title/ route looks like this:

router.get('/api/thumbnail/:title/',function(req,res){
    ... get file to read from 'title'

    fs.readFile(fileName,function(err,data){
       if ( err ) { ... do error handling ... }
       else { resp.send(data); }
    });
})

Solution

  • Using IE's Network debugger, I noticed that the requests being sent to the server have 'application/octet stream' as the 'Content-Type'. Maybe because I am sending back an 'image/jpeg', so, I asked myself if that's what is causing the nosniff to kill the response?

    In my server code, I have a "DEFAULT_THUMBNAIL" which I send back in the event that 'title' produced no viable thumbnail image for me. So, before I do a resp.send(data), I did this:

    const mime = require('mime');
    ...
    resp.setHeader('Content-type',mime.lookup(DEFAULT_THUMBNAIL));
    

    And that seemed to fix the nosniff issue.