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.
Attributes and values that should be automatically added on the video element:
Attributes that should be allowed on the video element:
Attributes and values that should be automatically added on the audio element:
Attributes that should be allowed on the audio element:
Attributes that should be allowed for the source element:
Attributes that should be allowed for the track element:
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.
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:
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:
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:
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.
Tested https://github.com/otwcode/otwarchive/pull/3676. Boolean attributes are formatted correctly. If I use muted or muted="" on audio/video and save the work, it becomes muted="muted". Same with loop (audio/video) and default (track).
Tested https://github.com/otwcode/otwarchive/pull/3675. Resize the browser window to be narrow, and the video player will shrink to fit.
Tested . It doesn’t add the closing tags for track or source, and if I include closing tags, it strips them out. All good!
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/
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.
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!