Czym jest postMessage w JavaScript?

By /

JavaScript

postMessage jest metodą w JavaScript, która umożliwia bezpieczną komunikację między różnymi oknami lub ramkami (iframe), nawet jeśli pochodzą z różnych źródeł (cross-origin). Jest to kluczowe narzędzie w nowoczesnym web development, pozwalające na wymianę danych między stronami bez narażania bezpieczeństwa użytkownika. Metoda ta jest szczególnie przydatna w aplikacjach wykorzystujących iframes lub w sytuacjach, gdzie wymagana jest interakcja między stronami hostowanymi na różnych domenach.

Przykład użycia postMessage

W tym przykładzie pokażemy, jak strona główna (parent.html) może wysyłać i odbierać wiadomości od ramki (iframe.html) i odwrotnie.

parent.html

Strona główna, która zawiera ramkę i wysyła do niej wiadomość:

<!DOCTYPE html>
<html>
<head>
    <title>Strona Główna</title>
</head>
<body>
    <h3>Strona Główna</h3>
    <iframe id="myIframe" src="iframe.html" 
            style="height:200px;width:300px;"></iframe>
    <script>
        // Oczekiwanie na załadowanie ramki przed wysłaniem wiadomości
        window.onload = function() {
            var iframe = document.getElementById('myIframe');
            var targetOrigin = "http://example.com"; // Zastąp odpowiednim źródłem

            // Wysyłanie wiadomości do ramki
            iframe.contentWindow.postMessage("Witaj, iframe!", targetOrigin);

            // Odbieranie wiadomości od ramki
            window.addEventListener("message", function(event) {
                // Sprawdzenie źródła wiadomości
                if (event.origin !== "http://example.com") return;

                alert("Wiadomość od ramki: " + event.data);
            }, false);
        };
    </script>
</body>
</html>
iframe.html

Ramka, która odbiera i wysyła wiadomość z powrotem do strony głównej:

<!DOCTYPE html>
<html>
<head>
    <title>Ramka</title>
</head>
<body>
    <h3>Ramka</h3>
    <script>
        // Odbieranie wiadomości od strony głównej
        window.addEventListener("message", function(event) {
            // Sprawdzenie źródła wiadomości
            if (event.origin !== "http://example.com") return;

            alert("Wiadomość od strony głównej: " + event.data);

            // Wysyłanie wiadomości z powrotem do strony głównej
            event.source.postMessage("Witaj, strona główna!", event.origin);
        }, false);
    </script>
</body>
</html>

Komentarze do kodu

  • Oczekiwanie na załadowanie: W przykładzie strony głównej, używamy window.onload do upewnienia się, że ramka została załadowana przed wysłaniem do niej wiadomości.
  • Wysyłanie wiadomości: Używamy postMessage z dwoma argumentami: treścią wiadomości i źródłem (origin), do którego wiadomość jest skierowana. Jest to kluczowe dla bezpieczeństwa, ponieważ pozwala na weryfikację źródła wiadomości.
  • Odbieranie wiadomości: Dodajemy słuchacza zdarzeń message do odbierania wiadomości. Wewnątrz funkcji obsługi sprawdzamy origin wiadomości, aby upewnić się, że pochodzi ona z zaufanego źródła.

Podsumowanie

Metoda postMessage w JavaScript otwiera drogę do bezpiecznej komunikacji między dokumentami, które mogą być hostowane na różnych domenach. Jest to fundament bezpiecznego i efektywn

 

Powiązane artykuły

Scroll to Top