javascript - extension - messenger platform




是否有客戶端方式來檢測X-Frame-Options? (6)

免責聲明:我在2012年寫的這個答案(Chrome當時的版本是20版)已經過時了,我會將它保留在這裡僅用於歷史目的。 閱讀和使用需要您自擔風險。

好的,這是一個有點老問題,但這是我發現的(這不是一個完整的答案)Chrome / Chromium。

檢測指向外部地址的幀是否已加載的方法只是嘗試訪問其contentWindow或文檔。

這是我使用的代碼:

element.innerHTML = '<iframe class="innerPopupIframe" width="100%" height="100%" src="'+href+'"></iframe>';
myframe = $(element).find('iframe');

然後,後來:

try {
    var letstrythis = myframe.contentWindow;
} catch(ex) {
    alert('the frame has surely started loading');
}

事實是,如果X-Frame-Options禁止訪問,那麼myFrame.contentWindow將是可訪問的。

這裡的問題就是我所謂的“當時,後來”。 我還沒有想出要依賴什麼,哪個事件可以用來查找何時是進行測試的好時機。

有沒有什麼好方法可以檢測由於X-Frame-Options標題頁面何時不會顯示在頁面中? 我知道我可以請求頁面服務器端並查找標題,但我很好奇瀏覽器是否有任何捕獲此錯誤的機制。


在線測試工具可能很有用。 我使用https://www.hurl.it/ 。 你可以清楚地看到響應頭。 尋找X-frame-option。 如果值為拒絕 - 它將不會顯示在iframe中。 同一來源 - 僅來自同一域,允許 - 允許來自特定網站。

如果你想嘗試其他工具,你可以簡單地谷歌搜索'http request test online'。


我唯一能想到的是為url代理AJAX請求,然後查看標題,如果它沒有X-Frame-Options,則在iframe中顯示它。 遠非理想,但總比沒有好。


至少在Chrome中,您可以注意到加載失敗,因為iframe.onload事件未觸發。 您可以將其用作指示頁面可能不允許iframing。


這就是我根據我的要求檢查X-Frames-Options的方法。 在加載JSP頁面時,您可以使用AJAX向特定URL發送異步請求,如下所示:

var request = new XMLHttpRequest();
request.open('GET', <insert_URL_here>, false);
request.send(null);

完成此操作後,您可以按如下方式閱讀收到的響應標頭:

var headers = request.getAllResponseHeaders();

然後,您可以對此進行迭代,以找出X-Frames-Options的值。 獲得該值後,您可以在適當的邏輯中使用它。


這是基於的答案,但是稍微不那麼苛刻。

它檢查iframe.contentWindow.length > 0是否表明iframe已成功加載。

此外,它會檢查iframe onload事件是否在5秒內觸發並發出警報。 這捕獲了混合內容的加載失敗(儘管是hacky方式)。

var iframeLoaded = false;
var iframe = document.createElement('iframe');

// ***** SWAP THE `iframe.src` VALUE BELOW FOR DIFFERENT RESULTS ***** //
// iframe.src = "https://davidsimpson.me"; // This will work
iframe.src = "https://google.com"; // This won't work

iframe.id = 'theFrame';
iframe.style.cssText = 'position:fixed; top:40px; left:10px; bottom:10px;'
 + 'right:10px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;';

var iframeOnloadEvent = function () {
    iframeLoaded = true;
  var consoleDiv = document.getElementById('console');
    if (iframe.contentWindow.length > 0) {
    consoleDiv.innerHTML = '✔ Content window loaded: ' + iframe.src;
    consoleDiv.style.cssText = 'color: green;'
    } else {
    consoleDiv.innerHTML = '✘ Content window failed to load: ' + iframe.src;
    consoleDiv.style.cssText = 'color: red;'
    }
} 

if (iframe.attachEvent){
    iframe.attachEvent('onload', iframeOnloadEvent);
} else {
    iframe.onload = iframeOnloadEvent;
}
document.body.appendChild(iframe);

// iframe.onload event doesn't trigger in firefox if loading mixed content (http iframe in https parent) and it is blocked.
setTimeout(function () {
    if (iframeLoaded === false) {
        console.error('%c✘ iframe failed to load within 5s', 'font-size: 2em;');
    consoleDiv.innerHTML = '✘ iframe failed to load within 5s: ' + iframe.src;
    consoleDiv.style.cssText = 'color: red;'    
  }
}, 5000);

現場演示 - https://jsfiddle.net/dvdsmpsn/7qusz4q3/ - 所以你可以在相關的瀏覽器中測試它。

在撰寫本文時,它適用於Chrome,Safari,Opera,Firefox,Vivaldi和Internet Explorer 11上的當前版本。我沒有在其他瀏覽器中測試它。





x-frame-options