JavaScript 임베드가 표시되지 않음, 콘솔 로그에 "Failed to execute postMessage on DOMWindow…" 표시됨

seeminglee · 11월 5, 2020, 8:58오후

안녕하세요, 저희 사이트에 자바스크립트 임베딩을 통합하려고 할 때 정확히 같은 오류가 발생합니다.

블로그 게시물: https://royaleapi.com/blog/season3
디스커스 사이트: https://discuss.royaleapi.com

관련된 주제들을 살펴보고 구글링도 해봤지만, 이 문제를 해결하기 위해 정확히 무엇을 해야 하는지 확신이 서지 않습니다. 감사합니다!

[edit] 이 오류 메시지가 계속 표시되는 것을 원하지 않아, 이 오래된 게시물 하나에만 활성화해 두었습니다.

임베딩 설정:

시도해 본 설정:

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

host: royaleapi.com
path allowed:

또한 다음 도메인에 대해 CORS origin을 활성화했습니다:

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

그리고 app.yml의 ENV에 DISCOURSE_ENABLE_CORS: true도 추가했는데, 여기서 막혀버렸네요…

simon · 11월 6, 2020, 8:30오후

?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>)와 같은 내용일 것으로 예상됩니다.

seeminglee · 11월 6, 2020, 8:45오후

이 문제가 ?discuss=1 파라미터와는 전혀 무관하다고 확신합니다. 해당 파라미터가 없는 상태에서도 동일한 문제가 발생했기 때문입니다. 다만, 이 사이트는 실제 운영 중인 사이트이므로 사용자에게 거대한 오류 블록을 표시하고 싶지 않아서입니다. 하지만 요청하신 대로 사이트 설정을 수정하여, 방문자가 없을 것으로 예상되는 아주 오래된 게시물 하나에만 자바스크립트 임베드를 활성화했습니다. 따라서 쿼리 문자열은 없습니다. (첫 번째 게시글을 이 내용으로 업데이트했습니다)

https://royaleapi.com/blog/season3

https://royaleapi.com/blog/season3

Discourse 버전

2.6.0.beta5

OS 버전

Ubuntu 20.04.1 LTS

전체 오류 메시지

VM469 embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:1 Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://discuss.royaleapi.com’) does not match the recipient window’s origin (‘https://royaleapi.com’).

블로그 카테고리

이것은 모두에게 공개된 공개 카테고리입니다. 사실 게시물이 없도록 설정해 두었습니다. 카테고리 내에 단일 항목이 필요한지 확인하기 위해 방금 새 게시물을 하나 작성했습니다.

스크린샷: 데스크톱

스크린샷: 모바일

seeminglee · 11월 6, 2020, 10:06오후

이것이 관련이 있을지 확신은 없지만, 로그에서 몇 가지 오류를 발견했습니다. 다만 어떤 오류인지 모르겠습니다:

