JavaScript-embed не отображает вставку, в консоли: Не удалось выполнить postMessage на DOMWindow...

Привет, у меня возникает точно такая же ошибка при попытке интегрировать JavaScript-встраивание на наш сайт.

Я изучил соответствующие темы и также поискал в Google, но до конца не уверен, что именно нужно сделать, чтобы исправить это. Спасибо!

[edit] Поскольку я не хочу, чтобы это сообщение об ошибке отображалось постоянно, я включил его только для этого одного старого сообщения.

Настройки встраивания:

Попробованные настройки:

host: royaleapi.com
path allowed: /blog/.*

host: royaleapi.com
path allowed: 

Также я включил CORS origin для следующих доменов:

  • https://royaleapi.com
  • https://cdn.royaleapi.com

А также добавил DISCOURSE_ENABLE_CORS: true в ENV внутри app.yml, поэтому я немного застрял…

Вы уверены, что параметр запроса ?discuss=1 не является причиной проблемы?

Есть ли какие-либо разрешения безопасности для вашей категории блога или она настроена так, чтобы группа «все» могла создавать / отвечать / просматривать?

На какой версии Discourse работает ваш сайт?

Также, какое полное сообщение об ошибке вы видите после текста Failed to execute postMessage on DOMWindow? Я ожидаю, что это будет что-то вроде The target origin provided (<target_url>) does not match the recipient window's origin (<origin_url>).

Я уверен, что это никак не связано с параметром ?discuss=1. У меня была та же проблема без него — дело лишь в том, что это рабочий сайт, и я не хочу показывать нашим пользователям огромный блок с ошибкой. Но раз вы спросили, я отредактировал сайт и теперь включил JavaScript-вставку только на одном из наших очень старых постов, где, скорее всего, не будет посетителей. Таким образом, строка запроса отсутствует. (Я обновил свой первый пост, чтобы отразить это)

https://royaleapi.com/blog/season3

https://royaleapi.com/blog/season3

Версия Discourse

2.6.0.beta5

Версия ОС

Ubuntu 20.04.1 LTS

Полное сообщение об ошибке

