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!";

    });

});
1244   6  

6 ответов:

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

не путать с CORS!

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

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

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

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

примеры

вот что произойдет, пытаясь получить доступ к следующим 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.html -> Failure: different protocol 
ftp://www.example.com:21                     -> Failure: different protocol & port 
https://google.com/search?q=james+bond       -> Failure: different hostname & protocol

решение

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

  • на главной странице: 

    var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*');

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

    window.addEventListener('message', function(event) { 

    // IMPORTANT: Check the origin of the data! 
    if (~event.origin.indexOf('http://yoursite.com')) { 
        // The data has been sent from your site 

        // The data sent with postMessage is stored in event.data 
        console.log(event.data); 
    } else { 
        // The data hasn't been sent from your site! 
        // Be careful! Do not use it. 
        return; 
    } 
});

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

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

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

543  
2018-06-18 02:42:08

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

43  
2014-12-16 10:19:47

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

как работает clickJacking?

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

технически зло имеет 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-параметры запретить

варианты:

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

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

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

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

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

7  
2017-09-29 11:41:42

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

этот код используется для установки белой метки в iframe с помощью [CSS custom свойство]
код:
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);
});

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

5  
2017-12-13 19:40:03

мое приложение было сбой с SecurityError при размещении внутри iframe. Проблема была с jQuery .animate({scrollTop: top}, 0) применяется на window напрямую.

удаление этого LOC исправило проблему для нас.

0  
2018-08-01 09:09:39

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

chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security
0  
2018-09-22 10:14:18

Comments

    Ничего не найдено.
Click here to cancel reply.