From 69715a1a225060c76592e788d0f8a31712078f89 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sat, 4 Jul 2026 11:43:49 +0400
Subject: [PATCH] =?UTF-8?q?fix:=20remplacer=20router.asPath=20mort=20et=20?=
 =?UTF-8?q?s=C3=A9curiser=20les=20iframes=20tierces?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/teks/entegre-mizik.js | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/components/teks/entegre-mizik.js b/components/teks/entegre-mizik.js
index ef09eec..df57a15 100644
--- a/components/teks/entegre-mizik.js
+++ b/components/teks/entegre-mizik.js
@@ -2,7 +2,7 @@
 
 import {Box, IconButton} from '@mui/material'
 import PropTypes from 'prop-types'
-import {useRouter} from 'next/navigation'
+import {usePathname} from 'next/navigation'
 
 import {
   Tidal,
@@ -69,10 +69,12 @@ function RannIframe({plateforme, url, titre, isMobile}) {
       {plateforme === 'Tidal' && (
         <iframe
           src={src}
+          title={titre}
           allowFullScreen='allowfullscreen'
           frameBorder='0'
           width={`${isMobile ? '100%' : '50%'}`}
           height='96px'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
@@ -90,38 +92,44 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
       {plateforme === 'Deezer' && (
         <iframe
-          title='deezer-widget'
+          title={titre || 'deezer-widget'}
           frameBorder='0'
           src={src}
           allow='encrypted-media; clipboard-write'
           allowtransparency='true'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Spotify' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='80'
           frameBorder='0'
           allowtransparency='true'
           allow='encrypted-media'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Soundcloud' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='166'
           scrolling='no'
           frameBorder='no'
+          sandbox='allow-same-origin allow-scripts allow-popups'
         />
       )}
 
       {plateforme === 'Applemusic' && (
         <iframe
           src={src}
+          title={titre}
           width={`${isMobile ? '100%' : '50%'}`}
           height='175'
           frameBorder='0'
@@ -136,7 +144,7 @@ function RannIframe({plateforme, url, titre, isMobile}) {
 
 function EntegreMizik({parole, isMobile}) {
   const [chwaMizik, meteChwaMizik] = useState(null)
-  const router = useRouter()
+  const pathname = usePathname()
   const {streamAudio, slug, okiMizikID, gadeEmbed, titre} = parole
 
   const filteredKouteyAchtey = streamAudio.filter(({plateforme}) => plateforme === 'Tidal' || plateforme === 'Spotify' || plateforme === 'Deezer' || plateforme === 'Soundcloud' || plateforme === 'Applemusic')
@@ -150,10 +158,10 @@ function EntegreMizik({parole, isMobile}) {
   }
 
   useEffect(() => {
-    if (router.asPath === `/paroles/${slug}` || router.asPath === `/paroles/${slug}#${slug}`) {
+    if (pathname === `/paroles/${slug}`) {
       meteChwaMizik(null)
     }
-  }, [router, slug])
+  }, [pathname, slug])
 
   return (
     <Box align='center'>
@@ -162,7 +170,7 @@ function EntegreMizik({parole, isMobile}) {
           key={id}
           aria-label='player'
           size='large'
-          onClick={() => handleClick(plateforme, url)}
+          onClick={() => handleClick(plateforme, url, titre)}
         >
           {kouteyAchteyIcons[plateforme]}
         </IconButton>