防止自己的網頁放被在別人iframe嵌套

前言：

網頁被他人嵌套，可能會引發一些問題：

大量的403/404 訪問問題，

可能會被木馬網站劫持，

地址無法與內容對應。

避免了點擊劫持 (clickjacking) 的攻擊

 

解決辦法大概有以下幾種：

1、在head中設置meta屬性

2、使用JS代碼控制

3、服務器中設置攔截

 

一、在head中設置meta屬性：

<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">

或者更詳細：

<meta http-equiv="X-Frame-Options" content="SAMEORIGIN / DENY "> 

指定具體網站：
<meta http-equiv="X-Frame-Options" content="ALLOW-FROM http://xxx.xxx.com">

X-Frame-Options 響應頭：

X-Frame-Options 有三個值:

DENY：表示該頁面不允許在 frame 中展示，即便是在相同域名的頁面中嵌套也不允許。

SAMEORIGIN：表示該頁面可以在相同域名頁面的 frame 中展示。

ALLOW-FROM uri表示該頁面可以在指定來源的 frame 中展示。

換一句話說，如果設置為  DENY，不光在別人的網站 frame 嵌入時會無法加載，在同域名頁面中同樣會無法加載。另一方面，如果設置為  SAMEORIGIN，那么頁面就可以在同域名頁面的 frame 中嵌套。

DENY：不能被嵌入到任何iframe或frame中。
SAMEORIGIN：頁面只能被同源的頁面嵌入到iframe或者frame中。
ALLOW-FROM http://xxx.xxx.com：只能被嵌入到指定域名的框架中。

 

 

二、使用JS代碼控制

if (top.location != self.location){
    alert("本頁面被其他網站嵌套");
    // 具體操作....
    top.location=self.location
}

或者：

(function(window,document){
     if(top != window){
          top.location = location.href;
     }
     document.uniqueID != document.uniqueID && !!location.hash && (location.hash = location.hash); 
     window.focus();
})(this,document);

注意：

   console.log(window.self === window.top);

   判斷頁面是否被嵌套在iframe里 ：
       如果返回false –> 說明頁面被嵌套在iframe中了 
       如果返回true –> 說明頁面並沒有被嵌套在iframe中 

前端檢測 top 窗口是否就是 self ：

try{
　　top.location.hostname;
　　if (top.location.hostname != window.location.hostname) {
　　　　top.location.href =window.location.href;
　　}
}

catch(e){
　　top.location.href = window.location.href;
}

 

 

 

 

三、服務器中設置攔截

配置 Apache

配置 Apache 在所有頁面上發送 X-Frame-Options 響應頭，需要把下面這行添加到 'site' 的配置中:

Header always append X-Frame-Options SAMEORIGIN

配置 nginx

配置 nginx 發送 X-Frame-Options 響應頭，把下面這行添加到 'http', 'server' 或者 'location' 的配置中:

add_header X-Frame-Options SAMEORIGIN;

配置 IIS

配置 IIS 發送 X-Frame-Options 響應頭，添加下面的配置到 Web.config 文件中:

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

后端代碼方式：

package filter;
 
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class FrameTao implements Filter {
 
 
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
    //必須
        HttpServletRequest request = (HttpServletRequest) req;  
        HttpServletResponse response = (HttpServletResponse) res;  
        //實際設置
    response.setHeader("x-frame-options", "SAMEORIGIN");  
    //調用下一個過濾器（這是過濾器工作原理，不用動）
    chain.doFilter(request, response);
    }  
 
    public void init(FilterConfig config) throws ServletException {
    }
    
    public void destroy() {
    }
    
}

在web.xml文件下添加以下內容：

    <!-- 設置Frame頭，防止被嵌套 -->
<filter>  
    <filter-name>FrameFilter</filter-name>  
    <filter-class>filter.FrameTao</filter-class>  
</filter>  
<filter-mapping>  
    <filter-name>FrameFilter</filter-name>  
    <url-pattern>/*</url-pattern>
</filter-mapping>  

 

后端代碼參考：https://blog.csdn.net/chanlingmai5374/article/details/78674815#

 

 

以上就是防止網站網頁被他人嵌套的部分解決方案.......end tanks.