2014-02-04 1 views
9

У меня есть песочница IFRAME, который не позволяет изменять местоположение:html5 javascript- Как поймать попытку инициировать навигацию из песочницы iframe?

<iframe sandbox="allow-forms allow-popups allow-pointer-lock allow-same-origin allow-scripts" class="iframe visible" src="thesource.html" width="100%" scrolling="auto" frameborder="0"></iframe> 

Если IFrame пытается UNFRAME сам или изменить местоположение Я вижу пустую страницу, так как браузер прекращает работу в IFrame в. Это бревно из Chrome:

небезопасный JavaScript попытка начать навигацию для кадра с URL «http://example.com» от кадра с URL «http://otherdomaian.com». Рамка, пытающаяся навигация в окне верхнего уровня, изолирована песочницей, но флаг «allow-top-navigation» не установлен.

Это замечательно, но я хочу поймать это, так что если это произойдет, я перейду к следующему iframe. Итак, как я поймаю эту попытку?

EDIT:

Я добавил jsfiddle code (проверьте ошибку в журнале консоли)

Я также пытался слушать событие без успеха:

document.addEventListener('error', receiveMessage, true); 
function receiveMessage(error) { 
    alert("iframe tried to unframe itself"); 
} 
+0

Включает ли это случай, когда кто-то нажимает на ссылку, и у нее установлен целевой параметр '_parent' или' _top'? – Gohn67

ответ

1

Пример:

An с дополнительными ограничениями:

<iframe src="demo_iframe_sandbox.htm" sandbox=""></iframe> 

атрибут песочницы поддерживается в Internet Explorer 10, Firefox, Chrome и Safari.

Примечание: Атрибут песочницы не поддерживается в Internet Explorer 9 и более ранних версиях или в Opera.

Определение и использование

Если указан как пустая строка (песочница = «»), атрибут песочница позволяет набор дополнительных ограничений для содержания в инлайн кадре.

Значение атрибута песочницы может быть пустой строкой (все применяются ограничения) или список предварительно определенных значений , которые удаляют определенные ограничения.

Различия между HTML 4.01 и HTML5

Атрибут песочница является новым в HTML5.

Синтаксис

<iframe sandbox="value"> 

Значения атрибутов

  1. "" => Применяет все ограничения ниже
  2. позволяют-же-происхождения => Позволяет содержание IFrame следует рассматривать как из то же происхождение, что и содержащий документ
  3. allow-top-navigation => Позволяет содержимому iframe перемещаться (загружать) con Палатка из содержащего документа
  4. позволяет-форма => Позволяет форму представлению
  5. позволяют скрипты => Разрешает выполнение скрипта

JavaScript: это своего рода странного протокола URI. Он работает в некоторых контекстах, например, но не во всех - например, расположение окна не может быть установлено на такой URI. (Хотя вы можете назначить javascript: URI для window.location как действительно обходной способ запуска скрипта, расположение окна не остается установленным для этого значения.)

Чтобы написать контент в IFRAME, получите ссылку к документу фрейма и написать ему. Для этого потребуется, чтобы вы установили флаг песочницы allow-same-origin.

<iframe id="myframe" sandbox="allow-scripts allow-same-origin" src="about:blank"></iframe> 

<script> 
    var frame = document.getElementById("myframe"); 
    var fdoc = frame.contentDocument; 

    fdoc.write("Hello world"); // or whatever 
</script> 

Живой пример:http://jsfiddle.net/wUvrF/1/

10

Я новичок здесь, так что у меня нет достаточной репутации прокомментировать ответы, и я прошу прощения, если я делаю это неправильно, но принятое решение, к сожалению, не сможет выполнить то, что вы ищете.

Я смог продемонстрировать, что я имею в виду, если сценарий из JSFiddle выше запускается после того, как DOM готов (предупреждение не будет, но все равно ошибка в консоли). Вот немного более подробно о том, что происходит в настоящее время с этой скрипкой:

// running with the No wrap - in <head> option 
var frame = document.querySelector('iframe'); // null, the iframe isn't there yet 
try { 
    frame.src="http://wedesignthemes.com/themes/redirect.php?theme=wedding"; 
} catch(e) { 
    // TypeError here, no hints about the iframe :(
    alert('Error!'); 
} 

Исключение, перехваченные не имеет ничего общего с IFRAME, это на самом деле ошибка типа от попыток установить src собственности на null стоимость.

То, что вы действительно хотите сделать, это поймать ошибку внутри из фрейма (когда песочнице скрипт пытается получить доступ к window.top), но это не представляется возможным из-за Same-origin policy. Btw, установка флага песочницы "allow-same-origin" имеет значение только в том случае, если содержимое iframe подается от того же origin, что и документ верхнего уровня. Например. как только src или location iframe будет изменен на другой origin, there's no way to touch anything inside.

Есть способы общения через iframe границ, например, с window.postMessage или старым и дилетантским способом использования IFrame-х location.hash, но я предполагаю, что вы не можете влиять на исходном код страницы происходит в вашу IFRAME. (Хороший разработчик, конечно, был бы открыт для предложений и видел, что такая функция может быть полезна.)

Единственный способ, которым я был в состоянии поймать эту ошибку, не нарушая никаких правил безопасности браузера был установлен флаг в allow-top-navigation песочницы, а затем использовать window.onbeforeunload обработчик в документе верхнего уровня, чтобы поймать навигационную попытку от ребенка iframe. Я бы никогда не рекомендовал это, потому что пользовательский опыт ужасный. Невозможно предотвратить навигацию, не запрашивая пользователя о том, хотите ли они покинуть страницу или нет. Доказательство концепции ниже:

<iframe id="myframe" sandbox="allow-scripts allow-top-navigation"></iframe> 
<script> 
    var url = "http://wedesignthemes.com/themes/redirect.php?theme=wedding", 
     frame = document.getElementById("myframe"), 
     listener; 
    listener = window.addEventListener("beforeunload", function(e) { 
     e.preventDefault(); 
     e.stopImmediatePropagation(); 
     // The iframe tried to bust out! 
     window.removeEventListener("beforeunload", listener); 
     return "This is unavoidable, you cannot shortcut a " + 
      "navigation attempt without prompting the user"; 
    }); 
    frame.src = url; 
</script> 

Так, к сожалению, я не могу найти способ сделать это красиво в текущих реализациях браузера без помощи вашего 3-разработчика контента партии. Я прочитал некоторые интересные вещи в спецификации HTML5, которые могли бы позволить нам делать такие вещи в будущем (и, к сожалению, у меня не хватает числа ссылок, которые я могу здесь вставить), поэтому я буду следить за ходом событий.

+1

Очень приятная запись. Это должен быть принятый ответ. –

+0

Я обновил свой ответ большими красными флагами, чтобы люди не использовали его. Спасибо, что поймали это и указали! –

+0

Нет проблем, спасибо за обновление Tyler! –

Смежные вопросы