From d1972542b77e5f60afeb4abc771d1cb8cd787e50 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Fri, 19 Jan 2024 23:58:46 +0000
Subject: [PATCH] fix: iframe credentialless

---
 packages/app/src/Components/Embed/AppleMusicEmbed.tsx | 1 +
 packages/app/src/Components/Embed/HyperText.tsx       | 1 +
 packages/app/src/Components/Embed/MediaElement.tsx    | 1 +
 packages/app/src/Components/Embed/MixCloudEmbed.tsx   | 1 +
 packages/app/src/Components/Embed/SoundCloudEmded.tsx | 1 +
 packages/app/src/Components/Embed/SpotifyEmbed.tsx    | 1 +
 packages/app/src/Components/Embed/TidalEmbed.tsx      | 2 +-
 packages/app/src/Components/Embed/TwitchEmbed.tsx     | 2 +-
 packages/app/src/Components/Embed/WavlakeEmbed.tsx    | 1 +
 9 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/Components/Embed/AppleMusicEmbed.tsx b/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
index bba7e2c9..1684cb12 100644
--- a/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
+++ b/packages/app/src/Components/Embed/AppleMusicEmbed.tsx
@@ -6,6 +6,7 @@ const AppleMusicEmbed = ({ link }: { link: string }) => {
     <iframe
       allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
       frameBorder="0"
+      credentialless=""
       height={isSongLink ? 175 : 450}
       style={{ width: "100%", maxWidth: 660, overflow: "hidden", background: "transparent" }}
       sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation"
diff --git a/packages/app/src/Components/Embed/HyperText.tsx b/packages/app/src/Components/Embed/HyperText.tsx
index fd879145..d7bd51a2 100644
--- a/packages/app/src/Components/Embed/HyperText.tsx
+++ b/packages/app/src/Components/Embed/HyperText.tsx
@@ -47,6 +47,7 @@ export default function HyperText({ link, depth, showLinkPreview, children }: Hy
     if (youtubeId) {
       return (
         <iframe
+          credentialless=""
           className="-mx-4 md:mx-0 w-max my-2"
           src={`https://www.youtube.com/embed/${youtubeId}`}
           title="YouTube video player"
diff --git a/packages/app/src/Components/Embed/MediaElement.tsx b/packages/app/src/Components/Embed/MediaElement.tsx
index 09d054f6..cbc1d218 100644
--- a/packages/app/src/Components/Embed/MediaElement.tsx
+++ b/packages/app/src/Components/Embed/MediaElement.tsx
@@ -90,6 +90,7 @@ const VideoElement = ({ url }: VideoElementProps) => {
         "md:h-[510px]": !CONFIG.media.preferLargeMedia,
       })}>
       <video
+        crossOrigin="anonymous"
         ref={videoRef}
         loop={true}
         muted={!isMobile}
diff --git a/packages/app/src/Components/Embed/MixCloudEmbed.tsx b/packages/app/src/Components/Embed/MixCloudEmbed.tsx
index 47c9367e..3ebcc96f 100644
--- a/packages/app/src/Components/Embed/MixCloudEmbed.tsx
+++ b/packages/app/src/Components/Embed/MixCloudEmbed.tsx
@@ -10,6 +10,7 @@ const MixCloudEmbed = ({ link }: { link: string }) => {
     <>
       <br />
       <iframe
+        credentialless=""
         title="SoundCloud player"
         width="100%"
         height="120"
diff --git a/packages/app/src/Components/Embed/SoundCloudEmded.tsx b/packages/app/src/Components/Embed/SoundCloudEmded.tsx
index 424ce49b..dc790d4a 100644
--- a/packages/app/src/Components/Embed/SoundCloudEmded.tsx
+++ b/packages/app/src/Components/Embed/SoundCloudEmded.tsx
@@ -1,6 +1,7 @@
 const SoundCloudEmbed = ({ link }: { link: string }) => {
   return (
     <iframe
+      credentialless=""
       width="100%"
       height="166"
       scrolling="no"
diff --git a/packages/app/src/Components/Embed/SpotifyEmbed.tsx b/packages/app/src/Components/Embed/SpotifyEmbed.tsx
index 93fc14d2..5193c08c 100644
--- a/packages/app/src/Components/Embed/SpotifyEmbed.tsx
+++ b/packages/app/src/Components/Embed/SpotifyEmbed.tsx
@@ -3,6 +3,7 @@ const SpotifyEmbed = ({ link }: { link: string }) => {
 
   return (
     <iframe
+      credentialless=""
       style={{ borderRadius: 12 }}
       src={convertedUrl}
       width="100%"
diff --git a/packages/app/src/Components/Embed/TidalEmbed.tsx b/packages/app/src/Components/Embed/TidalEmbed.tsx
index 3cd58c8e..ce9ce800 100644
--- a/packages/app/src/Components/Embed/TidalEmbed.tsx
+++ b/packages/app/src/Components/Embed/TidalEmbed.tsx
@@ -52,7 +52,7 @@ const TidalEmbed = ({ link }: { link: string }) => {
         {link}
       </a>
     );
-  return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} />;
+  return <iframe src={source} style={extraStyles} width="100%" title="TIDAL Embed" frameBorder={0} credentialless="" />;
 };
 
 export default TidalEmbed;
diff --git a/packages/app/src/Components/Embed/TwitchEmbed.tsx b/packages/app/src/Components/Embed/TwitchEmbed.tsx
index 2151db82..8f651ab3 100644
--- a/packages/app/src/Components/Embed/TwitchEmbed.tsx
+++ b/packages/app/src/Components/Embed/TwitchEmbed.tsx
@@ -2,7 +2,7 @@ const TwitchEmbed = ({ link }: { link: string }) => {
   const channel = link.split("/").slice(-1);
 
   const args = `?channel=${channel}&parent=${window.location.hostname}&muted=true`;
-  return <iframe src={`https://player.twitch.tv/${args}`} className="w-max" allowFullScreen={true}></iframe>;
+  return <iframe src={`https://player.twitch.tv/${args}`} className="w-max" allowFullScreen={true} credentialless=""></iframe>;
 };
 
 export default TwitchEmbed;
diff --git a/packages/app/src/Components/Embed/WavlakeEmbed.tsx b/packages/app/src/Components/Embed/WavlakeEmbed.tsx
index aa14a7b4..97224bac 100644
--- a/packages/app/src/Components/Embed/WavlakeEmbed.tsx
+++ b/packages/app/src/Components/Embed/WavlakeEmbed.tsx
@@ -3,6 +3,7 @@ const WavlakeEmbed = ({ link }: { link: string }) => {
 
   return (
     <iframe
+      credentialless=""
       style={{ borderRadius: 12 }}
       src={convertedUrl}
       width="100%"