✅ 문제 1

• 내 사이트에서 타사 쿠키(유튜브 쿠키)를 사용하기 때문에 발생한 보안 이슈이다.

✅ 문제 2

• react-youtube를 사용했을 때 오류가 발생

🤷 SameSite란?

• 사용하려는 쿠키가 타사의 것인지 확인하고, 그것을 사용해도 될 지 체크하는 것이다.
• SameSite에는 3가지 값이 있다.
  • Strict : 같은 사이트에서만!
  • Lax : 허용한 사이트에서만 (디폴트값)
  • None : 모든 사이트에서

🔍 원인 파악

❔ 문제 1

• 기존에는 Cookie의 SameSite defalut 값이 None으로 설정 되어 있었지만 최근에 Lax로 변경되면서 생긴 오류로 추정된다.

❔ 문제 2

• youtube 영상을 제어할 때 postMessage를 이용하여 제어할 수 있는데 보안상의 문제로 타겟 origin을 정확하게 입력하지 않으면 이벤트가 실행되지 않도록 막아서 생긴 문제 같다.

❗️ 문제가 되는 코드

StudyList.tsx

<iframe
       className="youtubeBox"
       src={info.link}
       title="YouTube video player"
       allow="accelerometer; 
       autoplay; 
       clipboard-write; 
       encrypted-media; 
       gyroscope; 
       picture-in-picture"
></iframe>

👍 해결 방안

1. 먼저 문제 2번에 대한 해결을 먼저 해야한다고 생각해서, origin을 직접 줬었지만, 해당 오류가 무한으로 발생하던 것에서 8번에 오류로 줄어들었지 근본적인 해결이 되지않았다.
2. 그래서 iframe 태그를 사용하여 직접 구현하였더니 해당 오류가 해결되었다.
3. 1번 문제도 같이 해결될 줄 알았으나 해결되지 않았고, document.tsx에서

   document.cookie = "crossCookie=bar; SameSite=None; Secure"

   을 통해 쿠키설정을 바꿔보려 시도했으나 NextJs에서 document를 불러오는 방식이 달라서 해당 부분을 수정하지 못했다.

느낀점

• 나름 오랜시간 고민하고 알아보았지만 근본적으로 해결하지 못한것 같다. cookie에 대해 공부를 해보며 NextJs에서 cookie설정 하는 방법을 다시 공부해보고 수정하려 한다.
• 또한 react-youtbe에서 영상의 동작을 조절하는 방법에대해 공부해야할 것 같다.

📄 참조

https://kenchoi.tistory.com/13