Previzualizări live ale site-urilor într-un portofoliu: ce se strică și cum rezolvi

Portofoliul nostru arată site-urile clienților live, în pagină, ca vizitatorul să poată derula și naviga prin produsul real. Este un demo mai bun decât o captură de ecran. Este și un mic câmp minat, pentru că un site decide singur dacă poate fi încadrat.

Două antete decid totul

Un server poate trimite X-Frame-Options: DENY (sau SAMEORIGIN) ori mai noul Content-Security-Policy: frame-ancestors 'none'. Oricare dintre ele face browserul să refuze afișarea paginii într-un <iframe> de pe alt domeniu. Primești o casetă goală sau un mesaj de eroare al browserului, și nu există niciun eveniment JavaScript care să-ți spună ce s-a întâmplat.

Multe platforme de găzduire și framework-uri adaugă aceste antete implicit, dintr-un motiv bun: opresc clickjacking-ul. Portofoliul fondatorului nostru trimite frame-ancestors 'none', motiv pentru care apare ca o captură în secțiunea de proiecte, nu ca un cadru live.

Verifică pe server, nu în browser

Pentru că browserul nu-ți spune, verificarea trebuie să se întâmple pe server. Consola noastră de administrare are un buton „verifică încadrarea” care trimite o cerere către URL și inspectează antetele răspunsului. Dacă vreunul interzice încadrarea, proiectul este marcat și site-ul revine la o captură cu un link „deschide site-ul”. Rezultatul este salvat, ca pagina publică să nu ghicească niciodată.

Scalează cadrul, păstrează-l utilizabil

Un site de desktop înghesuit într-un card de 400 de pixeli arată stricat. Randăm cadrul la lățime de desktop (1280 px) și îl micșorăm cu un transform CSS, ca site-ul să arate cum l-a gândit designerul. Evenimentele de pointer rămân active, deci vizitatorii pot derula și da click în previzualizarea mică. Un buton de mărire deschide același site pe tot ecranul, cu lățimi de desktop, tabletă și telefon.

Nu încărca douăzeci de site-uri deodată

Fiecare cadru live este o încărcare completă de pagină. Creăm cadrul doar când cardul intră în ecran și arătăm captura până când cadrul s-a încărcat. Pe conexiuni lente, vizitatorul vede totuși ceva imediat.

Sandbox cu intenție

Atributul sandbox limitează ce poate face pagina încadrată. Permitem scripturi, formulare și acces same-origin ca site-ul să se comporte normal, și blocăm navigarea la nivel superior, ca un link din cadru să nu poată deturna pagina portofoliului.

Pe scurt

• Verifică X-Frame-Options și frame-ancestors pe server.
• Salvează rezultatul; revino la o captură de ecran.
• Randează la lățime de desktop și scalează cu transform.
• Încarcă leneș cadrele, câte unul per card, când sunt vizibile.
• Sandbox, dar păstrează scripturile și formularele.