Справочная информация: у нас есть платформа, которая работает на https://system.example.com.Эта платформа состоит из 10 отдельных веб-приложений (все написаны на PHP и JS).Исторически каждое приложение находилось в подкаталоге одного и того же поддомена:
Мы находимся в процессе перестройки одного из приложений, app2, и решили разместить его на новом отдельном поддомене, https://app2.example.com.
* 1020.* Часть приложения
app2 использует JavaScript, чтобы открыть всплывающее окно для
app10.Большая часть функциональности в этом всплывающем окне работает, как и ожидалось.Тем не менее, при попытке использовать кнопку «Сохранить» во всплывающем окне консоли моего браузера отображалось:
Uncaught DOMException: заблокирован фрейм с источником «https://app2.example.com" от доступа к кросс-источникуframe. at https://system.example.com/app10/manage.php:1:334
Я прочитал оба SecurityError: Заблокирован фрейм с источником из-за доступа к фрейму перекрестного происхождения и https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage, но все еще неясно, каккак это исправить.
Код и процесс, который я имею, выглядит следующим образом:
Всплывающее окно открывается из https://app2.example.com кнопкой, которая имеет обработчик событий onclick:
<button onclick="postToPopUp('https://system.example.com/app10/manage.php', 'fileManage', 'width=800px,height=600px', ['f_id', '123'], 'app2', 'filesCallbackManage')">Open app10</button>
Функция postToPopup() используется для передачи данных POST из app2 в https://system.example.com/app10/manage.php на основе Передачи значений Javascript window.open с использованием POST - это прекрасно работает.
Проблема возникает, когда я нажимаю кнопку «Сохранить» внутри всплывающего окна, которое отображает следующую разметку во всплывающем окне:
<!doctype HTML><html><head><title>upload</title>
<script type="text/javascript" language="javascript" charset="utf-8">
var fileObject = {"files":{"0":{"f_id":"1784","f_title":"test07.pdf"},"f_id":123}};
window.opener.filesCallbackManage(fileObject);
window.close();
</script><body></body></html>
Что это было сделано изначально - когда все было в одном поддомене - былоназывается функция JS filesCallbackManage(), которыйh состоял в коде для https://system.example.com/app2.Самой функции был передан объект fileObject, который обновлял различные части пользовательского интерфейса внутри app2.После нажатия кнопки «Сохранить» всплывающее окно было закрыто из-за window.close();
Хотя я читал об использовании postMessage Я не понимаю, как это подходит, или это даже правильное решение моей проблемы?Данные отправляются с субдомена https://app2.example.com на https://system.example.com/app10 правильно.Проблема в том, что filesCallbackManage() не сработает из-за ограничения перекрестного происхождения.Внутри моего кода для https://app2.example.com у меня есть простое утверждение, чтобы увидеть, запускается ли оно:
function filesCallbackManage(data)
{
console.log('filesCallbackManage has fired');
}
Это никогда не срабатывает из-за моей проблемы.Я получаю ошибку консоли, упомянутую ранее, и пустое всплывающее окно (технически это правильно, поскольку в теге <body> в разметке выше ничего нет), но окно не закрывается и обратный вызов не запускается.
Пример, приведенный на веб-сайте Mozilla, недостаточно широк, чтобы понять, как его можно адаптировать к сценарию такого типа.Пожалуйста, кто-нибудь может уточнить?Кроме того, связанному посту переполнения стека исполнилось четыре года, поэтому я хочу быть уверенным, что все, что я надену, является безопасным и актуальным.