Tagi związane z meta-informacjami

Ten artykuł wyjaśnia tagi związane z meta-informacjami.

Wyjaśnia tag <meta>, w tym kwestie związane z SEO, projektowaniem responsywnym i Content-Security-Policy.

YouTube Video

Tagi związane z meta-informacjami

Tag <meta>

1<meta charset="UTF-8">
2<meta name="viewport" content="width=device-width, initial-scale=1.0">

• Tag <meta> dostarcza metadane dla dokumentu HTML. Metadane nie są wyświetlane na stronie, ale są używane przez wyszukiwarki i przeglądarki. Tag <meta> jest używany do opisu strony, słów kluczowych, informacji o autorze oraz ustawień projektowania responsywnego.

Tag <meta name="viewport">

1<meta name="viewport" content="width=device-width, initial-scale=1">

• Tag <meta name="viewport"> kontroluje układ i skalowanie stron internetowych na różnych urządzeniach. Jest powszechnie używany w projektowaniu responsywnym, aby zapewnić prawidłowe wyświetlanie na urządzeniach mobilnych.

Tag <meta name="description">

1<meta name="description" content="An example webpage">

• Tag <meta name="description"> jest używany do krótkiego opisania zawartości strony internetowej. Wyszukiwarki korzystają z tego opisu, aby wyświetlić podsumowanie strony w wynikach wyszukiwania.

Tag <meta name="keywords">

1<meta name="keywords" content="HTML, CSS, JavaScript">

• Tag <meta name="keywords"> dostarcza listę słów kluczowych związanych z treścią strony. Wyszukiwarki używają tych słów kluczowych, aby lepiej zrozumieć treść strony.

Tag <meta name="author">

1<meta name="author" content="John Doe">

• Tag <meta name="author"> określa autora strony internetowej. Te informacje są głównie wykorzystywane przez wyszukiwarki i narzędzia do dokładnej identyfikacji autora strony.

Tag <meta http-equiv="refresh">

1<meta http-equiv="refresh" content="5; url=https://example.com">

• Tag <meta http-equiv="refresh"> służy do automatycznego odświeżania strony lub przekierowania na inny URL po określonym czasie. Jest przydatny do przeładowywania strony lub przekierowywania użytkownika.

Tag <meta http-equiv="cache-control">

1<meta http-equiv="cache-control" content="no-cache">

• Tag <meta http-equiv="cache-control"> jest używany do kontrolowania zachowania pamięci podręcznej strony internetowej. Może określić, czy strona ma być zapamiętywana w pamięci podręcznej, czy weryfikowana przy kolejnych odwiedzinach.

Tag <meta http-equiv="expires">

1<meta http-equiv="expires" content="Tue, 01 Jan 2025 00:00:00 GMT">

• Tag <meta http-equiv="expires"> ustawia datę wygaśnięcia treści strony. Po upływie określonej daty treść staje się przestarzała, a przeglądarka jest proszona o pobranie nowej wersji.

Tag <meta http-equiv="X-UA-Compatible">

1<meta http-equiv="X-UA-Compatible" content="IE=edge">

• Tag <meta http-equiv="X-UA-Compatible"> służy do określenia trybu zgodności dla przeglądarki Internet Explorer. Tag ten zapewnia, że przeglądarka używa odpowiedniej wersji silnika renderującego do wyświetlania strony.

Tag <meta http-equiv="content-security-policy">

Atrybut http-equiv="content-security-policy" w tagu HTML meta to funkcja umożliwiająca zastosowanie określonych zasad bezpieczeństwa w przeglądarce w celu zwiększenia bezpieczeństwa strony. Korzystając z tego atrybutu, deweloperzy stron mogą ustalać zasady dotyczące ładowania zasobów i wykonywania skryptów, aby zapobiegać atakom, takim jak XSS (Cross-Site Scripting) czy wstrzykiwanie danych.

Czym jest Content-Security-Policy?

Content-Security-Policy (CSP) to rodzaj nagłówka HTTP używanego do kontrolowania, jakie zewnętrzne zasoby (obrazy, skrypty, arkusze stylów itp.) strona internetowa może ładować i jakie rodzaje kodu mogą być wykonywane. Zazwyczaj jest przesyłany jako nagłówek HTTP, ale może być też zdefiniowany w HTML za pomocą tagu meta. Ta metoda pozwala na określenie CSP po stronie klienta zamiast ustawiania nagłówków po stronie serwera.

