eu tava rodando lighthouse no meu site esses dias pra ver como tava a performance e do nada apareceu um alerta vermelho enorme falando que meu site usa cookies de terceiros (ꐦ°᷄д°᷅)
eu fiquei tipo "como assim?? meu site é estatico, nao tem analytics, nao tem ads, nao tem nada". ai eu olhei o detalhe e era o embed do youtube. o videozinho q eu coloquei na pagina de hobbies tava jogando 4 cookies de tracking do google em todo mundo q entrasse no site.
isso acontece antes mesmo da pessoa clicar no play. só de abrir a pagina o google ja seta o YSC, o VISITOR_INFO1_LIVE e mais dois ai. e isso é o padrao do embed do youtube. todo mundo usa e ngm fala nada.
oq o embed padrao faz sem vc perceber
quando vc copia o codigo de embed do youtube, ele vem mais ou menos assim:
<iframe
src="https://www.youtube.com/embed/ESx_hy1n7HA"
frameborder="0"
allowfullscreen
loading="lazy">
</iframe>parece inocente ne. mas esse dominio youtube.com carrega o player junto com toda a maquina de rastreamento do google. ele seta cookies, manda seu referrer completo, e associa a visita ao perfil do usuario se ele ja tiver logado em algum servico google.
e tipo, vc nem pediu isso. so queria mostrar um video.
__Secure-YNID, YSC, __Secure-ROLLOUT_TOKEN e VISITOR_INFO1_LIVE. todos sao de tracking e rastreamento do google, e todos sao setados automaticamente so pelo fato do iframe existir na pagina.
a primeira solucao (e a mais importante)
o youtube tem um dominio alternativo chamado youtube-nocookie.com. ele foi feito justamente pra isso. nesse modo o player nao seta nenhum cookie ate o usuario realmente interagir com o video, tipo clicar no play.
a troca é ridicula de simples:
src="https://www.youtube.com/embed/ESx_hy1n7HA"
// vira
src="https://www.youtube-nocookie.com/embed/ESx_hy1n7HA"só isso. muda o dominio e pronto. o player funciona identico, tela cheia funciona, picture in picture funciona, autoplay funciona. a unica diferenca é q o google nao espiona seu visitante de graca.
eu fico me perguntando por que o youtube nao coloca esse dominio como padrao no botao de embed. mas ai eu lembro q o produto do google é vc, nao o player (⌐■_■)
referrerpolicy e sandbox
depois de trocar o dominio eu coloquei mais duas coisas no iframe. o referrerpolicy="strict-origin-when-cross-origin" manda so o dominio base pro youtube ao inves da url completa da pagina. antes ele sabia exatamente em qual pagina seu visitante tava.
e o sandbox="allow-scripts allow-same-origin allow-presentation" limita o q o iframe pode fazer. sem isso o player teorico pode abrir popups, navegar a janela do visitante pra outro lugar, ou submeter forms. com o sandbox ele fica presinho so no que precisa pra tocar video.
o codigo final ficou assim:
<iframe
src="https://www.youtube-nocookie.com/embed/ESx_hy1n7HA"
title="titulo do video"
frameborder="0"
allow="autoplay; picture-in-picture"
allowfullscreen
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-presentation">
</iframe>se vc comparar com o codigo q o youtube te da no botao de compartilhar, é quase o mesmo. só muda o dominio e adiciona duas linhas. mas a diferenca de privacidade é absurda.
bonus: o iframe é pesado pra performance
outra coisa q o lighthouse reclamou foi o peso do player. o embed do youtube carrega um monte de javascript, fontes, css e tracking. mesmo com loading="lazy", qdo o usuario scrolla ate o video ele baixa tudo isso de uma vez.
tem um padrao chamado facade q resolve isso. ao inves de colocar o iframe direto, vc coloca uma thumbnail estatica (pode ser ate a propria thumbnail do video) com um botao de play por cima. só quando a pessoa clica é q vc injeta o iframe no DOM via javascript.
eu nao implementei isso ainda no meu site pq o video ta la embaixo na pagina e o lazy loading ja ajuda bastante. mas se o video fosse o conteudo principal da pagina, o facade seria a melhor saida. vc economiza uns 500kb de scripts na carga inicial.
substitua o ID do video nesse URL: https://img.youtube.com/vi/ID_AQUI/maxresdefault.jpg. ai vc usa essa imagem como fundo de uma div com um botao de play por cima. no clique vc cria o iframe dinamicamente e troca a div pelo player.
enfim, se vc tem um site pessoal, um blog, um portfolio, e colocou um video do youtube la, da uma olhada nos cookies q ta sendo setado. provavelmente vc ta mandando seus visitantes pro google sem nem saber.
e tipo, nao é questao de "eu nao tenho nada a esconder". é questao de vc nao ser o produto de graca pra uma big tech só pq quis colocar um video de musica no seu cantinho da internet~ (´｡• ᵕ •｡`)