SecurityError: заблокирован кадр с исходным кодом от доступа к кадру с поперечным началом

Я загружаю <iframe> на моей странице HTML и пытаюсь получить доступ к элементам внутри него с помощью Javascript, но когда я пытаюсь выполнить свой код, я получаю следующую ошибку:

SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.

Можете ли вы помочь мне найти решение, чтобы я мог получить доступ к элементам в кадре?

Я использую этот код для тестирования, но тщетно:

$(document).ready(function() {
    var iframeWindow = document.getElementById("my-iframe-id").contentWindow;

    iframeWindow.addEventListener("load", function() {
        var doc = iframe.contentDocument || iframe.contentWindow.document;
        var target = doc.getElementById("my-target-id");

        target.innerHTML = "Found it!";
    });
});

Ответ 1

Политика того же происхождения

Вы не можете получить доступ к <iframe> с другим происхождением, используя JavaScript, это было бы огромным недостатком безопасности, если бы вы могли это сделать. Для браузеров с той же политикой происхождения блокируютсценарии, пытаясь получить доступ к кадру с другим источником.

Источник считается другим, если хотя бы одна из следующих частей адреса не поддерживается:

<protocol>://<hostname>:<port>/path/to/page.html

Протокол, имя хоста и порт должны совпадать с вашим доменом, если вы хотите получить доступ к фрейму.

^{NOTE: Internet Explorer is known to not strictly follow this rule, see here for details.}

Примеры

Вот что произойдет при попытке получить доступ к следующим URL-адресам из http://www.example.com/home/index.html

URL                                             RESULT 
http://www.example.com/home/other.html       -> Success 
http://www.example.com/dir/inner/another.php -> Success 
http://www.example.com:80                    -> Success (default port for HTTP) 
http://www.example.com:2251                  -> Failure: different port 
http://data.example.com/dir/other.html       -> Failure: different hostname 
https://www.example.com/home/index.html:80   -> Failure: different protocol
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different protocol, port & hostname

Обход

Несмотря на то, что политика одного и того же источника блокирует доступ сценариев к содержимому сайтов с другим происхождением, если вы владеете обеими страницами, вы можете обойти эту проблему, используя window.postMessage и его родственника message событие для отправки сообщений между двумя страницами, например:

На главной странице:
```
let frame = document.getElementById('your-frame-id');
frame.contentWindow.postMessage(/*any variable or object here*/, 'http://your-second-site.com');
```
Вторым аргументом для postMessage() может быть '*', чтобы указать отсутствие предпочтений относительно источника назначения. Когда это возможно, всегда следует указывать целевое происхождение, чтобы избежать разглашения данных, отправленных вами на любой другой сайт.

В вашем <iframe> (содержится на главной странице):

window.addEventListener('message', event => {
    // IMPORTANT: check the origin of the data! 
    if (event.origin.startsWith('http://your-first-site.com')) { 
        // The data was sent from your site.
        // Data sent with postMessage is stored in event.data:
        console.log(event.data); 
    } else {
        // The data was NOT sent from your site! 
        // Be careful! Do not use it. This else branch is
        // here just for clarity, you usually shouldn't needed.
        return; 
    } 
});

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

Отключение политики того же происхождения в вашем браузере

На эту тему уже есть несколько хороших ответов (я только что нашел их в Google), поэтому для браузеров, где это возможно, я приведу относительный ответ. Однако помните, что отключение политики одного и того же происхождения повлияет только на ваш браузер. Кроме того, запуск браузера с отключенными параметрами безопасности того же источника предоставляет любому веб-сайту доступ к ресурсам из разных источников, поэтому это очень небезопасно и НИКОГДА не делать, если вы точно не знаете, что делаете (например, в целях разработки).

Ответ 2

В дополнение к ответу Марко Бонелли: лучший текущий способ взаимодействия между фреймами/фреймами использует window.postMessage, поддерживается всеми браузерами

Ответ 3

Проверьте веб-сервер домена для конфигурации http://www.<domain>.com для X-Frame-Options Это функция безопасности, предназначенная для предотвращения атак clickJacking,

Как работает ClickJacking?

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

Технически у зла есть iframe с источником на странице жертвы.

<html>
    <iframe src='victim_domain.com'/>
    <input id="username" type="text" style="display: none;/>
    <input id="password" type="text" style="display: none;/>
    <script>
        //some JS code that click jacking the user username and input from inside the iframe...
    <script/>
<html>

Как работает функция безопасности

Если вы хотите, чтобы запрос веб-сервера не обрабатывался в iframe, добавьте x-frame-options

X-Frame-Options DENY

Варианты:

SAMEORIGIN//разрешить только моему собственному домену отображать мой HTML внутри iframe.
DENY//не позволяем отображать мой HTML внутри любого iframe
"ALLOW-FROM https://example.com/"//разрешить конкретному домену отображать мой HTML внутри iframe

Это пример конфигурации IIS:

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

Решение вопроса

Если веб-сервер активировал функцию безопасности, это может вызвать клиентскую ошибку SecurityError, как и должно быть.

Ответ 4

Для меня я хотел реализовать двухстороннее рукопожатие, что означает:
- родительское окно будет загружаться быстрее, чем iframe
- iframe должен общаться с родительским окном, как только оно будет готово
- родитель готов получить сообщение iframe и повторить

этот код используется для установки белой метки в iframe с помощью [пользовательское свойство CSS]
Код:
IFrame

$(function() {
    window.onload = function() {
        // create listener
        function receiveMessage(e) {
            document.documentElement.style.setProperty('--header_bg', e.data.wl.header_bg);
            document.documentElement.style.setProperty('--header_text', e.data.wl.header_text);
            document.documentElement.style.setProperty('--button_bg', e.data.wl.button_bg);
            //alert(e.data.data.header_bg);
        }
        window.addEventListener('message', receiveMessage);
        // call parent
        parent.postMessage("GetWhiteLabel","*");
    }
});

родитель

$(function() {
    // create listener
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    eventer(messageEvent, function (e) {
        // replay to child (iframe) 
        document.getElementById('wrapper-iframe').contentWindow.postMessage(
            {
                event_id: 'white_label_message',
                wl: {
                    header_bg: $('#Header').css('background-color'),
                    header_text: $('#Header .HoverMenu a').css('color'),
                    button_bg: $('#Header .HoverMenu a').css('background-color')
                }
            },
            '*'
        );
    }, false);
});

естественно, вы можете ограничить происхождение и текст, это легко работать с кодом
я нашел этот экзамен полезным:
[Междоменный обмен сообщениями с postMessage]

Ответ 5

Откройте меню "Пуск"
Наберите windows + R или откройте "Выполнить"
Выполните следующую команду.

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security