[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을 게시했기 때문에, 이러한 파일 위치는 설정에서 표준적인 것으로 보인다고 판단하여 문제없다고 생각했습니다.

seeminglee · 11월 30, 2020, 3:46오후

@simon 이 부분은 혹시 도움을 주실 수 있을까요? 예상되는 동작인가요, 아니면 향후 릴리스에서 수정될 예정인가요?

이 포럼은 주로 사이트 페이지에 대한 댓글 기능을 활성화하기 위해 추가한 것입니다. 이 기능이 작동하지 않는다면 다른 해결책을 찾아야 합니다.

감사합니다!

simon · 11월 30, 2020, 11:12오후

이 스크린샷에서 이전에 인지하지 못했던 문제가 하나 있습니다:

Path Allowlist가 /blog/.*가 아니라 /blog/*로 설정되어 있습니다(점 문자가 추가되었음을 주의하세요.)

호스트 항목을 편집하여 Path Allowlist를 /blog/.*로 변경해 보세요.

그렇게 해도 문제가 해결되지 않으면 /.*도 시도해 보세요. 설정을 비워 두는 것도 시도해 보세요.

seeminglee · 12월 1, 2020, 1:02오전

네, 제 스크린샷에는 문제가 있었지만, 정규식을 사용하는 것 같다는 걸 깨달은 후 이미 /blog/.*로 변경했습니다. 하지만 문제는 여전히 지속되고 있습니다.

seeminglee · 12월 1, 2020, 1:42오전

@simon 세 가지 모두 시도해 봤습니다:

/blog/.*
/.*

(마지막 항목은 비어 있음) 하지만 어느 것도 작동하지 않습니다.

콘솔에서 확인되는 오류는 다른 것보다 CORS 문제처럼 보입니다.

_embed-application-9cef8308c816fc1d83137e63d6c556c6cc2b68fe2b6e5ce16cca6766ba2c0ae4.js:7 
Failed to execute 'postMessage' on 'DOMWindow': 
The target origin provided ('https://discuss.royaleapi.com') 
does not match the recipient window's origin ('https://royaleapi.com').

하지만 어떻게 수정해야 할지 확실하지 않습니다. 테스트를 위해 이미 앱 설정에 다음을 추가해 봤습니다:

  DISCOURSE_ENABLE_CORS: true
  DISCOURSE_CORS_ORIGIN: '*'

실질적으로 완전히 개방한 상태이지만, 이것도 작동하지 않습니다.

simon · 12월 1, 2020, 1:44오전

Discourse 임베딩 설정 페이지에서 “토픽 생성 시 사용할 사용자 이름” 설정을 했나요? 이 설정이 되어 있지 않으면 Failed to execute 'postMessage' on 'DOMWindow' 오류가 발생합니다.

seeminglee · 12월 8, 2020, 11:55오후

@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 헤더가 없는 것 같습니다. Docker 이미지 내장 설정 대신 제 자체 nginx 설정을 사용해 볼까요?

seeminglee · 1월 14, 2021, 12:12오전

@simon 이 문제를 해결했습니다.

다른 문제(Unable to generate preview for URLs - #4 by seeminglee)를 해결하기 위해 사이트에서 HEAD 요청을 활성화했는데, 이제 모든 토론이 표시되고, 블로그 게시물에 대해 스레드가 자동으로 생성됩니다.

정말 놀랍습니다 — HEAD 요청 문제였는데 CORS 관련 문제인 줄 알고 그쪽으로 파고들었다니 믿기지가 않네요. 아마 문서 어딘가에 이 부분이 명시되어야 할 것 같습니다.

이 이슈를 종결 처리해 주시면 감사하겠습니다.

simon · 1월 14, 2021, 12:22오전

이어서 확인해 주셔서 정말 감사합니다!

아마도 https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963#troubleshooting의 문제 해결(Troubleshooting) 섹션에 추가해야 할 것 같습니다. HEAD 요청이 비활성화된 사이트가 얼마나 흔한지는 정확히 알 수 없으나, 비활성화된 사이트에서는 원인을 파악하기가 매우 어렵습니다.

Falco · 1월 14, 2021, 12:30오전

음, GET 요청에 응답하는 URL에 대해 HEAD 요청을 차단하려고 일부러 RFC를 위반했다면, 일부 오류가 발생하는 것은 당연하지 않나요?

seeminglee · 1월 14, 2021, 12:40오전

솔직히 말하면, 해당 메서드에 의존해서 존재하는 서비스가 있다는 걸 몰랐어요. 필요하다는 걸 알았으면 메서드를 "비활성화"하지 않았을 거예요.

그리고 명확히 하고 싶은 건, 제가 일부러 메서드를 비활성화한 건 아니라는 거예요. 그냥 HEAD 메서드를 지원하는 라우트를 작성하지 않았을 뿐이에요. 그래서 결국 지금은 유효한 엔드포인트에 대한 모든 HEAD 요청에 응답하는 함수를 추가한 거예요.

seeminglee · 1월 14, 2021, 12:50오전

실제로, @Falco 님이 단순히 아래 명령어를 실행하면

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

해당 메서드가 구현되어 있는지 확인할 수 있다고 말씀하셨습니다. 이는 확인하기에 좋은 방법인 것 같습니다.

어쨌든, 두 분 모두에게 정말 감사드립니다!

Falco · 1월 14, 2021, 12:55오전

아, 죄송합니다. Rails 같은 프레임워크에 익숙해져서 웹사이트에서 이것이 기본적으로 제공될 거라고 기대하게 된 것 같습니다.

willywongi · 1월 14, 2021, 10:28오전

네, 부탁드립니다. 문제 해결(Troubleshooting) 섹션을 이 내용으로 업데이트해 주세요. CORS/프레임 보안 문제로 막혀 있는데, @seeminglee님의 단계를 따르는 것이 도움이 될 것 같습니다. HEAD 요청을 어떻게 활성화하나요?

seeminglee · 1월 14, 2021, 12:16오후

@willywongi 제 문제가 무엇이었는지 혼동하고 계실 수 있으니, 무슨 일이 있었는지 설명드리겠습니다.

단계를 따라 진행했지만 사이트에 댓글이 임베드되지 않았습니다.
나중에 보니, 다른 도메인에 설치된 제 Discourse 앱이 제 블로그 포스트가 존재하는지 "검증"할 수 없었습니다. 제 메인 사이트가 해당 URL에 대해 HEAD 메서드를 구현하지 않았기 때문이었죠.
해당 경로에 대한 HEAD 요청 핸들러를 구현한 후, 임베드가 정상적으로 작동하기 시작했습니다.

저와 같은 문제가 있는지 확인하려면, 블로그 포스트가 포함된 URL(또는 댓글 임베드를 표시하려는 위치)에 curl을 실행해 보세요.

예를 들어, URL이 https://example.com/blog/awesome-post라면 터미널에 이동하여 다음을 실행하세요.

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

이 명령은 해당 URL에 HEAD 요청을 보내 결과를 반환합니다. 상태 코드가 200이 아닌 경우(응답의 첫 번째 줄에 있는 숫자), 예:

HTTP/2 200

서버가 HEAD 메서드를 구현하지 않은 경우(또는 HEAD 요청에 응답하는 데 문제가 있는 경우)입니다.

응답이 200이라면, 임베드 문제는 HEAD 요청과 무관합니다.

willywongi · 1월 14, 2021, 1:17오후

하, 이제 명확해졌네요! 감사합니다.
HEAD 메서드를 확인해 봤고, 제 웹사이트는 이를 올바르게(200) 응답하고 있습니다.

아직 Discourse 스레드를 임베드하는 데 어려움을 겪고 있지만, 다른 문제가 발생하면 새로운 스레드를 열겠습니다.

emurillo · 4월 26, 2022, 3:00오후

이 문제를 만나서 조사해보니, '토픽 생성 시 사용할 사용자 이름’이라는 항목의 호출 방식을 변경해 놓고 임베딩 페이지에서 이를 업데이트하지 않은 것이 원인이었습니다. 토픽을 생성하려고 했는데 사용자 이름을 찾지 못했던 것 같습니다. 임베딩 설정 페이지에서 해당 값을 업데이트한 후 에러가 사라졌습니다.

글		댓글	조회수
Cannot get embedding to work Support	11	2789	8월 31, 2021
Embedding comments issue Support	4	2378	6월 26, 2015
"Error Embedding" comments Support	16	2480	5월 4, 2022
Embedding Discourse Comments via Javascript over https Support	2	767	1월 31, 2020
Embedding error Support	13	4240	11월 21, 2020