โ
๋ฌธ์ 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>
๐ ํด๊ฒฐ ๋ฐฉ์
- ๋จผ์ ๋ฌธ์ 2๋ฒ์ ๋ํ ํด๊ฒฐ์ ๋จผ์ ํด์ผํ๋ค๊ณ ์๊ฐํด์, origin์ ์ง์ ์คฌ์์ง๋ง, ํด๋น ์ค๋ฅ๊ฐ ๋ฌดํ์ผ๋ก ๋ฐ์ํ๋ ๊ฒ์์ 8๋ฒ์ ์ค๋ฅ๋ก ์ค์ด๋ค์์ง ๊ทผ๋ณธ์ ์ธ ํด๊ฒฐ์ด ๋์ง์์๋ค.
- ๊ทธ๋์ iframe ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ง์ ๊ตฌํํ์๋๋ ํด๋น ์ค๋ฅ๊ฐ ํด๊ฒฐ๋์๋ค.
- 1๋ฒ ๋ฌธ์ ๋ ๊ฐ์ด ํด๊ฒฐ๋ ์ค ์์์ผ๋ ํด๊ฒฐ๋์ง ์์๊ณ , document.tsx์์
document.cookie = "crossCookie=bar; SameSite=None; Secure"
์ ํตํด ์ฟ ํค์ค์ ์ ๋ฐ๊ฟ๋ณด๋ ค ์๋ํ์ผ๋ NextJs์์ document๋ฅผ ๋ถ๋ฌ์ค๋ ๋ฐฉ์์ด ๋ฌ๋ผ์ ํด๋น ๋ถ๋ถ์ ์์ ํ์ง ๋ชปํ๋ค.
๋๋์
- ๋๋ฆ ์ค๋์๊ฐ ๊ณ ๋ฏผํ๊ณ ์์๋ณด์์ง๋ง ๊ทผ๋ณธ์ ์ผ๋ก ํด๊ฒฐํ์ง ๋ชปํ๊ฒ ๊ฐ๋ค. cookie์ ๋ํด ๊ณต๋ถ๋ฅผ ํด๋ณด๋ฉฐ NextJs์์ cookie์ค์ ํ๋ ๋ฐฉ๋ฒ์ ๋ค์ ๊ณต๋ถํด๋ณด๊ณ ์์ ํ๋ ค ํ๋ค.
- ๋ํ react-youtbe์์ ์์์ ๋์์ ์กฐ์ ํ๋ ๋ฐฉ๋ฒ์๋ํด ๊ณต๋ถํด์ผํ ๊ฒ ๊ฐ๋ค.
๐ ์ฐธ์กฐ
https://kenchoi.tistory.com/13