Политика same-origin-policy является важной концепцией в модели безопасности веб-приложений. Политика разрешает запускать скрипты на страницах, происходящих с одного и того же сайта - комбинация схемы, имени хоста и номера порта для доступа к DOM друг друга без особых ограничений, но предотвращает доступ к DOM на разных сайтах. Источник - Википедия.

Как разработчик, мы в какой-то момент столкнулись с проблемой междоменного доступа при создании веб-приложений. Мы сталкиваемся с этими проблемами всякий раз, когда приложение хочет сделать вызовы из самого браузера на страницу, размещенную в другом домене, например, http: / /www.example.com/appPage.html хочет выполнить вызов страницы или службы, размещенной в домене http://www.iframe.com/iframe.html. По умолчанию в качестве ограничения безопасности браузер блокирует этот тип связи, чтобы запретить вредоносным приложениям получать данные или выполнять код без разрешения пользователя.

Но функция «пост-сообщения» HTML5 предоставляет замечательное решение для решения этой проблемы.

Для демонстрации мы возьмем один файл parent.html и i-frame.html и попытаемся получить доступ к iframe.html из parent.html.

Вот наша страница parent.html:

<html>
<head>
    <script type="text/javascript">
        window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
            alert("got message: " + event.data);
        }
    </script>
</head>
<title> Parent Page </title>
<body>
    <iframe src="http://path.com/Iframe.html" width="500" height="500"></iframe>
</body>
</html>

Это запустит iframe, а window.addEventListener позаботится о вызове postmessage из iframe.html.

Теперь ниже наша страница Iframe.html.

<html>
<head>
    <script>
        function send() {
            window.parent.postMessage('Hello Parent Frame!', '*');
        }
    </script>
</head>
<title> IFrame Test </title>
<body>
    <h1> Welcome </h1>
    <p> Hello There </body>
<button onclick="send()">Send</button>
</body>
</html>

Это вызовет функцию window.parent.postMessage () после создания пользователем события click и отправит сообщение «Hello Parent Frame!» На родительскую страницу.

Запустите parent.html и нажмите кнопку отправки, родительская страница получит сообщение «Hello Parent Frame!» В окне предупреждения.

Таким образом, мы можем просто инициировать обмен данными с использованием самого HTML5 без какого-либо стороннего фреймворка.

Делитесь своими мыслями о том же.

Удачного обучения !!!