이메일에서 Vimeo 임베드 URL이 잘못 분석됩니다

Vimeo은 두 가지 유형의 URL을 제공합니다: 직접 링크(https://vimeo.com/508864124/fcbbcc92fa)와 임베드 링크(iframe에서 사용할 수 있지만 직접 클릭하면 작동하지 않음)

예를 들어:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
  1. 알림 이메일로 전송될 때, 직접 링크는 올바르게 표시되지만 iframe은 잘못된 URL을 가진 링크로 대체됩니다: https://player.vimeo.com/video/508864124?h=fcbbcc92fa 대신 https://vimeo.com/508864124?h=fcbbcc92fa

    더 나쁜 것은, 임베드 URL에 (유효한) 끝에 슬래시를 추가하면 이메일에서 비디오 ID가 제거됩니다: <iframe src="https://player.vimeo.com/video/508864124/?h=fcbbcc92fa" ...></iframe>가 https://vimeo.com/?h=fcbbcc92fa가 됩니다.

  2. iframe-to-URL 변환을 완전히 우회하는 방법이 있을까요? 투표와 이미 하고 있는 것처럼 "여기를 클릭하여 투표를 확인하세요"라고 표시되는 것과 같은 방식으로요

조금 까다롭네요. 이메일 프로세스에서 재처리(cooked)된 데이터를 리맵하는 방식을 수정하는 데 특별한 마법이 몇 가지 있습니다. 정리할 수 있겠죠.

일단 pr-welcome 라벨을 붙여두고, 이 문제가 몇 번 더 발생하면 우선순위를 다시 고려해 보겠습니다.

1개의 좋아요

샘, 감사합니다. [details] 태그를 사용하여 URL을 숨기지 않고도 이메일에서 URL이 표시되는 것을 방지할 수 있는 임시 해결책이 있을까요?

솔직히, 그 아래에 비원박스(non oneboxed) 링크를 강제하는 것 외에는 생각나는 우회 방법이 많지 않습니다.

https://vimeo.com/185876954
<https://vimeo.com/185876954>

https://vimeo.com/185876954
https://vimeo.com/185876954

1개의 좋아요

@Nacho_Caballero 제공해주신 예시는 비공개(unlisted) 영상에 관한 것이었습니다. 비공개 영상은 URL 구조가 다릅니다.

Vimeo의 요청에 따라 비공개 영상을 임베드하는 방식도 다르며, 관련 링크: Use oEmbed with private videos – Vimeo Help Center

위 문서를 참고하여 직접 임베드를 생성하는 것이 우회 방법이 될 수 있을 것 같습니다.

@sam
그리고 Discourse의 경우, 임베드 src URL을 직접 구성하는 대신 Vimeo API를 사용하여 가져오는 것이 더 나을 수 있습니다. 관련 링크: https://stackoverflow.com/questions/51414260/vimeo-url-ive-never-seen-before-with-two-different-ids-how-do-i-get-it-to-work . 그리고 해당 코드 라인: discourse/lib/onebox/engine/vimeo_onebox.rb at 657256a099a601a0694d11d15c42ad76988efe8c · discourse/discourse · GitHub

어쨌든 제 추측이 맞다면, 이는 이메일뿐만 아니라 일반적인 게시물 작성에도 영향을 미칠 것입니다: 1-Minute Audio Test for Stereo Speakers &amp; Headphones-2ZrWHtvSog4

iframe를 가져오기 위해 다음을 수행했습니다:

GET https://vimeo.com/api/oembed.json?url=https://vimeo.com/508864124/fcbbcc92fa
그 결과 다음을 얻었습니다.

{"type":"video","version":"1.0","provider_name":"Vimeo","provider_url":"https:\/\/vimeo.com\/","html":"<iframe src=\"https:\/\/player.vimeo.com\/video\/508864124?h=fcbbcc92fa&amp;app_id=122963\" width=\"426\" height=\"240\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>","width":426,"height":240,"domain_status_code":403,"video_id":508864124,"uri":"\/videos\/508864124:fcbbcc92fa"}

iframe의 UTF-8 디코딩 결과:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" width="426" height="240" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

iframe 자체

수정/업데이트:

수정을 위해 PR을 제출했습니다. 표준 유형이 아닐 때 Vimeo를 올바르게 캡처하지 못했던 것이 정규식 패턴 문제였던 것 같습니다. 따라서 정규식 패턴을 그에 맞게 변경했습니다.

1개의 좋아요

@ghassan 이 문제가 아직 해결되지 않았다는 것을 방금 알게 되었습니다.

iframe에 비공개(unlisted) 영상이 포함된 경우, 이메일에서 URL이 올바르게 변환되지 않습니다. 예를 들어:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>

위 코드는 (404 오류가 발생하는) 다음으로 변환됩니다: https://vimeo.com/508864124?h=fcbbcc92fa

올바른 URL은 다음과 같아야 합니다: https://vimeo.com/508864124/fcbbcc92fa

PR에서 추가하신 정규 표현식(regex)에 이메일 전송 시 ?h=를 /로 변환하는 추가 단계가 필요할 수도 있습니다.

다음 내용을 기억하고/요약해 보려고 합니다:

정리하자면,

  • Vimeo URL에는 다양한 형식이 있고, 우리가 겪는 문제는 이메일 관련 부분뿐이죠?
  • 이를 재현하려면 다음을 수행해야 합니다:
    • URL 또는 iframe을 주제에 붙여넣기 (이 경우의 모든 시나리오는 무엇인가요?)
    • 웹에서는 예상대로 작동해야 하지만, 주제의 내용으로 이메일이 전송되면 상황이 복잡해집니다

네. 당신이 한 정규식 변경 덕분에 iframe src URL(https://player.vimeo.com/video/508864124?h=fcbbcc92fa)을 인식할 수 있게 되어 더 이상 문제가 되지 않습니다. 문제는 전송되는 이메일에 있습니다.

일반적인 URL(https://vimeo.com/508864124/fcbbcc92fa)을 붙여넣으면 문제가 없습니다. iframe src(https://player.vimeo.com/video/508864124?h=fcbbcc92fa)인 경우에만 문제가 발생합니다.

현재 그렇게 작동하고 있습니다.

네. 현재 iframe src(https://player.vimeo.com/video/508864124?h=fcbbcc92fa)는 https://vimeo.com/508864124/fcbbcc92fa가 아니라 https://vimeo.com/508864124?h=fcbbcc92fa로 변환되고 있습니다.

비공개 Vimeo 영상을 사용하려면 프리미엄 계정이 필요하기 때문에 재현이 여전히 어렵습니다.

또한, 위의 비디오 예시는 특정 도메인에서만 로드되도록 설정되어 있는 것 같습니다. 제 샌드박스 인스턴스(https://discuss.gsgapp.io)에서도 로딩할 수 있도록 허용해 주실 수 있나요?

다시 한 번 명확히 하겠습니다. 이메일에서 영상이 재생되기를 기대하는 것은 아니지만, 사용자가 비디오 위치를 클릭하면 올바른 URL로 이동하길 기대하는 것이 맞나요? 제 이해가 맞나요?

완료했습니다 :+1:

그렇습니다 :+1:

도움 주셔서 감사합니다!

Aha가 이제 문제를 찾았어요:

즉, 현재 일어나고 있는 일은 다음과 같습니다. 원본 iframe 코드를 붙여넣으면 onebox 코드를 우회할 수 있고, 이 우회가 성공하면 결과 iframe 코드에 data-original-href가 포함되지 않습니다. 이 속성은 이메일 템플릿에서 사용되는 링크입니다.

data-original-href가 없으면 Discourse는 비디오가 무엇인지 추측하려고 하는데, 이는 마지막 / 뒤에 있는 값을 사용하는 방식이며, 당연히 비공개(unlisted) 비디오의 경우를 처리하지 못합니다.

예를 들어 브라우저의 개발자 도구/요소 검사를 확인해 보면, 원본 iframe 코드를 사용할 때의 결과 iframe은 다음과 같습니다:

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen ></iframe>

<iframe src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen=""></iframe>

반면, URL만 붙여넣어 Discourse가 iframe으로 변환하도록 하면 (예: https://vimeo.com/508864124/fcbbcc92fa), 결과는 다음과 같습니다:

<iframe class="vimeo-onebox" src="https://player.vimeo.com/video/508864124?h=fcbbcc92fa&amp;app_id=122963" data-original-href="https://vimeo.com/508864124/fcbbcc92fa" frameborder="0" allowfullscreen="" seamless="seamless" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>

두 번째 출력에서 추가된 data-original-href="https://vimeo.com/508864124/fcbbcc92fa" 속성을 주목해 보세요. 원본 iframe을 사용할 때 이 속성이 있으면 작동할 것 같지만, 실제로는 작동하지 않습니다. 아마도 Discourse가 원하는 속성을 자유롭게 추가할 수 없기 때문일 것입니다.

해결책을 제안할 수 있을 것 같습니다. 비디오가 목록에 공개되어 있는 경우에도 작동하도록 보장하면서, 이 과정에서 Vimeo의 일반적인 동작 방식을 발견했습니다. 일반적으로 공개된 모든 비디오는 vimeo.com/{id} 패턴을 따르지만, 슬래시를 추가하여 vimeo.com/{id}/anything 형태로 작성해도 정상적으로 작동합니다.

다음 예시를 고려해 보세요:

  • https://vimeo.com/767548129/estgsetgset
  • https://vimeo.com/767548129/hey-discurse
  • https://vimeo.com/767548129 표준 형태

위 URL들은 모두 동일한 비디오로 연결되므로, 수정 방법은 iframe src에서 URL을 생성할 때 vimeo.com/{첫 번째 슬래시 이후의 값}/{h= 파라미터 이후의 값} 형태로 구성하는 것입니다. 이렇게 하면 두 가지 경우 모두에서 정상적으로 작동할 것입니다.

제안된 수정 사항: FIX: vimeo iframe url when data-original-href is missing - Pull Request #18894 - discourse/discourse - GitHub

또한, 제 커밋을 체리픽(cherry-pick)해 적용해 둔 https://discuss.gsgapp.io 에서도 직접 테스트해 보실 수 있습니다.

저는 다음 4가지 경우로 직접 테스트했습니다:

  • 공개된 Vimeo 비디오 URL 붙여넣기
  • 비공개(미상장) Vimeo 비디오 URL 붙여넣기
  • 공개된 비디오의 기본 iframe 붙여넣기
  • 비공개(미상장) 비디오의 기본 iframe 붙여넣기

모든 경우에서 이메일에 올바른 URL이 생성되는 것을 확인했습니다.

하지만 혹시 모를 다른 모든 변형 사항에 대해서도 테스트해 보시고, 무엇보다 다른 기능이 깨지지 않는지 확인해 주시길 부탁드립니다.

이메일 템플릿 테스트 방법은 제게 다이렉트 메시지를 보낸 뒤, 받은 편지함에서 확인하는 방식이었습니다. (https://discuss.gsgapp.io 에 두 개의 계정을 등록해 두었기 때문입니다.)

2개의 좋아요

감사합니다! 저도 테스트해 봤는데 잘 작동합니다 :+1:

테스트:

병합되었습니다