Preventing users from embedding your site
Published 2 years and 6 months ago, Categorized under: Security

Today, I wake up to find out that someone was using my website as the source of an iframe tag used on another website. Thanks to Jeff Madsen for pointing out to the issue.

Which surprised me, since the issue only visible to those who are living in NYC, and since I don't live there, I couldn't reproduce the issue, but I figured out a way to prevent other people from using my site within an iframe tag.

To prevent such issue you should use X-Frame-Options, Quoting MDN Web Docs :

The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe>, <embed> or <object> . Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

This header should be implemented at the server level, so using it as meta tag won't be helpful:

Setting the meta tag is useless! For instance, <meta http-equiv="X-Frame-Options" content="deny"> has no effect. Do not use it! Only by setting through the HTTP header like the examples below, X-Frame-Options will work.

  1. Configuring Apache.
  2. Configuring nginx.
  3. Configuring IIS.
  4. Configuring HAProxy.

Also, you are advised to look at the browser compatibility chart to know which value you need to choose.

Since Netlify hosts my website, we can update the header of the server by adding the following section to the netlify.toml file:

  for = "*"
    X-Frame-Options = "SAMEORIGIN"
    X-XSS-Protection = "1; mode=block"

I hope that by using such a technique, you will be able to have a peaceful time knowing that your site won't be used in any malicious activity.

Share It via: