Tuesday, March 22, 2022

Content Sniffing in Web Development

While I was testing a software, I needed to refresh JavaScript files based on branch on GitHub. What I did is to include the raw data of the file using raw.gethubcontent.com.

What I noticed is that the console started to display the error which reads :

The resource from “https://raw.githubusercontent.com/usernane/AJAXRequestJs/master/AJAXRequest.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

What does this error means and why it appeared? After doing a small research, I learned about new concept which is called "Content Sniffing"

In a nutshell, content sniffing happens when a web browser change the content type of server response to a content type that it think is correct. For example, a server might send a JavaScript file with content type "text/plain". In this case, the browser will change content type to "text/JavaScript" because the file smells like JavaScript and make it executable. This can lead to security issues if the file is user generated and can lead to attacks such as .

To make sure that the browser does not change content type based on its smell, the server can send http header. The header has the name "". The error that was appearing in the console was caused by this header. GitHub server always sends this header whenever someone tries to get files using raw.githubcontent.com.

To resolve my issue, I reverted back to jsDeliver. The CDN actually has a nice feature that I just got to know. It is possible to get files using commit hash. Instead of using a branch name or tag after the @, simply add the hash of the commit.