Na przykład możesz ustawić CSP w tagu meta w HTML w następujący sposób:.

1<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://example.com; script-src 'self' https://apis.google.com">

W tym przykładzie ustawiono następujące polityki:

• default-src 'self': Zasadniczo wszystkie zasoby są ładowane tylko z tego samego źródła (samego siebie).
• img-src https://example.com: Obrazy są ładowane wyłącznie z https://example.com.
• script-src 'self' https://apis.google.com: Skrypty mogą być wykonywane tylko z tego samego źródła lub z https://apis.google.com.

Różnice między http-equiv a nagłówkami HTTP

Zazwyczaj Content-Security-Policy jest wysyłany z serwera do klienta jako nagłówek HTTP. Jednak jeśli ustawisz to po stronie klienta za pomocą tagu meta, można to bezpośrednio zapisać w HTML.

Są jednak pewne istotne różnice między ustawieniem go jako nagłówka HTTP a określeniem w tagu meta:

1. Priorytet: CSP wysłane przez nagłówki HTTP ma pierwszeństwo przed tym określonym w tagu meta. Oznacza to, że jeśli CSP jest ustawione po stronie serwera, nie zostanie ono nadpisane przez tag meta użyty po stronie klienta.

2. Czas stosowania: CSP określone za pomocą nagłówków HTTP jest stosowane przed załadowaniem strony. Z drugiej strony, CSP określone za pomocą tagu meta jest stosowane podczas parsowania HTML, więc zasoby mogą być już załadowane.

Dyrektywy dostępne w CSP

W CSP stosowane są różne dyrektywy, aby określić polityki zezwalające lub zabraniające ładowania i wykonywania określonych typów zasobów. Typowe dyrektywy obejmują następujące:.

• default-src: Określa domyślną politykę źródła dla wszystkich zasobów. Ma zastosowanie do zasobów, które nie są określone przez inne dyrektywy.
• script-src: Określa źródło dla JavaScript. Aby zapobiec atakom XSS, możesz ograniczyć ładowanie skryptów z zewnętrznych stron.
• style-src: Określa źródło dla CSS. Ograniczając ładowanie arkuszy stylów z zewnętrznych źródeł, możesz zapobiec atakom na style twojej strony.
• img-src: Określa źródło dla obrazów. Możesz ograniczyć ładowanie obrazów z zewnętrznych źródeł.
• connect-src: Określa URL dozwolone dla XMLHttpRequests i połączeń WebSocket. To zapewnia bezpieczeństwo zewnętrznych komunikacji API i WebSocket.

Łącząc te dyrektywy, możesz stworzyć szczegółowe zasady dla zasobów na swojej stronie internetowej.

Praktyczne ustawienia CSP w celu zwiększenia bezpieczeństwa

Poniżej znajduje się przykład ustawień CSP w celu zwiększenia bezpieczeństwa Twojej strony internetowej. Może to zmniejszyć ryzyko ataków XSS i wycieków danych.

1<meta http-equiv="Content-Security-Policy"
2    content="default-src 'self'; script-src 'self' https://trusted-cdn.com; object-src 'none'; style-src 'self'; base-uri 'self'; form-action 'self';">

Następujące zasady są stosowane przy użyciu tej konfiguracji:

• default-src 'self': Wszystkie zasoby są ładowane tylko z tego samego źródła.
• script-src 'self' https://trusted-cdn.com: Skrypty są ładowane tylko z tego samego źródła lub z zaufanego CDN.
• object-src 'none': Tag object nie jest używany. Ma to na celu zapobieganie atakom opartym na technologii Flash lub wtyczkach.
• style-src 'self': Arkusze stylów są ładowane tylko z samego źródła.
• base-uri 'self': Podstawa URL ustawiona przez tag <base> jest ograniczona do samego źródła.
• form-action 'self': Cel wysyłania formularza jest ograniczony do samego źródła. Zmniejsza to ryzyko wysyłania danych formularza na zewnętrzne strony.

Wnioski

Używając http-equiv="content-security-policy", aby zdefiniować CSP w HTML, można poprawić bezpieczeństwo strony internetowej. Prawidłowo skonfigurowany CSP to potężne narzędzie, które zmniejsza ryzyko ataków XSS i wycieków danych oraz chroni Twoją stronę internetową.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video