Javascript, отслеживать iframes перенаправляя верхнее окно

Question

Так как нет способа предотвратить перенаправление iframe верхнего фрейма, кроме песочницы, которая препятствует другим функциям, необходимым для отслеживания видимости, я бы хотел отслеживать перенаправления. Поскольку на одном сайте может быть несколько фреймов, это может быть любой из них.

Есть ли способ отследить / выяснить, какой (конкретный iframe) вызвал перенаправление верхнего кадра?

Вот песочница (используйте консоль браузера и включите сохранение журнала):

Примечание содержимое iframe обычно является междоменным. Для удобства использования его внутри sandox.

Answer 1

Можете ли вы установить cookie из отдельных фреймов при перенаправлении? Скажем, это произошло из iframe1, вы можете установить cookie как

document.trackFrame = "FrameName=iframe1";  

И после того, как перенаправление завершится, вы можете попробовать прочитать файл cookie и там определить, какой iframe вызвал перенаправление?

Answer 2

Вы можете отобразить диалоговое окно перед перенаправлением в другой домен / приложение, после чего пользователь может решить - остаться или покинуть текущее приложение.Вы также можете отслеживать текущую цель (например, iframe в вашем случае).

window.onbeforeunload = function (e) {
  console.log(e.currentTarget.location.href);
  return 'Stop redirection. Show dialog box.';
};

Answer 3

Мы можем получить доступ к содержимому iframe с помощью чего-то вроде iframe.contentWindow.document, но это возможно, если мы наблюдаем Политика того же происхождения .

Другим подходом может быть установка заголовка Content-Security-Policy, например:

<meta http-equiv="Content-Security-Policy" content="frame-src http://example.com">

Этот заголовок на родительской странице не позволяет загружать сайты, отличные от http://example.com в кадрах. Также есть способ сообщить поведение отказа при отправке сообщения, но, к сожалению, настройка невозможна с тегом <meta> (это только на стороне сервера). При таком подходе мы должны составить белый список, поэтому я думаю, что в этом случае он может оказаться бесполезным. Но, если белый список дается впервые, можно настроить все доступные сайты, поэтому при перенаправлении iframe браузер откажется загружать его.

Если дело не в том же происхождении и возможности составления белого списка, то я думаю, что лучше всего мы можем вызвать событие iframe onunload, к сожалению, это событие будет срабатывает также при перезагрузке страницы iframe не только при перенаправлении. Я думаю, что это самый близкий подход. Чтобы добиться этого, этот код работает.

var srcs = ["iframe2.html","iframe.html","iframe2.html"];


        for (let i = 0; i < srcs.length; i++) {
            var iframe = document.createElement('iframe'); 
                iframe.src = srcs[i]; 
                iframe.name = "i"+i; 
                document.body.appendChild(iframe);
                window["i"+i].onunload = function(){console.log("change "+i)}
        }

Конечно, onunload запускается в первый раз, когда загружаются все фреймы, поэтому перенаправления 2-го, 3-го и т. Д. Но мы можем исключить этот первый случай.

Вот полный пример https://codesandbox.io/s/o16yk7mqy, я создал iframe3.html, который не обновляет и не перезагружает, чтобы ясно показать точку. Также я создал простой список переадресации или перезагрузки iframes.

UPDATE Как я теперь понимаю, вам нужно установить iframes со свойством sandbox и белым списком всего, что вы хотите, но без allow-top-navigation, что-то вроде:

<iframe src="iframe.html" sandbox="allow-script allow-forms allow-popups allow-pointer-lock allow-same-origin"></iframe>

• Этот пример не позволяет allow-top-navigation https://codesandbox.io/s/lpmv6wr6y9
• Этот пример здесь https://codesandbox.io/s/4x8v1mojq7 разрешает allow-top-navigation, но codesandbox предотвращает перенаправление фрейма, поэтому если мы попробуем https://4x8v1mojq7.codesandbox.io/, то есть URL, созданный codesandbox , мы могли видеть перезагрузку верхней рамы.

Как я уже говорил в комментариях, по крайней мере в Chrome 64.0.3282.167, когда мы делегируем все, кроме allow-top-navigation, когда iframe пытается перенаправить верхний кадр, он выдает исключение. Поведение отличается в Firefox (по крайней мере, 58.0.2). Firefox запрещает верхнюю навигацию, но продолжает код.

Итак, в заключение я считаю, что наилучшим подходом является либо комбинация sanbox и onunload, либо просто onunload. Конечно, если это возможно, Content-Security-Policy - самый безопасный и гибкий способ. Это зависит от реализации. Я думаю, что практически невозможно задействовать код на стороне сервера для выполнения идеального решения. Есть белый список для проверки, как этот API https://developers.google.com/safe-browsing/v4/, и есть черный список для проверки, посмотрите этот пост https://security.stackexchange.com/questions/32058/looking-for-url-blacklists-of-malicious-websites.

Answer 4

Если у вас есть контроль над всеми вашими кадрами, вы можете реализовать взаимодействие между кадрами с помощью postMessage .Поток:

1. Кадр хочет выполнить перенаправление - он отправляет сообщение в родительский кадр с запросом на перенаправление.
2. Родительский кадр выполняет перенаправление и знает, какой кадр вызвал перенаправление.

Родитель:

window.addEventListener("message", (event) => {
    // show message source (your frame)
    console.log(event.source);

    const message = event.data;
    console.log(`Frame ID: ${message.frameId}`);

    if(message.messageType === "redirect") {
        window.location.href = message.redirectUrl;
    }
});

Дочерняя рамка:

function redirect(url) {
    var message = {
        messageType: "redirect",
        frameId: "frame1"
        redirectUrl: url
    }
    window.parent.postMessage(message, "*");
}