Context
Recently, I installed Ghost on my Docker architecture and I had to override a default security HTTP header that I had implemented for all services on Traefik, because a part of the application was not working as expected. 😱
Refused to display 'https://www.mamaisonsherby.ca/' in a frame because it set 'X-Frame-Options' to 'deny'.
For those unfamiliar with theX-Frame-Options HTTP response header, it is primarily used to indicate whether a browser can display a specific page in an iframe. So in my case, if someone tries to embed one of my sites into another site, the browser will fail to load my website.
Unfortunately for me, Ghost is currently using iframes to display the site in the backend, so we can see what the posts will look like when they're published. So I had 3 choices:
- I could lose this functionality (and keep the error page displayed);
- I could globally remove the X-Frame-Options or set it to
SAMEORIGIN
to allow frames on the same origin; - I could try to override this header for my Ghost websites.
Naturally, as I try to have as much security as possible for my sites, I choose the third option. 😄
After some tries, I was finally able to get it working in just two easy steps. 🎉
Step 1 – Define a new middleware
In our case, the customFrameOptionsValue option allows us to override the frameDeny option that we used in the default Traefik configuration (via default@file below).
The
customFrameOptionsValue
allows theX-Frame-Options
header value to be set with a custom value. This overrides theFrameDeny
option.
So we just need to define a new middleware that sets this option to SAMEORIGIN
:
If you need to use this middleware on multiple docker-compose.yml files, I'm pretty sure that you can set it directly in the Traefik configuration file. But this exercice is left to the reader. 😉
Step 2 – Add the middleware to the router
Once the middleware is defined, we need to apply it on a router. Since .middlewares
is a list, its order is really important. In this case, they are applied in the same order as their declaration in the router, so from left to right.
In our case, since it is not the same option that is used, the order doesn't really matter. I'm assuming that the customFrameOptionsValue
is still applied after the frameDeny
option.
Resume
So one way to override an HTTP header in Traefik is to simply:
- Define a new middleware that defines your new HTTP headers.
- Add the middleware to your router after the other middlewares.
Very easy when you know it, right? 😅
Top comments (0)