javascript setAttribute use an unauthenticated fetch in CSS

bourgeoa commented 2 years ago

@timbl @timea-solid

In SolidOS you need to be be able to load authenticated resources. The setAttribute javascript function returns a 401 error in CSS, not in NSS

img.setAttribute('src', image.uri)

A solution is to fetch download with blob in all concerned app/functions

      // img.setAttribute('src', image.uri)

      // get image with authenticated fetch
      store.fetcher._fetch(image.uri)
        .then(function(response) {
          return response.blob()
        })
        .then(function(myBlob) {
          const objectURL = URL.createObjectURL(myBlob)
          img.setAttribute('src', objectURL) // w640 h480 //
        })

This solution as been implemented in humane.pane, image and showpane

The issue appears to remain in some other panes like video-pane or contacts-pane

Shall we install the same code or try to run first without and if it fails with the objectURL ? The impact (I 'm not sure) is stream loading

bourgeoa commented 2 years ago

see issue https://github.com/CommunitySolidServer/CommunitySolidServer/issues/1392

timea-solid commented 2 years ago

@bourgeoa i would say let's have the same code in place. I was wondering if we can centralize this code... maybe make it part of solid-ui or in solid-panes and just use it exactly the same in all places.

jeff-zucker commented 2 years ago

I use this same kind of work-around with RSS - fetch it and add it to the iframe.srcDoc rather than trying to just add the uri to iframe.src. So if we centralize code, we may want to look for everywhere we currently use setAttribute on either img or iframe. This might solve some problems with Dokeli.

SolidOS / contacts-pane

javascript setAttribute use an unauthenticated fetch in CSS #71