Protected music & video files get 401 on CSS even if authenticated

[timbl]

When you try to play misc files which need tyou to be logged in, CSS returns 401 error and the browwser does nothing about it. Just like the problem with images in IMG tags in the html.

eg fails:

https://timbl.com/timbl/Public/Test/Protected/Les_Hayden_-_01_-_Gift_Horse.mp3_.mp3

compare with public unprotected file does nt have the same problem

https://timbl.com/timbl/Public/Test/Music/Les%20Hayden/Proverbs/Les_Hayden_-_01_-_Gift_Horse.mp3_.mp3

[josephguillaume]

Presumably this is the line that needs to change:

solid-panes/src/audio/audioPane.js

Line 159 in 32b73b7

audio.setAttribute('src', song.uri)

[bourgeoa]

@josephguillaume yes
We used blob for images. But we may have a size issue with audio and surely video
Are you interested to make a PR.
https://developer.mozilla.org/en-US/docs/Web/API/Streams_API/Using_readable_streams

I have created the https://github.com/SolidOS/solid-panes/tree/fetchMediaStreams branch

[josephguillaume]

I've never worked with ReadableStream before, so I might start by reading up and then see. Thanks!

[bourgeoa]

Found some documentation using fetch and new MediaSource.

• https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/MediaSource
• https://joshuatz.com/posts/2020/appending-videos-in-javascript-with-mediasource-buffers/
• https://img.ly/blog/how-to-stream-videos-using-javascript-and-html5/

There is also new MediaStream but seems more related to camera streams

• https://stackoverflow.com/questions/51843518/mediasource-vs-mediastream-in-javascript

[josephguillaume]

Thanks. Everything I found so far was similarly involved.
I even found some that loaded their own codec libraries, e.g. https://github.com/AnthumChris/fetch-stream-audio

• https://img.ly/blog/how-to-stream-videos-using-javascript-and-html5/

This one was the clearest but still ends up requiring specifying a codec, and the example uses split audio and video streams (hopefully not necessary!).

I'm not sure I'll get to it today, so if the solution becomes clear to you, please do go ahead...

The use of streams of variable quality was interesting too. I've already been thinking with slideshow that my photos are too large and take too long to load. Depending on bandwidth, the same concept applies to audio and video streaming. It'd be interesting to see what we can do about this, potentially even without server support. Definitely a new longer term issue though...

[josephguillaume]

Given how simple the audio tag is and how complex the Mediasource is, I wonder whether we should be using this bug to explore the comment:

https://forum.solidproject.org/t/is-it-secure-for-pods-to-serve-html-files/6379/9
"For handling files, I do think that Solid will need a way to request from a Server a time boxed & authentication bound URL for a resource, such that that URL can be used directly via browser native elements (img, audio, video, etc)"

A currently possible client-side solution would involve temporarily granting public access to the resource.

If we had server-side support to specify redirects (solid/specification#136) then we could issue a temporary unguessable url to provide a level of indirection/discourage linking directly to the resource.

If we had server-side support to specify symlink-like behaviours within a pod, then the temporary URL could directly return the resource.

To avoid completely public access, the server could support cookie or other built-in auth beyond the spec??

I.e. If solving this bug is urgent then maybe we just use the ACL solution. If it's not urgent, maybe we let the spec catch up?

[bourgeoa]

Resolved with the authenticated fetch blob solution used for tag.
This is not a streaming solution. The file is fully loaded before reading.

[bourgeoa]

For the records
I tried with new mediaSource but this did not add any reading while streaming and added mimeType complexity

      // https://stackoverflow.com/questions/39275481/chrome-to-play-a-video-that-is-being-downloaded-via-fetch-xhr/68778572#68778572
      const mediaSource = new MediaSource();
      mediaSource.addEventListener('sourceopen', async () => {
        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4');      
        const response = await kb.fetcher._fetch(subject.uri)
        const body = response.body
        const reader = body.getReader()      
        let streamNotDone = true;      
        while (streamNotDone) {      
          const {value, done} = await reader.read();          
          if (done) {streamNotDone = false; break;}
          await new Promise((resolve, reject) => {
            sourceBuffer.appendBuffer(value)
            sourceBuffer.onupdateend = (() => {
              resolve(true);
            })
          }) 
        }
      })
    video.setAttribute('src', URL.createObjectURL(mediaSource))

[josephguillaume]

Another possible solution came up that I wasn't aware of: apparently a service worker could be used to provide authenticated fetch behaviour, and it reportedly at least works on img tags.

solid/solid#143 (comment)

A fair bit of work would be needed still for the databrowser to install the service worker, and I believe we'd also need to confirm a secure way to pass tokens or an authenticated fetch function from the main thread to the service worker.