VM469 embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1 Не удалось выполнить «postMessage» в «DOMWindow»: указанный целевой источник (https://discuss.royaleapi.com) не совпадает с источником окна получателя (https://royaleapi.com).

Категория блога

Это публичная категория — доступна всем. Я сделал её такой, на самом деле в ней нет постов. Я только что создал новый пост, чтобы проверить, требуется ли наличие хотя бы одного элемента в категории.

Скриншот: Рабочий стол

Скриншот: Мобильное устройство

Не уверен, что это может быть актуально, но я вижу некоторые ошибки в логах, хотя не понимаю, что именно происходит:

[Fri 06 Nov 2020 04:47:14 PM UTC] Domains not changed.
[Fri 06 Nov 2020 04:47:14 PM UTC] Skip, Next renewal time is: Mon 04 Jan 2021 08:07:59 AM UTC
[Fri 06 Nov 2020 04:47:14 PM UTC] Add '--force' to force to renew.
[Fri 06 Nov 2020 04:47:14 PM UTC] Installing key to:/shared/ssl/discuss.royaleapi.com_ecc.key
[Fri 06 Nov 2020 04:47:14 PM UTC] Installing full chain to:/shared/ssl/discuss.royaleapi.com_ecc.cer
[Fri 06 Nov 2020 04:47:14 PM UTC] Run reload cmd: sv reload nginx
warning: nginx: unable to open supervise/ok: file does not exist
[Fri 06 Nov 2020 04:47:14 PM UTC] Reload error for :
Started runsvdir, PID is 663
ok: run: redis: (pid 677) 0s
chgrp: invalid group: 'syslog'
ok: run: postgres: (pid 675) 0s
rsyslogd: imklog: cannot open kernel log (/proc/kmsg): Operation not permitted.
rsyslogd: activation of module imklog failed [v8.1901.0 try https://www.rsyslog.com/e/2145 ]
supervisor pid: 671 unicorn pid: 702

Также, пожалуйста, дайте знать, если что-то из этого следует скрыть. Поскольку я уже опубликовал URL, я полагаю, что это не нанесёт вреда, так как эти пути к файлам, по-видимому, стандартны для данной конфигурации.

@simon Не могли бы вы, возможно, помочь мне с этим? Это ожидаемое поведение или проблема будет исправлена в будущем выпуске?

Мы добавили этот форум в основном для возможности комментирования страниц нашего сайта, и если это не будет работать, нам придется рассмотреть другие решения.

Спасибо!

На этом скриншоте есть проблема, которую я ранее не заметил:

Список разрешённых путей установлен как /blog/*, а должен быть /blog/.* (обратите внимание на добавление точки).

Попробуйте отредактировать запись хоста и изменить список разрешённых путей на /blog/.*.

Если это не исправит проблему, попробуйте /.*. Также попробуйте просто оставить настройку пустой.

Да, на моем скриншоте была эта проблема, но я уже изменил его на /blog/.*, так как понял, что, скорее всего, используется регулярное выражение. Однако проблема сохраняется.

@simon Я попробовал все три варианта:

/blog/.*
/.*

(последний пустой), но ни один из них не сработал.

Ошибка в консоли выглядит скорее как проблема CORS, чем что-либо другое.

_embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:7 
Не удалось выполнить 'postMessage' в 'DOMWindow': 
Предоставленный целевой источник ('https://discuss.royaleapi.com') 
не совпадает с источником окна-получателя ('https://royaleapi.com').

Но я не уверен, как это исправить. Для тестирования я уже добавил в конфигурацию приложения следующее:

  DISCOURSE_ENABLE_CORS: true
  DISCOURSE_CORS_ORIGIN: '*'

По сути, сделав всё максимально открытым, но это тоже не помогает.

На странице настроек встраивания Discourse вы указали настройку «Имя пользователя для создания тем»? Если она не установлена, вы получите ошибку Failed to execute 'postMessage' on 'DOMWindow'.

@simon Да, имя пользователя для создания тем установлено в system. Я также пробовал установить его на своё имя пользователя, но получаю ту же ошибку.

Кстати, сегодня я обнаружил следующее:

curl -IXGET https://discuss.royaleapi.com

access-control-allow-origin: *
access-control-allow-headers: Content-Type, Cache-Control, X-Requested-With, 	X-CSRF-Token, Discourse-Present, User-Api-Key, User-Api-Client-Id, Authorization
access-control-allow-credentials: true
[truncated]

Однако:

curl -IXGET https://discuss.royaleapi.com/javascripts/embed.js

HTTP/2 200
server: nginx
date: Tue, 08 Dec 2020 23:52:26 GMT
content-type: application/javascript
content-length: 2404
last-modified: Tue, 01 Dec 2020 01:49:39 GMT
vary: Accept-Encoding
expires: Wed, 09 Dec 2020 23:52:26 GMT
cache-control: max-age=86400
cache-control: public,immutable
accept-ranges: bytes

Может ли это быть причиной? Получается, что у самих скриптов нет заголовков access-control-allow-origin, хотя у домена они есть. Стоит ли мне попробовать использовать свою конфигурацию nginx и не использовать ту, что встроена в образ Docker?

@simon Я решил эту проблему.

Чтобы решить другую проблему Unable to generate preview for URLs - #4 by seeminglee, я включил HEAD-запросы на сайте. Теперь все обсуждения отображаются, и, как следствие, для моих постов в блоге автоматически создаются темы.

Это потрясающе — я не могу поверить, что углубился в кроличью нору попыток выяснить, является ли это проблемой, связанной с CORS, когда на самом деле она связана с HEAD-запросами. Возможно, это стоит указать где-то в документации.

Пожалуйста, закройте эту проблему.

Огромное спасибо за обратную связь!

Вероятно, это стоит добавить в раздел «Устранение неполадок» на странице Embed Discourse comments on another website via Javascript. Я не уверен, насколько распространена ситуация с отключёнными HEAD-запросами, но для сайтов, где они отключены, это сложная проблема для диагностики.

Что ж, если вы специально заблокировали HEAD-запросы для URL-адресов, которые отвечают на GET-запросы и нарушают RFC, то можно ли не ожидать некоторых сбоев, верно?

Честно говоря, я не осознавал, что существуют сервисы, которые зависят от его существования. Я бы не «отключал» этот метод, если бы знал, что он необходим.

Также для ясности: я не прикладываю особых усилий, чтобы отключить этот метод. Я просто не прописал маршруты для поддержки метода HEAD. Так что по сути я добавил функцию, которая отвечает на все HEAD-запросы к валидным эндпоинтам.

На самом деле, @Falco показывает, что простое выполнение

curl https://example.com/path/to -I

покажет, реализован ли этот метод. Это кажется хорошим способом проверить это.

В любом случае, очень благодарен обоим вам за помощь!

О, извините. Думаю, такие фреймворки, как Rails, избаловали меня до такой степени, что я ожидаю, что это будет настройкой по умолчанию «из коробки» для веб-сайтов :sweat_smile:

Да, пожалуйста: обновите раздел «Решение проблем» этой информацией. Я застрял на проблемах с безопасностью CORS/Frame и надеюсь, что следование инструкциям от @seeminglee поможет. Как включить запросы HEAD?

@willywongi Возможно, вы не совсем поняли суть моей проблемы, поэтому позвольте мне объяснить, что произошло.

  1. Я выполнил все шаги, но не смог внедрить комментарии на сайт.
  2. Оказалось, что моё приложение Discourse (установленное на другом домене) не может «подтвердить» существование моих постов в блоге, потому что мой основной сайт не реализовал метод HEAD для этих URL-адресов.
  3. После добавления обработчика для запросов HEAD по этим путям внедрение заработало.

Чтобы проверить, есть ли у вас такая же проблема, выполните команду curl для URL-адреса, содержащего пост в блоге, или там, где вы хотите разместить комментарии.

Например, если ваш URL — https://example.com/blog/awesome-post, откройте терминал и выполните:

curl https://example.com/blog/awesome-post -I

Это выполнит HEAD-запрос к указанному URL и покажет результат. Если код статуса отличается от 200 (это число в первой строке ответа), например:

HTTP/2 200

то сервер не реализует метод HEAD (ИЛИ у него возникли проблемы с обработкой таких запросов).

Если ответ действительно 200, то проблема с внедрением комментариев не связана с HEAD-запросами.

Ха, теперь всё понятно! Спасибо.
Я проверил метод HEAD, и мой сайт корректно (200) отвечает на него.

У меня всё ещё возникают трудности с встраиванием темы Discourse, но если что-то ещё не сработает, я открою новую тему.

Столкнулся с этой проблемой, и оказалось, что я изменил название поля «Имя пользователя для создания темы», но забыл обновить его на странице встраивания. Полагаю, система пыталась создать тему, но не могла найти имя пользователя. После обновления настройки на странице встраивания ошибка исчезла.