Allow video and audio elements in work content

Description

General

Users should be able to embed video and audio in their work content using the video and audio elements. They should not be able to use these elements in other fields.

We should allow simple video and audio elements (e.g. <video src="video url"></video>) and more complex ones with multiple source and track elements and fallback content, e.g.

Video

Attributes and values that should be automatically added on the video element:

  • controls

  • crossorigin="anonymous"

  • playsinline

  • preload="metadata"

Attributes that should be allowed on the video element:

  • class

  • dir

  • height

  • loop

  • muted

  • poster, but it's important to restrict the value to URLs and not JavaScript fragments due to an Opera 10.5 exploit

  • src

  • title

  • width

Audio

Attributes and values that should be automatically added on the audio element:

  • controls

  • crossorigin="anonymous"

  • preload="metadata"

Attributes that should be allowed on the audio element:

  • class

  • dir

  • loop

  • muted

  • src

  • title

Source

Attributes that should be allowed for the source element:

  • src

  • type

Track

Attributes that should be allowed for the track element:

  • default

  • kind

  • label

  • src

  • srclang

Blacklist

The src URLs of video, audio, source, and track elements should be checked against a single domain blacklist in the config file. This will allow us to block embeds from certain domains in case of abuse.

Initially, the blacklist should be empty.

Testing

Because this also does some refactoring, in addition to making sure the new audio and video tags and their attributes work, we should make sure that the current HTML tags continue to work. Please refer to the “HTML Tag Regression” page on the wiki for instructions.

For testing the audio and video tags:

Elz 20:39

this site has some good examples of things we want to strip out: https://html5sec.org/

just ctrl-f for audio and video

If you need some audio:

Elz 09:53

if anyone wants to test audio, wikipedia doesn't seem to block hotlinks:https://en.wikipedia.org/wiki/List_of_animal_sounds

And if you need some more info on the elements:

Activity

Show:
Sarken
October 28, 2019, 8:39 AM
Edited

I tried the same code with fallback text from above and can confirm it works as expected now! No extra br tags and all my HTML is still there:


It strips the onerror attribute from both the audio and source tags, preventing the security issue mentioned at the link.

If I try to include a script tag or other un-allowed HTML in the audio element as a fallback, it gets stripped. It gets stripped if I stuff it inside the source tag, too.


For the track tag, I can use all five permitted attributes from the issue description. However, if I include default, the output is default="" – it should be default="default". That’s the same issue as muted and loop on the source element.

 

redsummernight
November 5, 2019, 3:59 AM
Sarken
November 5, 2019, 4:22 AM

Tested . It doesn’t add the closing tags for track or source, and if I include closing tags, it strips them out. All good!

bing
November 5, 2019, 9:04 PM
  • I tested . When I added controls to the video tag, it was turned into controls=”controls” and default on a track element was turned into default=”default”. Further, loop=false and muted=”loud” was changed to loop=”loop” and muted=”muted”. This is even better behavior than without our parser, because I tested loop=false in a simple html page and Firefox interpreted it as loop=”false” and looped the video. \o/

  • I tested , by embedding an HD video, it was resized to fit inside the .userstuff container. When I embedded a 586x480px video and viewed it on a large viewport, the video was left at its own size and not scaled to fit the container. \o/

  • I tested and both the source and the track element weren’t auto-closed by the parser. When I closed them myself, that was undone by the parser upon save. \o/

Three out of three \o/

Sarken
November 6, 2019, 11:10 AM

james_ blacklisted manhattan-trash.net and bingelingftw.com.


Pasted in

After saving it was

Pasted in <audio src="http://manhattan-trash.net/fandom/podfic/files/pundit_rpf_foreign_bodies.mp3"></audio> and the entire thing got stripped out so attempting to post gave me a "content can't be blank" error.

Pasted in

After saving got

Pasted in <video src="https://www.bingelingftw.com/vids/InTheMoodForLove_WithoutYou_bingeling.mp4"> and got the same result of everything being stripped and a "content can't be blank" error.

All good, then!

DeployedToBeta

Assignee

Elz J

Reporter

Sarken

Roadmap

Works

Priority

Medium

Affects versions

Fix versions

Components

BackEnd

Difficulty

Medium

Milestone

Internal 0.9
Configure