Làm cách nào để xác định xem một trang web đang được tải bên trong iframe hay trực tiếp vào cửa sổ trình duyệt?

Tôi đang viết một iframe dựa trên ứng dụng facebook. Bây giờ tôi muốn sử dụng cùng một trang html để hiển thị trang web bình thường cũng như trang canvas trong facebook. Tôi muốn biết liệu tôi có thể xác định xem trang đã được tải bên trong iframe hay trực tiếp trong trình duyệt không?

Trình duyệt có thể chặn quyền truy cập window.topdo chính sách xuất xứ tương tự . Lỗi IE cũng diễn ra. Đây là mã làm việc:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

topvà selflà cả hai windowđối tượng (cùng với parent), vì vậy bạn sẽ thấy nếu cửa sổ của bạn là cửa sổ trên cùng.

Khi trong iframe có cùng nguồn gốc với cha, window.frameElementphương thức trả về phần tử (ví dụ iframehoặc object) trong đó cửa sổ được nhúng. Mặt khác, nếu duyệt trong ngữ cảnh cấp cao nhất hoặc nếu khung cha và khung con có nguồn gốc khác nhau, nó sẽ đánh giá null.

window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

Đây là một Tiêu chuẩn HTML với sự hỗ trợ cơ bản trong tất cả các trình duyệt hiện đại.

RoBorg là chính xác, nhưng tôi muốn thêm một ghi chú bên.

Trong IE7 / IE8 khi Microsoft thêm Tab vào trình duyệt của họ, họ đã phá vỡ một điều sẽ gây ra sự tàn phá với JS của bạn nếu bạn không cẩn thận.

Hãy tưởng tượng bố cục trang này:

MainPage.html
  IframedPage1.html   (named "foo")
  IframedPage2.html   (named "bar")
    IframedPage3.html (named "baz")

Bây giờ trong khung "baz", bạn nhấp vào một liên kết (không có mục tiêu, tải trong khung "baz") nó hoạt động tốt.

Nếu trang được tải, hãy gọi nó là Special.html, sử dụng JS để kiểm tra xem "nó" có khung cha có tên là "bar" hay không, nó sẽ trả về đúng (dự kiến).

