임베딩 오류 - Referer가 전송되지 않았거나 다음 호스트 중 어느 것과도 일치하지 않음

안녕하세요, 여러분. 저희 회사 Jekyll 블로그인 https://blog.neverlocal.com 의 댓글 섹션으로 https://forum.neverlocal.com 을 사용하려고 시도하고 있습니다. 현재 Discourse의 호스팅 버전을 사용하고 있습니다.

Discourse 임베딩은 다음과 같이 구성되어 있습니다:

허용된 호스트: blog.neverlocal.com
경로 허용 목록: */
게시할 카테고리: Blog
게시자: system

임베딩 코드는 다음과 같습니다:

  <div id='discourse-comments' style="display: none"></div>
  <meta name='discourse-username' content='system'>
  
  <script type="text/javascript">
    DiscourseEmbed = {
      discourseUrl: 'https://forum.neverlocal.com/',
      discourseEmbedUrl: '{{site.url}}{{page.url}}',
      // className: 'share-box',
    };
  
    (function() {
      var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
      d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
      (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
    })();
  </script>

현재 디버깅 목적으로 iframe을 표시하지 않고 있으며, 이것이 display: none으로 스타일링된 이유입니다.

불행히도 다음과 같은 오류에 직면했습니다:

Referer:https://blog.neverlocal.com/xxx

Referer가 전송되지 않았거나, 다음 호스트 중 어디에도 일치하지 않았습니다:

    blog.neverlocal.com.*

또한, 우리 포럼에 게시물이 생성되지도 않습니다.

참고로, 블로그에 접속하여 아무 게시물을 열고 개발자 도구를 통해 상황을 점검하시면 직접 확인하실 수 있습니다. 저는 막막해서 어떻게 해야 할지 모르겠으며, 포럼을 살펴봤지만 해결책이 되는 것 같지 않습니다.

도움을 주시면 감사하겠습니다!
Fab

네, 조금 진전이 있었습니다. 기본적으로 구독을 확인했다는 사실(이전에 시험 기간이 끝나고 있던 상태였습니다) 외에는 아무것도 변경하지 않았습니다. 구독이 활성화되어 있지 않으면 임베딩이 작동하지 않는 건가요?

이 외에도 여전히 문제가 있습니다. 바로 댓글 섹션의 iframe이 150px에 고정되어 있어 어떤 방식으로든 동적으로 업데이트되지 않는다는 점입니다. 이로 인해 댓글 섹션이 잘리고 ‘토론 계속하기’ 버튼이 보이지 않습니다. 포럼 여기저기를 찾아보았지만 해결 방법을 찾을 수가 없습니다.

이 부분에 대해 답변드리면, 아닙니다. 저희의 트라이얼 사이트에서는 임베딩과 관련된 제한 사항이 없습니다.

제가 아는 한, 이러한 문제는 이전에 발생한 적이 없습니다. 예를 들어, 이 블로그의 답변들을 참고해 주세요. PC 조립, 9부: 다운사이징

그럼 정말 이상하네요! 15일 전에 제가 뭘 잘못했는지 이해하려고 거의 미칠 뻔했어요. 그런데 오늘 확인해보니 7일 전에 모든 토픽이 자동으로 생성되었고, i-frame이 임베드되어 있었더라고요. 블로그에는 이 기간 동안 변경 사항이 적용된 적이 없었습니다.

제 지식 범위 내에서는 그런 문제를 경험해본 적이 없습니다. 예를 들어, 이 블로그의 댓글을 참고해 보세요. 컴퓨터 조립, 9부: 다운사이징

네, 저희가 원했던 바로 그 방식입니다. 다만 저희 경우에는 i-frame 높이가 150px로 제한되어 있습니다. i-frame 자체와 그것을 포함하는 div의 스타일링 방식과 관련이 있을까요?

그렇다고 생각합니다. iframe에 대한 사용자 정의 CSS 규칙이거나, 다른 사용자 정의 CSS에서 상속된 것일 가능성이 높습니다.

어떻게 디버깅해야 할지 전혀 감이 잡히지 않습니다! 개발자 도구를 사용해 보니, iframe이 처음에는 height 속성 없이 임베드됩니다. 약 1초 정도 지나면 height 속성이 150px로 설정됩니다. 이 데이터를 주고받는 자바스크립트 함수나 기타 메커니즘이 있을 것으로 추측하지만, 어디서 찾아야 하는지, 그리고 이 데이터가 어떻게 가져오는지도 모르기 때문에 애초에 디버깅하기가 매우 어렵습니다.