X-Frame-Options的作用

X-Frame-Options HTTP 响应头（Response Header）是用来给浏览器指示允许一个页面可否在 <frame>、<iframe>、<embed> 或者 <object> 中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌套到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击。

X-Frame-Options的值

X-Frame-Options有三种可能值：

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM https://example.com/

1、DENY
表示该页面不允许在frame中展示，即便是在相同域名的页面中嵌套也不允许。

2、SAMEORIGIN
表示该页面可以在相同域名页面的frame中展示。

3、ALLOW-FROM uri
表示该页面可以在指定来源的frame中展示。

如果设置为DENY，不光在别人的网站frame嵌入时会无法加载，在同域名页面中同样会无法加载。如果设置为SAMEORIGIN，那么页面就可以在同域名页面的frame中嵌套。正常情况下我们通常使用SAMEORIGIN参数。

iframe嵌套超出允许范围时现象

如果iframe超出了X-Frame-Options的范围，iframe的页面将无法显示，并将报以下错误。

不同情况下的配置

使用Apache

将以下配置加入site配置中。

Header always append X-Frame-Options SAMEORIGIN

使用nginx

将以下配置加入http、server或location中，加其中一处即可。
一般添加允许同域嵌套。

add_header X-Frame-Options SAMEORIGIN;

允许单个域名iframe嵌套

add_header X-Frame-Options ALLOW-FROM http://ddpzp.com/;

允许多个域名iframe嵌套

add_header X-Frame-Options "ALLOW-FROM http://ddpzp.com/,https://baidu.com/";

使用IIS

添加到Web.config配置文件。

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

使用HAProxy

添加到 front-end, listen, or backend配置中。

rspadd X-Frame-Options:\ SAMEORIGIN

使用tomcat

添加到conf/web.xml中。

<filter>
        <filter-name>httpHeaderSecurity</filter-name>
        <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
        <init-param>
            <param-name>antiClickJackingOption</param-name>
            <param-value>SAMEORIGIN</param-value>
        </init-param>
        <async-supported>true</async-supported>
    </filter>
<filter-mapping>
        <filter-name>httpHeaderSecurity</filter-name>
        <url-pattern>/*</url-pattern>
    <dispatcher>REQUEST</dispatcher>
    <dispatcher>FORWARD</dispatcher>
</filter-mapping>

使用java过滤器

@WebFilter(urlPatterns = "/*", filterName = "frameFilter")
public class FrameFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {}

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        // 允许嵌套子iframe
        response.setHeader("x-frame-options", "SAMEORIGIN");
        filterChain.doFilter(request, response);
    }

    @Override
    public void destroy() {}
}

查看效果

1.浏览器按F12打开控制台，选择Network。
2.操作网站，发起请求。
3.在Network中选择一个请求，查看Response Header，其中X-Frame-Options即为设置的响应头。