search

GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
698 stars 272 forks source link

Apply crossorigin to all CDN downloads #2438

Closed zachwhelchel closed 2 months ago

zachwhelchel commented 2 months ago

The codebase I'm using requires the Cross-Origin-Embedder-Policy to be set to require-corp or credentialless in order to support SharedArrayBuffer for security reasons. Most of Stream Chat UI still works but all the image thumbnails fail to load. If I add my own img element I can set crossorigin=anonymous on it. That makes the images load. But I'm not sure how to do this inside all the components individually. The image preview, the full screen image gallery, the GIF preview, etc etc. Is there a way to turn this on for all img tags within Stream's Chat UI?

MartinCupela commented 2 months ago

Hey @zachwhelchel have you tried to override the BaseImage component via the Channel props?

myandrienko commented 2 months ago

Hi @zachwhelchel, to add to the suggestion above, if you're fine with Cross-Origin-Embedder-Policy: credentialless, you shouldn't need any additional attributes on the images - so this might be an easier option.

zachwhelchel commented 2 months ago

@MartinCupela @myandrienko overriding the BaseImage hasn't worked for me. And Cross-Origin-Embedder-Policy: credentialless didn't change the need to have the anonymous tag for me. I ended up editing the source code to include crossorigin=anonymous and I have to remember to do that everytime before compiling to release a new version. Would love to have this as an option I can set so I don't have to edit the source code.

MartinCupela commented 2 months ago

@zachwhelchel can you share the info how you have overridden the BaseImage? If BaseImage is rendered in all the places and you provide your own implementation, where you render img element to you liking, why did you need to change the source?

zachwhelchel commented 1 month ago

@MartinCupela I don't have the code still. I couldn't find any good example code and I struggled to make it work myself. If you could point me towards the way to override it and make it behave the exact same except for the one change I need that would be great! I think every time I tried to make it work it wouldn't format right or the size would be off, etc. I couldn't figure out how to duplicate the existing object with a simple tweak.