Embeds from YouTube now say "Video unavailable" when you press play

Description

Steps to reproduce

  1. Log in

  2. Post > New Work

  3. Fill in required information

  4. In the work content, paste the embed code for a YouTube video, e.g. <iframe width="560" height="315" src="https://www.youtube.com/embed/yPQfcG-eimk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

  5. Post

What happens

If you click play on the video, it says the video is unavailable.

What should happen

The video should play.

How to test

  • Check that YouTube embeds can play, especially ones that are currently broken on beta.

  • Test again (e.g. for Twitter requests) again but expect the header Referer: https://archiveofourown.org/ where it used to be none.

Activity

Show:
Sarken
December 9, 2019, 10:13 AM
Edited

This seems not great!

In embed_sanitizer.rb, I added a method to allow the new allow attribute on embeds from YouTube:

And I of course updated sanitize_embed to include that:

And I threw in an automated test, which was passing, so I assumed all was great:

But when I actually gave the code a whirl on my development environment, I still got a “Video unavailable” error even when all of the HTML was present and accounted for. 😭 The only difference between what I pasted (the code from this issue) and the output was the allowfullscreen attribute was written as allowfullscreen="" in the sanitized version:

ETA: The exact code, with or without the="" works on Dreamwidth, so maybe it has to do with my dev environment being insecure?

ETA 2: Disabling cross-origin restrictions in Safari shows that is indeed the source of the problem. (h/t to bingeling!) I’ve pushed the changes but I suspect we might want to whitelist certain values for allow so I haven’t submitted a pull request yet. Here is a list of possibilities. If anyone wants to figure out what we need, feel free to grab my branch and start from there.

Sarken
December 9, 2019, 9:13 PM

Disabling cross-origin no longer works despite being the identical code from several hours ago, so I am throwing my hands up in surrender.

Sarken
December 14, 2019, 9:48 AM

redsummernight 04:21

I think I cracked it

it's not the allow attribute, it's our new Referrer-Policy from

we set it to "same-origin" meaning we don't tell YT "this is from AO3"; some videos have embedding restrictions (whitelist or blacklist certain domains), so they won't play if no referrer is set, to be on the safe side

doesn't matter how old a video is

the quickest fix is to add referrerpolicy="strict-origin-when-cross-origin" to YT's iframes; not sure if that's the best referrerpolicy option, and not sure if editing every iframe element is a good idea or if there's a more global site setting we should use

but it's a start

Sarken
December 15, 2019, 4:06 AM

Embedded the video from the issue, which I had also been using on my dev environment. When I clicked play, it played.

Looks good!

Lady Oscar
December 18, 2019, 1:19 AM

Confirmed!

(Oddly, the video will play on Production with Safari 9.1.3, but won't with up to date Firefox or Chrome; it plays on Staging with all three browsers)

DeployedToBeta

Assignee

redsummernight

Reporter

Sarken

Roadmap

Works

Priority

High

Affects versions

Fix versions

Components

BackEnd

Difficulty

Medium

Milestone

Internal 0.9
Configure