X-headers, what and why?
Jordan Finneran

Jordan Finneran @jordanfinners

About: Tech Lead, Physics Grad, Video/Photographer, Tech Fan, All Round Tweeter!

Joined:
Apr 23, 2019

X-headers, what and why?

Publish Date: May 27 '21
104 13

Contents

  1. Intro
  2. X-Content-Type-Options
  3. X-XSS-Protection
  4. X-Frame-Options
  5. Summary

Intro

Continuing on from my previous blog about website security week, we're going to talk about a series of X- security headers.

These are set as headers on your site when it is served up, let's dive in!

X-Content-Type-Options

This header indicates that the browser should not try and sniff the type of the file served up. Sniffing of the file type would mean the browser modifying the Content-Type header that is returned from the server.

Sniffing the file content type could lead to non executable files being made executable, this could lead to bad actors injecting executable code into normal files and could lead to vulnerabilities.
Background on content sniffing.

It's best not to let the browser sniff the code.

Recommended setting:

X-Content-Type-Options: nosniff
Enter fullscreen mode Exit fullscreen mode

You can read about it more on Modzilla.

X-XSS-Protection

This header has mostly been superseeded by the Content Security Policy, however its still useful for old browsers.
This header can be set so browsers detect XSS (Cross Site Scripting) and block loading of resources once a Cross Site Scripting attack has been detected.

Recommended setting:

X-XSS-Protection: 1; mode=block
Enter fullscreen mode Exit fullscreen mode

You can read about it more on Modzilla.

X-Frame-Options

This header has mostly been superseeded by the Content Security Policy, however its still useful for old browsers.

This indicates if the site can be loaded in a <frame>, <iframe>, <embed> or <object>.
Use this header to ensure you site and content cannot be embedded in someone elses site, this is commonly referred to click jacking attack.

Recommended setting:

X-Frame-Options: DENY
Enter fullscreen mode Exit fullscreen mode

You can read about it more on Modzilla.

Summary

In summary, setting a few additional headers when serving up your site can really improve the security of your site. It reduces the amount of attack surface there is for attackers and prevent common attacks on websites.

Set those headers now!

Happy Building!

Comments 13 total

  • alex ➡️ web dev journey 👩🏽‍💻🔍
    alex ➡️ web dev journey 👩🏽‍💻🔍May 28, 2021

    This may be a silly question, but I am a beginner, beginner to web development and want to start good web security practices now. How exactly do I go about changing these policies for the header? Or can you point me in the right direction?

    • Bruno Bernard
      Bruno BernardMay 29, 2021

      Hi there, actually those headers are added by the W3C its a standard for the web. Go see the github of W3C ;)

      • alex ➡️ web dev journey 👩🏽‍💻🔍
        alex ➡️ web dev journey 👩🏽‍💻🔍May 29, 2021

        I couldn't find the 'header' related content on W3C's github (may have missed it ) unfortunately, but I took a short class on what a header is and looked at Mozilla's documentation for headers. Thank you!

        • Bruno Bernard
          Bruno BernardMay 29, 2021

          yes, it's a bit complicated to find them because W3C guys are very technical, there is a lot to read. Fortunately Mozilla as you said they simplified them as a gist.
          I share this like for others to see: developer.mozilla.org/en-US/docs/W...

          But for being aware of changes and knowing those policies as you mentioned above, W3C has the detailed view of how and the reasons why certain things exist and what policies are applied or drafted.

          Here is a view of how a specification from W3C is laid out, (brace yourself): w3.org/TR/CSP2/

    • Jordan Finneran
      Jordan FinneranMay 31, 2021

      Hey Alex, you can set the headers yourself, depending on how you are serving up your website depends how you do this.
      If you are using express js you can use a library like npmjs.com/package/helmet to help set them.
      If you are using nextjs you can do something like nextjs.org/docs/api-reference/next...
      If you are serving up a file from blob storage (e.g. S3 in AWS or Blob Storage in Azure) you often set these headers by using a CDN infront of the files like so docs.microsoft.com/en-us/azure/cdn...

      • alex ➡️ web dev journey 👩🏽‍💻🔍
        alex ➡️ web dev journey 👩🏽‍💻🔍May 31, 2021

        Thank you for helping! I haven't gotten that far yet in my journey since I only know HTML and CSS right now; I use Github for my web pages. I'll keep the resources bookmarked, thanks again!

        • Jordan Finneran
          Jordan FinneranMay 31, 2021

          Yes its not possible to do it with Github Pages at the moment 😊

  • David Wickes
    David WickesMay 29, 2021

    Nice article - as this is tagged up for beginners, maybe you could give a brief description of what you mean by "content sniffing"? Maybe with a link to a longer article?

    Also, you might want to explain what the X is for in the header... and maybe even what a header is in the first place!

  • John Frades
    John FradesMay 31, 2021

    if you're using Express, this can help npmjs.com/package/helmet

  • Moussa Fofana
    Moussa FofanaDec 6, 2024

    hoelo

Add comment