From 14f3d2dc644938c7fd2a9b2472591c33044b70cd Mon Sep 17 00:00:00 2001 From: wbamberg Date: Wed, 18 Sep 2024 10:53:00 -0700 Subject: [PATCH] Update X-Frame-Options deprecation stuff --- .../web/http/headers/x-frame-options/index.md | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/http/headers/x-frame-options/index.md b/files/en-us/web/http/headers/x-frame-options/index.md index b2cee5953cde413..fc9dfcbb23ec9a1 100644 --- a/files/en-us/web/http/headers/x-frame-options/index.md +++ b/files/en-us/web/http/headers/x-frame-options/index.md @@ -7,13 +7,13 @@ browser-compat: http.headers.X-Frame-Options {{HTTPSidebar}} +> [!WARNING] +> Instead of this header, use the {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} directive in a {{HTTPHeader("Content-Security-Policy")}} header. + The **`X-Frame-Options`** [HTTP](/en-US/docs/Web/HTTP) response header can be used to indicate whether a browser should be allowed to render a page in a {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} or {{HTMLElement("object")}}. Sites can use this to avoid [click-jacking](/en-US/docs/Web/Security/Types_of_attacks#click-jacking) attacks, by ensuring that their content is not embedded into other sites. The added security is provided only if the user accessing the document is using a browser that supports `X-Frame-Options`. -> [!WARNING] -> The {{HTTPHeader("Content-Security-Policy")}} HTTP header has a {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} directive which [obsoletes](https://w3c.github.io/webappsec-csp/#frame-ancestors-and-frame-options) this header for supporting browsers. - @@ -50,7 +50,7 @@ If you specify `DENY`, not only will the browser attempt to load the page in a f ## Examples > [!WARNING] -> Setting `X-Frame-Options` inside the {{HTMLElement("meta")}} element (e.g., ``) has no effect and should not be used! `X-Frame-Options` is only enforced via HTTP headers, as shown in the examples below. +> Setting `X-Frame-Options` inside the {{HTMLElement("meta")}} element (e.g., ``) has no effect. `X-Frame-Options` is only enforced via HTTP headers, as shown in the examples below. ### Configuring Apache @@ -114,12 +114,7 @@ http-response set-header X-Frame-Options SAMEORIGIN ### Configuring Express -You can use [Helmet](https://helmetjs.github.io/) to configure an Express app to [set the **legacy** X-Frame-Options](https://helmetjs.github.io/#x-frame-options) header on old browsers. - -> [!WARNING] -> It's recommended to use the {{HTTPHeader("Content-Security-Policy")}} HTTP header with the {{HTTPHeader("Content-Security-Policy/frame-ancestors", "frame-ancestors")}} directive instead. - -To use Helmet to set `X-Frame-Options`, add the following to your server configuration to set the `SAMEORIGIN` directive: +To set `X-Frame-Options` to `SAMEORIGIN` using [Helmet](https://helmetjs.github.io/) add the following to your server configuration: ```js const helmet = require("helmet");