문제

어느날 갑자기 회사 블로그 youtube iframe embed가 안되는 이슈가 제보됐다.

이미 iframe embed가 block되는 이슈를 겪어보았고, next.config.js 파일 히스토리를 확인해보니 다른 동료분께서 웹사이트 쪽도 cross-origin isolated 상태로 만들어버려서 iframe embed가 막히고 있었다.

태그에 credentialless 속성을 추가해도 해결되지 않았다.

문제 해결 과정

1. react 18 최신 버전인데도 불구하고 JSX에서 iframe에 credentialless 속성을 넣으면 에러를 띄우고 있었다.
2. 에러와 별개로 속성이 적용되리라 믿고 실행해 보아도 iframe embed는 막히고 있었고, inspector로 확인해보니 태그에 속성이 아예 들어가지 않고 있었다.
3. 야매 방법이지만 useEffect와 useRef를 이용해서 setAttribute로 iframe 태그에 credentialless 속성을 강제로 주입하였다.
4. 그래도 되지 않길레 useEffect를 사용해서 속성을 주입했으니까 html이 렌더링 되는 시점에는 credentialless 속성 없이 소스를 불러왔을테니 결과가 똑같은게 아닐까라는 생각을 했다.
5. iframe refresh 관련해서 구글링 해봤더니 src 속성에 똑같은 값 넣는 트릭으로(iframe.src = iframe.src) refresh를 할 수 있어서 해결되었다.