iframe element osadza inne strony internetowe bezpośrednio na bieżącej stronie. HTML5 wprowadza trzy nowe atrybuty do tego elementu, aby pomóc rozwiązać problemy związane z bezpieczeństwem i użytecznością HTML4 iframe realizacja.
Atrybut „piaskownica”
piaskownica atrybut iframe element jest użyteczną funkcją zabezpieczającą dla ramek iframe. Kiedy umieścisz go w iframe element, agent użytkownika nie zezwala na funkcje, które mogą stanowić zagrożenie dla bezpieczeństwa witryny i jej użytkowników.
Na przykład:
instruuje przeglądarkę, aby nie zezwalała na wszystkie funkcje, które mogą stanowić zagrożenie dla bezpieczeństwa — więc żadnych wtyczek, formularzy, skryptów, linków wychodzących, ciasteczka, pamięć lokalna i dostęp do strony tej samej witryny.
Następnie, używając piaskownica wartości słów kluczowych, ponownie włącz niektóre funkcje. Te słowa kluczowe to:
- formularze zezwalające: Zezwól na przesyłanie formularzy.
- zezwalaj na to samo pochodzenie: Zezwól skryptom na dostęp do treści takich jak pliki cookie z tej samej domeny źródłowej.
- skrypty-zezwól: Zezwalaj na uruchamianie skryptów w tej ramce IFRAME.
- zezwól na górną nawigację: Zezwól linkom iframe i skryptom na cel „_top”
Nie ustawiaj obu skrypty-zezwól i zezwalaj na to samo pochodzenie słowa kluczowe razem na tym samym iframe. Jeśli to zrobisz, osadzona strona może następnie usunąć piaskownica atrybut, negując jego zalety związane z bezpieczeństwem. .
Atrybut „srcdoc”
srcdoc atrybut daje projektantowi stron internetowych większą kontrolę nad elementami iframe, a także większe bezpieczeństwo. Zamiast linkowania do strony internetowej w innym miejscu URL, projektant stron internetowych umieszcza kod HTML, który ma być wyświetlany w iframe w środku srcdoc atrybut.
Umieszczając kod HTML utworzony przez niezaufane źródło, takie jak formularz, w iframe możesz umieścić niezaufane treści w piaskownicy i nadal wyświetlać je na stronie. Przykładem są komentarze na blogu. Większość blogów oferuje tylko ograniczoną liczbę tagów HTML, których komentatorzy mogą używać w swoich komentarzach. Ale umieszczając te komentarze w piaskownicy iframe używając srcdoc atrybut, komentarze mogą być bardziej niezawodne, a jednocześnie chronić witrynę jako całość.
Bezpieczeństwo i iframe
Powyższe dwa atrybuty zapewniają bezpieczeństwo Twojego iframe elementy, ale nie stanowią ochrony przed wszystkimi złośliwymi witrynami. Jeśli złośliwa witryna może przekonać odwiedzających Twoją witrynę do bezpośredniego dostępu do wrogich treści (na przykład przez wpisanie adresu URL w przeglądarce), nadal mogą zostać zaatakowani.
Jeśli możesz, ustaw zawartość, która znajduje się w piaskownicy iframe jak tekst/html-piaskownica Typ MIME.
Atrybut „bezszwowy”
bezszwowy atrybut jest atrybutem logicznym, który mówi przeglądarce, aby wyświetlić iframe jakby była częścią dokumentu nadrzędnego. Jeśli chcesz swój iframe aby wyświetlać płynnie, po prostu umieść ten atrybut w elemencie:
Ale robienie iframe seamless to coś więcej niż tylko wygląd, to także sposób interakcji strony z ramką. Kilka porad:
- Linki w iframe otworzy się w oknie nadrzędnym, chyba że iframe strona ma ustawiony cel „_SELF”.
- CSS w iframe zostanie dodany do kaskady całego dokumentu.
- Główny element iframe strona jest uważana za dziecko iframe.
- Szerokość i wysokość iframe są ustawione w podobny sposób jak inne elementy blokowe zostanie ustawiony.
- Gdy dokument nadrzędny jest przeglądany przez narzędzie do renderowania mowy, takie jak czytnik ekranu, iframe będzie odczytywany bez ogłaszania go jako osobnego dokumentu.
Wszelkie skrypty w dokumencie nadrzędnym wpłynęłyby na iframe dokument w ten sam sposób. Na przykład, jeśli skrypt wyświetla listę wszystkich ramek na stronie, linki w iframe zostanie również wymieniony.
Innymi słowy, bezszwowy atrybut robi dużo więcej niż tylko usuwa obramowania z iframe. Jeśli zamierzasz ustawić iframe Aby zapewnić bezproblemowe działanie, należy być bardzo pewnym zawartości, aby nie dodać żadnego zagrożenia bezpieczeństwa do swojej witryny poprzez osadzenie złośliwej witryny.