iframe-hiekkalaatikko ja Permissions Policy
Rajoita upotettua sisältöä sandbox- ja Permissions-Policy-attribuuteilla
iframe-hiekkalaatikko ja Permissions Policy on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Miksi sandbox-iframeja käytetään
Iframeen upotetulla epäluotettavalla sisällöllä, kuten kolmannen osapuolen vimpaimilla, käyttäjien lähettämien HTML-esikatseluilla ja upotetuilla peleillä, ei pitäisi olla kaikkia selaimen ominaisuuksia käytettävissään. sandbox-attribuutti rajoittaa sitä, mitä iframe voi tehdä, ja vähentää vahinkoja, jos sisältö osoittautuu haitalliseksi.
Tyhjä sandbox = suurimmat rajoitukset
<iframe sandbox src="..."> ilman arvoa ottaa käyttöön kaikki rajoitukset: ei skriptejä, lomakkeita tai ponnahdusikkunoita, ei ylätason navigointia eikä liitännäisiä, ja iframe käsitellään yksilöllisenä originina. Käyttäkää tätä lähtökohtana ja lisätkää vain ne ominaisuudet, joita upotettu sisältö tarvitsee.
Ominaisuuksien lisääminen
Sandbox-tunnisteet ottavat käyttöön tiettyjä ominaisuuksia uudelleen: sandbox="allow-scripts allow-same-origin" sallii skriptien suorittamisen ja saman originin käytön. Kukin tunniste lieventää yhtä rajoitusta; yhdistäkää vain se vähimmäisjoukko, jota iframe todella tarvitsee.
<iframe sandbox="allow-scripts allow-same-origin" src="https://embed.example.com/widget"></iframe>Yleiset tunnisteet
allow-scripts ottaa JavaScriptin käyttöön. allow-forms sallii lomakkeiden lähettämisen. allow-popups sallii window.openin käytön. allow-same-origin estää iframea käsittelemästä yksilöllisenä originina (tarvitaan localStoragea varten). allow-top-navigation sallii ylätason ikkunan navigoinnin.
Vaarallinen yhdistelmä
Kun allow-scripts ja allow-same-origin yhdistetään iframeen, jota myös isännöitte itse, iframe saa täyden pääsyn originiinne — mukaan lukien mahdollisuuden poistaa oma sandboxinsa. Yhdistäkää nämä vain luotetulle sisällölle; epäluotetun sisällön tapauksessa jättäkää allow-same-origin pois.
Permissions Policy
Permissions Policy (aiemmin Feature Policy) määrittää, mitä selaimen API:ita, kuten kameraa, mikrofonia, paikannusta, koko näytön tilaa ja automaattista toistoa, sivu ja sen iframet voivat käyttää. Määrittäkää käytäntö ylätasolla: Permissions-Policy: geolocation=() estää paikannuksen kaikkialla.
Iframe-kohtainen käyttöoikeus
Iframen allow-attribuutti ohittaa ylätason käytännön kyseisen iframen osalta: <iframe allow="camera; microphone"> sallii näiden API:iden käytön iframessa, vaikka ylätason oletuskäytäntö estäisi ne.
<iframe
src="https://video-call.example.com"
allow="camera; microphone; fullscreen"
sandbox="allow-scripts allow-same-origin">
</iframe>Käyttöoikeuksien luettelo
Luettelo elää edelleen: camera, microphone, geolocation, accelerometer, gyroscope, magnetometer, payment, usb, midi, fullscreen, autoplay, picture-in-picture ja kymmeniä muita. Käykää luettelo läpi ja estäkää nimenomaisesti kaikki ominaisuudet, joita sivunne ei tarvitse.
Käytäntörikkomuksista ilmoittaminen
Permissions-Policy ilmoittaa rikkomuksista määritettyyn päätepisteeseen CSP:n report-uri-määrityksen tapaan. Käyttäkää tätä siirtymän aikana: ottakaa käyttöön tiukka käytäntö, seuratkaa, mikä rikkoutuu, ja lieventäkää käytäntöä sen jälkeen harkitusti vain oikeutettujen ominaisuuksien osalta.
Origin-eristys
Asettakaa arkaluonteisille sivuille Cross-Origin-Opener-Policy: same-origin ja Cross-Origin-Embedder-Policy: require-corp. Tämä eristää sivun cross-origin-ikkunoista, suojaa Spectren kaltaisilta ajoitushyökkäyksiltä ja mahdollistaa SharedArrayBufferin käytön.
Kerroksellinen suojaus
Sandbox, Permissions Policy, CSP ja COOP/COEP muodostavat yhdessä useita suojakerroksia. Kukin niistä suojaa erilaiselta hyökkäysluokalta. Kolmannen osapuolen sisällön upottaminen on niin riskialtista, ettei yksikään yksittäinen lievennyskeino riitä — yhdistäkää ne, jotta yhden keinon ohitus havaitaan toisella.
Testaus
Tuokaa sandbox- ja käyttöoikeusrikkomukset esiin Chromen DevToolsin Network- ja Issues-paneeleissa. Monet rikkomukset ovat hiljaisia (API palauttaa vain arvon undefined tai hylkää promisen); nimenomaiset ilmoituspäätepisteet auttavat havaitsemaan ne tuotannossa.
Tietotesti
Miksi yhdistelmä sandbox="allow-scripts allow-same-origin" voi olla vaarallinen omassa originissanne isännöidylle iframelle?
Yhteenveto
Käyttäkää iframeissa sandboxia oletusarvoisesti ja lisätkää vain sisällön tarvitsemat tunnisteet. Välttäkää yhdistelmää allow-scripts+allow-same-origin epäluotetulle sisällölle. Käyttäkää Permissions Policyä tehokkaiden API:iden estämiseen koko sivustolla ja iframen allow-attribuuttia poikkeusten myöntämiseen. Yhdistäkää nämä CSP:n ja COOP/COEP:n kanssa kerrokselliseksi suojaukseksi.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”iframe-hiekkalaatikko ja Permissions Policy” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “iframe-hiekkalaatikko ja Permissions Policy”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”iframe-hiekkalaatikko ja Permissions Policy”?
Rajoita upotettua sisältöä sandbox- ja Permissions-Policy-attribuuteilla Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”iframe-hiekkalaatikko ja Permissions Policy”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Content Security Policy: meta http-equiv
- XSS innerHTML:n kautta ja sen estäminen
- iframe-hiekkalaatikko ja Permissions Policy
- HTTPS ja Subresource Integrity