Explore HTTP-X-Frame-Options with me

X-Frame-Options

X-Frame-OptionsThe HTTP response header is a tag used to indicate to the browser whether a page is allowed to be displayed in the browser. Sites can avoid clickjacking attacks by ensuring that the site is not embedded in someone else's site.

This additional security is only provided if the user accessing the document is using a X-Frame-Optionssupported browser.

Note: Content-Security-Policy The HTTP response header has a frame-ancestorsdirective , and browsers that support this directive have deprecated X-Frame-Optionsthe response header.

grammar

X-Frame-OptionsThere are two possible values:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

guide

If it is set to DENY, not only will it fail to load when the frame of other people's websites is embedded, but it will also fail to load in pages with the same domain name. On the other hand, if set to SAMEORIGIN, then the page can be nested in the frame of the page of the same domain name.

• DENY

  Indicates that the page is not allowed to be displayed in a frame, even if it is nested in a page of the same domain name.

• SAMEORIGIN

  Indicates that the page can be displayed in the frame of the same domain name page. The spec leaves browser vendors to decide whether this option applies to the top level, parent, or the entire chain, some people think this option is not very useful unless all ancestor pages belong to the same origin (origin). See Browser Compatibility for detailed compatibility information.

• ALLOW-FROM urideprecated

  This is a deprecated directive and no longer works in modern browsers, please do not use it. When supporting older browsers, the page can be displayed in the frame of the specified source. Note that on older versions of Firefox, it suffers from SAMEORIGINthe same problem as - it doesn't check all ancestor pages of frame to see if they are from the same origin. Content-Security-Policy HTTPThere is a frame-ancestorsdirective , you can use this directive instead.

example

Note:X-Frame-Options It is invalid to use meta tags to set ! e.g. <meta http-equiv="X-Frame-Options" content="deny">has no effect. Don't use it like this! X-Frame-OptionsOnly works if HTTP headers are set like the example below .

Configure Apache

配置 Apache 在所有页面上发送 X-Frame-Options 响应头，需要把下面这行添加到 'site' 的配置中：

Header always set X-Frame-Options "SAMEORIGIN"

要将 Apache 的配置 X-Frame-Options 设置成 DENY，按如下配置去设置你的站点：

Header set X-Frame-Options "DENY"

配置 Nginx

配置 Nginx 发送 X-Frame-Options 响应头，把下面这行添加到 'http', 'server' 或者 'location' 的配置中：

add_header X-Frame-Options SAMEORIGIN always;

配置 IIS

配置 IIS 发送 X-Frame-Options 响应头，添加下面的配置到 Web.config 文件中：

<system.webServer>
  ...

  <httpProtocol>
    <customHeaders>
      <add name="X-Frame-Options" value="SAMEORIGIN" />
    </customHeaders>
  </httpProtocol>

  ...
</system.webServer>

配置 HAProxy

配置 HAProxy 发送 X-Frame-Options 响应头，添加这些到你的前端、监听（listen），或者后端的配置里面：

rspadd X-Frame-Options:\ SAMEORIGIN

或者，在较新的版本中：

http-response set-header X-Frame-Options SAMEORIGIN

配置 Express

要配置 Express 以发送 X-Frame-Options 响应头，你可以使用借助了frameguard的 helmet来设置首部。在你的服务器配置里面添加：

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: 'SAMEORIGIN' }));

或者，你也可以直接用 frameguard：

const frameguard = require('frameguard')
app.use(frameguard({ action: 'SAMEORIGIN' }))