Bây giờ hãy nói rằng trang Special.html khi tải, kiểm tra khung chính (để biết sự tồn tại và tên của nó và nếu là "thanh", nó sẽ tự tải lại trong khung thanh. Ví dụ:

if(window.parent && window.parent.name == 'bar'){
  window.parent.location = self.location;
}

Càng xa càng tốt. Bây giờ đến lỗi.

Hãy nói thay vì nhấp vào liên kết ban đầu như bình thường và tải trang Special.html trong khung "baz", bạn nhấp vào giữa hoặc chọn mở trong Tab mới.

Khi tab mới đó tải (hoàn toàn không có khung chính! ) IE sẽ nhập một vòng vô tận tải trang! bởi vì IE "sao chép" cấu trúc khung trong JavaScript sao cho tab mới DOES có cha mẹ và cha mẹ đó có tên "thanh".

Tin tốt là kiểm tra:

if(self == top){
  //this returns true!
}

trong tab mới đó trả về true và do đó bạn có thể kiểm tra điều kiện kỳ ​​lạ này.

Câu trả lời được chấp nhận không hoạt động đối với tôi bên trong tập lệnh nội dung của Tiện ích mở rộng Firefox 6.0 (Addon-SDK 1.0): Firefox thực thi tập lệnh nội dung trong mỗi: cửa sổ cấp cao nhất và trong tất cả các iframe.

Bên trong tập lệnh nội dung tôi nhận được các kết quả sau:

 (window !== window.top) : false 
 (window.self !== window.top) : true

Điều kỳ lạ về đầu ra này là nó luôn giống nhau bất kể mã được chạy bên trong iframe hay cửa sổ cấp cao nhất.

Mặt khác, Google Chrome dường như chỉ thực thi tập lệnh nội dung của tôi một lần trong cửa sổ cấp cao nhất, do đó, phần trên không hoạt động.

Điều cuối cùng đã làm cho tôi trong một kịch bản nội dung trong cả hai trình duyệt là:

 console.log(window.frames.length + ':' + parent.frames.length);

Không có iframe này in 0:0, trong một cửa sổ cấp cao nhất chứa một khung mà nó in 1:1và trong iframe duy nhất của tài liệu mà nó in 0:1.

Điều này cho phép tiện ích mở rộng của tôi xác định trong cả hai trình duyệt nếu có bất kỳ iframe nào và ngoài ra trong Firefox nếu nó được chạy bên trong một trong các iframe.

Tôi không chắc ví dụ này hoạt động như thế nào đối với các trình duyệt Web cũ hơn nhưng tôi sử dụng nó cho IE, Firefox và Chrome mà không gặp sự cố:

var iFrameDetection = (window === window.parent) ? false : true;

Tôi đang sử dụng cái này:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

Sử dụng chức năng javascript này làm ví dụ về cách thực hiện việc này.

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

Kịch bản phá vỡ khung trình duyệt kế thừa tốt nhất hiện nay

Các giải pháp khác đã không làm việc cho tôi. Cái này hoạt động trên tất cả các trình duyệt:

Một cách để bảo vệ chống lại clickjacking là đưa tập lệnh "bộ ngắt khung" vào mỗi trang không nên đóng khung. Phương pháp sau đây sẽ ngăn trang web không bị đóng khung ngay cả trong các trình duyệt cũ, không hỗ trợ X-Frame-Options-Header.

Trong phần tử HEAD của tài liệu, thêm phần sau:

<style id="antiClickjack">body{display:none !important;}</style>

Đầu tiên áp dụng ID cho chính thành phần kiểu:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

Theo cách này, mọi thứ đều có thể nằm trong tài liệu CHÍNH và bạn chỉ cần một phương thức / taglib trong API của mình.

Tham khảo: https://www.codemagi.com/blog/post/194

if ( window.location !== window.parent.location ) 
{
      // The page is in an iframe   
} 
else 
{     
      // The page is not in an iframe   
}

Vì bạn đang hỏi trong ngữ cảnh của một ứng dụng facebook, bạn có thể muốn xem xét việc phát hiện điều này tại máy chủ khi yêu cầu ban đầu được thực hiện. Facebook sẽ chuyển một loạt dữ liệu chuỗi truy vấn bao gồm khóa fb_sig_user nếu nó được gọi từ iframe.

Vì có thể bạn cần kiểm tra và sử dụng dữ liệu này trong ứng dụng của mình, hãy sử dụng nó để xác định bối cảnh phù hợp để kết xuất.

Tôi thực sự đã sử dụng để kiểm tra window.parent và nó hoạt động với tôi, nhưng gần đây cửa sổ là một đối tượng tuần hoàn và luôn có khóa cha, iframe hoặc không có iframe.

Như các ý kiến ​​đề nghị khó so sánh với window.parent công trình. Không chắc chắn nếu điều này sẽ hoạt động nếu iframe chính xác là cùng một trang web với cha mẹ.

window === window.parent;

Đó là một đoạn mã cổ mà tôi đã sử dụng một vài lần:

if (parent.location.href == self.location.href) {
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

Nếu bạn muốn biết liệu người dùng có truy cập ứng dụng của bạn từ tab trang facebook hay kiểm tra canvas cho Yêu cầu đã ký hay không. Nếu bạn không hiểu, có lẽ người dùng không truy cập từ facebook. Để đảm bảo xác nhận cấu trúc trường và nội dung trường đã ký.

Với php-sdk, bạn có thể nhận được Yêu cầu đã ký như thế này:

$signed_request = $facebook->getSignedRequest();

Bạn có thể đọc thêm về Yêu cầu đã ký tại đây:

https://developers.facebook.com/docs/reference/php/facebook-getSignRequest/

và đây:

https://developers.facebook.com/docs/reference/login/sign-request/

Điều này đã kết thúc là giải pháp đơn giản nhất cho tôi.

    <p id="demofsdfsdfs"></p>

<script>

if(window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>

if (window.frames.length != parent.frames.length) { page loaded in iframe }

Nhưng chỉ khi số lượng iframe khác nhau trong trang của bạn và trang đang tải bạn trong iframe. Không có iframe trong trang của bạn để đảm bảo 100% kết quả của mã này

Viết javascript này trong mỗi trang

if (self == top)
  { window.location = "Home.aspx"; }

Sau đó, nó sẽ tự động chuyển hướng đến trang chủ.