SecurityError: Zablokowano ramkę z origin przed dostępem do ramki cross-origin

Question

SecurityError: Zablokowano ramkę z origin przed dostępem do ramki cross-origin

Ładuję <iframe> na mojej stronie HTML i próbuję uzyskać dostęp do elementów w niej za pomocą Javascript, ale kiedy próbuję wykonać mój kod, pojawia się następujący błąd:

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

Czy możesz mi pomóc znaleźć rozwiązanie, abym mógł uzyskać dostęp do elementów w ramce?

Używam tego kodu do testowania, ale na próżno:

$(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!";
    });
});

352

javascript jquery same-origin-policy iframe

Author: Marco Bonelli, 2014-08-02

Source

6 answers

Uzupełnieniem odpowiedzi Marco Bonelliego: najlepszym obecnie sposobem interakcji między ramkami / ramkami iFrame jest użycie window.postMessage, obsługiwane przez wszystkie przeglądarki

43

Author: Geert,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-16 08:19:47

Sprawdź serwer WWW domeny pod kątem konfiguracji http://www.<domain>.com dla X-Frame-Options Jest to funkcja bezpieczeństwa zaprojektowana, aby zapobiec atakom typu clickJacking,

Jak działa clickJacking?

następnie oszukał użytkowników, aby wprowadzić ich nazwę użytkownika i hasło.

Technicznie zło ma iframe ze źródłem do strony ofiary.

<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>

Jak działa funkcja bezpieczeństwa

Jeśli chcesz zapobiec sieci żądanie serwera do renderowania w iframe Dodaj X-frame-options

X-Frame-Options DENY

Opcje to:

SAMEORIGIN / / allow only to my own domain Renderuj mój HTML wewnątrz ramki iframe.
DENY / / nie zezwalaj na renderowanie mojego HTML w dowolnym iframe
"ALLOW-FROM https://example.com w ten sposób można uzyskać więcej informacji na temat tego, co się dzieje w danej domenie.]}

To jest konfiguracja IIS przykład:

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

Rozwiązanie pytania

Jeśli serwer sieci Web aktywował funkcję zabezpieczeń, może to spowodować po stronie klienta SecurityError, jak powinien.

7

Author: Shahar Shukrani,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-29 08:41:42

Dla mnie chciałem zaimplementować dwukierunkowy uścisk dłoni, czyli:
- okno rodzica ładuje się szybciej niż iframe
- ramka iframe powinna rozmawiać z oknem rodzica tak szybko, jak jest gotowa
- rodzic jest gotowy do odebrania wiadomości iframe i powtórki

Ten kod jest używany do ustawiania białej etykiety w ramce iframe przy użyciu [CSS custom property]
kod:
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","*");
    }
});

Rodzic

$(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);
});

Naturalnie można ograniczyć pochodzenie i tekst, jest to łatwe w obsłudze-z kodem
uznałem ten egzamin za pomocny:
[wiadomości między domenami z postMessage]

5

Author: Yakir Manor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-13 17:40:03

Moja aplikacja była upaść z SecurityError po umieszczeniu wewnątrz iframe. Problem polegał na tym, że .animate({scrollTop: top}, 0) jQuery było stosowane bezpośrednio na window.

Usunięcie tego LOC naprawiło problem dla nas.

0

Author: Oorja,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-01 06:09:39

Otwórz menu start
Wpisz windows + R lub otwórz " Run
Wykonaj następujące polecenie.

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

0

Author: sakthi sudhan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-22 07:14:18

score 543 · Accepted Answer

Polityka samego pochodzenia

^{nie mylić z Kors !}

Ty nie możesz uzyskać dostępu do <iframe> z innym pochodzeniem za pomocą JavaScript, byłoby to ogromną wadą bezpieczeństwa, gdybyś mógł to zrobić. Dla polityki tego samego pochodzenia przeglądarki blokują Skrypty próbujące uzyskać dostęp do ramki o innym pochodzeniu .

Pochodzenie jest uważane za inne, jeśli co najmniej jedna z następujących części adresu nie jest zachowana:

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

Protokół, Nazwa hosta i port muszą być takie same dla Twojej domeny, jeśli chcesz uzyskać dostęp do ramki.

Przykłady

Oto, co się stanie, próbując uzyskać dostęp do następujących adresów URL z 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

Obejście

Mimo że zasady tego samego pochodzenia blokują skryptom dostęp do zawartości stron o innym pochodzeniu, jeśli posiadasz obie strony, możesz obejść ten problem za pomocą window.postMessage i jego relatywne message Zdarzenie , aby wysyłać wiadomości między dwiema stronami, tak:

Na twojej stronie głównej:

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

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

W Twoim <iframe> (zawartym na stronie głównej):

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; 
    } 
});

Ta metoda może być zastosowana w w obu kierunkach , tworząc listener na stronie głównej i odbierając odpowiedzi z ramki. Ta sama logika może być również zaimplementowana w pop-upach i w zasadzie w każdym nowym oknie generowanym przez stronę główną (np. za pomocą window.open()) jak również, bez żadnej różnicy.

Wyłączanie Polityki tego samego pochodzenia w Twojej przeglądarce

Jest już kilka dobrych odpowiedzi na ten temat (właśnie znalazłem je w googlach), więc dla przeglądarek, w których jest to możliwe, podlinkuję względną odpowiedź. Należy jednak pamiętać, że wyłączenie Polityki tego samego pochodzenia (lub Kors) będzie miało wpływ tylko na Twoją przeglądarkę. Ponadto uruchamianie przeglądarki z ustawieniami zabezpieczeń tego samego pochodzenia osoby niepełnosprawne przyznają dostęp do każdej strony internetowej do zasobów pochodzących z różnych źródeł, więc jest to bardzo niebezpieczne i powinno być zrobione tylko w celach rozwojowych.

Google Chrome
Mozilla Firefox

tylko CORS

Opera: niemożliwe.

tylko CORS