Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2017, 14:22
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

Доступ к iframe с разных доменов.
Добрый день. У меня На странице есть iframe, вот он:

<iframe id="include_content" src="https://menu.food24h.ru" width="100%" frameborder="0"></iframe>


Пытаюсь получить к нему доступ по средствам jquery, вот так:

$('iframe#include_content').contents()


В результате выхватиываю ошибку:

Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://bistro-obed.ru" from accessing a cross-origin frame

Из этого я понимаю что сайт на котором у меня установлен iframe против того что бы я получил доступ к нем.

Пишу в заголовках и на первом и на втором сайте, вот это:

<?
	header('Access-Control-Allow-Origin: *');
	header('Origin: *');
?>


Но ошибка все равно остается, подскажите пожалуйста что делаю не так
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2017, 20:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Попробуйте передать такие заголовки:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header('Access-Control-Allow-Headers: Content-Type');
header('Access-Control-Allow-Credentials: true');
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2017, 20:33
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

smart-create,

Добавьте на сайте в iframe:

window.addEventListener('message', function(e) {
    if(e.origin === 'http://bistro-obed.ru') {
         eval(e.data);
    }
});



На основном сайте:
var frame = document.getElementById('include_content');

var evalCode = 'console.log(document.body)';

frame.contentWindow.postMessage(evalCode, '*');


Таким образом, Вы передаёте во iframe любой код, который хотите там выполнить.

Последний раз редактировалось ruslan_mart, 17.11.2017 в 20:52.
Ответить с цитированием
  #4 (permalink)  
Старый 18.11.2017, 13:05
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

laimas, увы не помогло, я сам не понимаю почему, казалось бы должно все работать..., Вы случайно не знаете не может ли быть проблема в том что сайт bistro-obed.ru на котором я размещаю iframe работает на битриксе? может быть у битрикса есть какие то вшитые директивы запрещающие лезть в iframe?
Ответить с цитированием
  #5 (permalink)  
Старый 18.11.2017, 13:19
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

ruslan_mart, спасибо за подсказку. Но у меня есть проблема с пониманием того как это должно работать.

То есть я беру код:
window.addEventListener('message', function(e) {
    if(e.origin === 'http://bistro-obed.ru') {
         eval(e.data);
    }
});


вставляю его на сайт menu.food24h.ru (это страница которую я вставляю в iframe)

а этот код:
var frame = document.getElementById('include_content');

var evalCode = 'console.log(document.body)';

frame.contentWindow.postMessage(evalCode, '*');


я вставляю на сайт bistro-obed.ru (стайт на на который я устанавливаю iframe с сайта menu.food24h.ru)

Пожалуйста подскажите, правильно ли я все понял и сделал? Если да, то что я должен получить в итоге и как мне с этим работать? Я к сожалению пока не совсем понимаю как этот метод работает(
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2017, 14:24
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от smart-create
может быть у битрикса есть какие то вшитые директивы запрещающие лезть в iframe?
Каким образом сервер может знать что его контент для фрейма? Все чем он располагает, это заголовками запроса клиента. Знаю, что передачи одного заголовка header('Access-Control-Allow-Origin: *') бывает недостаточно, поэтому и добавляют в заголовки и метод запроса (добавьте в список еще и OPTIONS). Возможно потребуется перед этими заголовками указать и тип контента: header('Content-Type: text/html').

Сайт ваш точно отдает добавленные заголовки, проверяли?
Ответить с цитированием
  #7 (permalink)  
Старый 18.11.2017, 16:11
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

laimas, дописал в методы OPTIONS и добавил header('Content-Type: text/html').

Проверил на обоих стайтах наличие добавленных заголовков, все на месте. Вот заголовки сайта на который вставляю iframe, а вот заголовки сайта который вставляю в iframe.

Ошибка при вызове .contents() не меняется..(
Ответить с цитированием
  #8 (permalink)  
Старый 18.11.2017, 16:33
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Что значит заголовки сайта и заголовки в iframe? Разрешение нужно для фрейма, а это отдельный запрос. Вы можете просто в .htassecc определить передачу этих заголовков и они будут передаваться всегда, давая разрешения на доступ. Здесь в учебнике описан механизм кроссдоменных запросов.
Ответить с цитированием
  #9 (permalink)  
Старый 18.11.2017, 16:48
Профессор
Отправить личное сообщение для smart-create Посмотреть профиль Найти все сообщения от smart-create
 
Регистрация: 25.10.2016
Сообщений: 157

laimas, прошу прощения я не совсем правильно сформулировал свою мысль. Я просто хотел ответит на ваш предыдущий вопрос: "Да, я проверил заголовки которые добавил сайт отдает".

На счет htassecc, можно и через него конечно, но мне привычнее прямо на странице прописывать заголовки. Главное ведь что сайт их отдает? А каким образом их прописали по моему не имеет значения, поправьте меня если я не прав.

А вот дальше я увы не понял что вы хотел сказать упоминаю кросс доменные запросы. Я понимаю как работают кросс доменные запросы, но я ведь не запросы делаю, я просто пытаюсь получить доступ к iframe, что бы можно было выполнять с его содержимым действия с помощью js.

Я уже десятки раз использовал на страницах сайтов разные iframe и выполнял с ними действия с помощью .contents(). Всегда для этого хватало:

<?
	header('Access-Control-Allow-Origin: *');
	header('Origin: *');
?>


Я не понимаю что в этот раз пошло не так.., по этому и обратился за советом.
Ответить с цитированием
  #10 (permalink)  
Старый 18.11.2017, 17:44
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от smart-create
Главное ведь что сайт их отдает? А каким образом их прописали по моему не имеет значения
Конечно, просто через .htaccess удобнее такое задать и не беспокоиться более ни где, Apache пусть этим и занимается, если разрешения даются. Да и в этом случае заголовки гарантировано в любом случае будут отданы.

Насчет "я же просто хочу", так исполнять или нет ваши желания браузер и определяет на основе обмена заголовками с сервером. Все в общем то в порядке. Попробуйте ради эксперимента выполнить Ajax запрос, данные будут доступны?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авторесайз iFrame на разных доминах MIRU4b (X)HTML/CSS 3 13.08.2015 13:58
Доступ к функциям Iframe Kot137 Events/DOM/Window 1 13.05.2015 19:01
Доступ в IFRAME cobria2 (X)HTML/CSS 1 06.02.2012 19:32
Получить доступ к тегам в IFrame vamfirius Events/DOM/Window 6 28.04.2011 00:24
iframe и как получить доступ к его содержимому syegorius jQuery 13 14.04.2011 22:05