Forem Creators and Builders 🌱

Discussion on: Issues with YouTube video embed using liquid tag

Collapse
 
ioscasey profile image
Casey 💎

Alright, I've heard back from some of our engineers! It seems that YouTube can allow users to "Restrict Embedding" - which seems to be the case in this issue.

Thread Thread
 
ildi profile image
Ildi

So im assuming these YouTube users are chosing the restrict embedding on apps + block in all apps option. Also im assuming Forem is being considered an app instead of website in this case?

Does this mean that the normal iframe code embed would also not work on Forem since it's considered an app?

I just added one of the videos up top on my own personal website via the normal YouTube iframe embed code and it works without an error.

Thread Thread
 
ioscasey profile image
Casey 💎

I'm not entirely sure about the first part but I will tag in @djuber who may know more than me about this.

I can confirm that using an iFrame won't work either

Thread Thread
 
ildi profile image
Ildi

I should also mention that these videos seem to also work on Reddit

I guess Forem does not support YouTube iframe embeds?

Thread Thread
 
djuber profile image
Daniel Uber • Edited

This looks like it might be something with the configuration of the server (security policy would be my first guess).

Removing the infrastructure from the system, I can take the liquid tag input you used in a new article in a development server (at localhost:3000/, running forem's code but none of the other config like nginx or production mode hardening that might be present)

{% youtube P_XPDVOJvm0 %}
Enter fullscreen mode Exit fullscreen mode

and everything appears to work as expected (the iframe loads, the video is playable)

I do see a few header differences in the request, my local instance request to youtube includes a referer header (it's set to localhost:3000/). Omitting irrelevant headers from the requests:

local embedded video from liquid generated iframe

GET /embed/P_XPDVOJvm0 HTTP/1.1
Host: www.youtube.com
Referer: http://localhost:3000/
Enter fullscreen mode Exit fullscreen mode

forem.dev request (from this page):

GET /embed/P_XPDVOJvm0 HTTP/1.1
Host: www.youtube.com
Enter fullscreen mode Exit fullscreen mode

This might be tied to a difference in the values for the referrer-policy header in the forem response, in forem.dev I get back same-origin, my development server sends strict-origin-when-cross-origin.

If youtube's embed player required the referer to be present (for abuse tracking, I would assume), the absence of a referrer in the request might seem suspicious and cause problems. There's a hint that this is in fact a known behavior on a stack overflow answer and the answer following (with the "long read" section that was django specific, but definitely included "same-origin" as the policy setting).

I'm not sure what causes the same-origin referrer policy to be set but relaxing that seems to be one way to solve this.

Thread Thread
 
djuber profile image
Daniel Uber • Edited

github.com/forem/selfhost/blob/mai... I tracked down where this is set in self-hosted forem instances, you might try adjusting the /opt/forem/configs/traefik/dynamic.toml file's security headers to have ReferrerPolicy="strict-origin-when-cross-origin" (which is default and what we send in local development) and restarting traefik.

I'm not sure what the security implications of this are, but I suspect this resolves the issue you are seeing with embedding videos via the youtube liquid tag.

DEV.to sends strict-origin-when-cross-origin for this header (so some forem seems to use it just fine and youtube image embedding works correctly).

I'll talk this over with our internal teams to see what the reasoning behind the stricter configuration was here.

Thread Thread
 
ildi profile image
Ildi

Thank you digging into this Daniel! My Forem setup is part of the cloud offering so I wont be able to make these changes on my own, however I will be chatting with the Community Success team this week so I will bring this up with them as well.

Im hoping it will be possible for you and the team to set a less restrictive referrer policy if that is the only method of solving for this issue. Glad I got to learn that the error is not being caused by the video owner directly restricting embed access. Thanks again for the break down!