Wyświetl ukryty kod JavaScript na stronie. Ukryty tekst w JavaScript

Czy kiedykolwiek chciałeś ukryć przed obcymi osobami skrypt na swojej stronie, który wyświetla nierealistycznie piękne menu lub wykonywać inne czynności, których nie chciałbyś wkrótce widzieć na co drugiej witrynie?
Jeśli tak, to metoda opisana w tym artykule będzie dla Ciebie przydatna wraz z zaciemnianiem kodu. Jednocześnie od razu zastrzegam, że metoda nie jest w 100% skuteczna, ale prawdopodobnie uchroni Cię przed większością nieprofesjonalistów i niektórymi profesjonalistami.

Teoria Załóżmy, że mamy stronę nojs.php, a na niej skrypt secret.js, który należy ukryć. Przeglądarka i użytkownik mogą otrzymać skrypt z serwera w następujący sposób:

Załadowanie skryptu umieszczonego bezpośrednio na stronie lub wczytanego za pomocą DOM;

Wyświetl skrypt w oknie Kod źródłowy strony;

Zapisanie strony ze wszystkimi plikami na dysku twardym;

Wprowadzanie bezpośredniego adresu URL w pasku adresu.

W pierwszym przypadku przeglądarka musi wysłać nagłówek HTTP HTTP_REFERER.
W drugim i trzecim przypadku nie jest on przesyłany przez wszystkie przeglądarki (Chrome, FireFox wyświetlają wcześniej pobrany skrypt z pamięci podręcznej; Opera, IE pobierają skrypt ponownie, ale bez wysyłania strony odsyłającej).
W czwartym przypadku strona odsyłająca nie jest przesyłana przez żadną z czterech przeglądarek.
Jeśli dynamicznie wydamy JavaScript i sprawdzimy obecność nagłówka referer w żądaniu, to od razu zabezpieczymy się przed Operą i IE, ale w przypadku Crome i Firefoxa będziemy musieli wymyślić coś trudniejszego. Najpierw pobierzemy jeden skrypt, który z kolei pobierze inny skrypt, a oba pobrania zostaną sprawdzone pod kątem obecności strony odsyłającej http. Zostało naukowo ustalone, że jeśli dynamicznie utworzysz skrypt na stronie document.createElement("skrypt"), a następnie usuniesz go ze strony, skrypt będzie działał normalnie, ale nie zostanie zapisany Practicenojs.php strona ma na celu załadowanie skryptu 1.php
Znajdź JS Po 10 sekundach powinieneś zobaczyć ukryty skrypt działający w formie alertu, kliknij link po alercie, aby upewnić się, że zdarzenia również nie spadły. Pod tym linkiem możesz zobaczyć ukryty skrypt script1.php. Jego zadaniem jest dynamiczne ładowanie script2.php, jeśli istnieje nagłówek strony odsyłającej. Limity czasu można zmniejszyć w zależności od przybliżonego czasu wykonania ukrytego skryptu.
script2.php Jego zadaniem jest wygenerowanie końcowego skryptu, jeśli istnieje nagłówek strony odsyłającej
Wyniki W rezultacie otrzymujemy, że nie możemy ani zajrzeć do kodu źródłowego strony, ani pobrać ani zapisać ukrytego skryptu za pomocą czterech testowanych przeglądarek. Generalnie można to oglądać na dwa sposoby:

Kliknij link prowadzący bezpośrednio do skryptu2.php i znajdujący się na stronie naszej witryny;
Utworzenie żądania http wskazującego nagłówek strony odsyłającej.

Możesz zwiększyć skuteczność ukrywania się, stosując następujące metody:

Używając mod-rewrite, zamień script1.js i script2.js wysyłane do serwera odpowiednio na script1.php i script2.php, tak aby strona zawierała znajome pliki js, ponieważ php jest uderzający;

Uczyń fikcyjny scenariusz tak skomplikowanym, wiarygodnym i zagmatwanym, jak to tylko możliwe, tak aby osoba próbująca go przeanalizować bardzo cierpiała, zanim zorientuje się, że została oszukana;

Zaciemnianie kodu.

Najprostsze rozwiązanie umożliwiające pokazanie/ukrycie elementu dokumentu HTML za pomocą JavaScript. Szczegółowy opis istoty procesu i jego cech.

Zburzyć zwykłymi środkami ukrywać) lub pokaż (angielski) pokazywać) Element dokumentu HTML nie jest możliwy. Odbywa się to za pomocą właściwości CSS wyświetlacz Lub widoczność. Różnica między nimi jest taka widoczność, chociaż sprawia, że element HTML jest niewidoczny, zajmowana przez niego przestrzeń pozostaje z nim. Oczywiste jest, że jest on znacznie częściej używany wyświetlacz.

wyświetlacz (z angielskiego) wyświetlacz) to uniwersalna właściwość określająca sposób wyświetlania elementu w dokumencie.

Lista możliwych wartości właściwości CSS wyświetlacz, rozumiany przez różne przeglądarki, nie jest duży, ale to wystarczy.

blok - element jest pokazany jako element blokowy. Zastosowanie tej wartości do elementów inline, takich jak znacznik SPAN, powoduje, że zachowują się one jak bloki, tj. Podziały wierszy występują na początku i na końcu treści.
inline - element jest wyświetlany jako inline. Zastosowanie tej wartości do elementów blokowych, takich jak znacznik DIV, powoduje, że zachowują się one jak elementy wbudowane, tj. jego zawartość rozpocznie się w miejscu, w którym zakończył się poprzedni element.
list-item - element jest wyświetlany jako element blokowy i dodawany jest znacznik listy.
brak - ukrywa element w dokumencie. Przestrzeń, którą zajmuje, nie jest zarezerwowana, a strona internetowa powstaje tak, jakby element ten nigdy nie istniał.

Oczywiste jest, że aby zmienić właściwość CSS konkretnego elementu HTML, należy użyć skryptowego języka programowania. W naszym przypadku jest to JavaScript. Ale wszystko jest w porządku.

Pierwszym krokiem jest podjęcie decyzji, w jaki sposób dokładnie uzyskać dostęp do elementu HTML dokumentu. Można w tym celu skorzystać z metody getElemetById obiektu document, która zwraca odnośnik do elementu HTML dokumentu na podstawie wartości atrybutu id. Na przykład:

dokument.getElemetById("test")

Teraz musimy uzyskać dostęp do właściwości stylu odpowiedniego elementu HTML. Służy do tego właściwość style. Na przykład:

document.getElemetById("test").style.display

Pozostaje tylko utworzyć element sterujący, który zmieni wartość właściwości CSS wyświetlacz, w pewnym przypadku, na przykład onclick (kliknięcie myszą). Tutaj warto zwrócić uwagę na fakt, że aby rozwiązać zadanie, będziesz musiał sprawdzić aktualną wartość właściwości CSS wyświetlacz i zmień go na „przeciwny”. W naszym przypadku użyjemy wartości none do ukrycia i „pusty” do wyświetlenia. W drugim przypadku usuwamy właściwość CSS wyświetlacz w odpowiednim elemencie, co umożliwi poprawną pracę zarówno z blokowymi, jak i wbudowanymi elementami HTML.

Dla jasności podam następujący przykład:

zmiana funkcji(idName) ( if(document.getElementById(idName).style.display=="none") ( document.getElementById(idName).style.display = ""; ) else ( document.getElementById(idName).style .display = "none" ) return false; ) Witaj, świecie! Zmiana

Należy pamiętać, że znacznik DIV ma atrybut stylu ustawiony na display:none . Zatem? ustawiamy wartość właściwości CSS wyświetlacz domyślnie brak, tj. Element HTML będzie początkowo ukryty.

Witaj czytelniku.
W tym krótkim artykule chcemy Ci podpowiedzieć jak prawidłowo zoptymalizować kategorie dla sklepu internetowego.
Kiedy zaczynamy optymalizować tekst, najpierw konfigurujemy stronę pod kątem maksymalnej trafności. Jak to zrobić .
Ale w tej sytuacji często pojawia się następujący problem - trzeba dodać za dużo tekstu, a to nie pasuje do projektu witryny.
Dlatego musisz ukryć część tekstu przed użytkownikami, ale jeśli nagle odwiedzający będzie chciał go przeczytać, może go łatwo otworzyć.

Ciekawe rozwiązanie zostało wdrożone w hipermarkecie internetowym Rozetka. Oto przykład kategorii:

Kiedy klikniemy na ten link, pełny opis otworzy się bez ponownego ładowania strony. Jeśli chcesz wdrożyć to samo rozwiązanie, poniżej opisujemy, jak jest to realizowane w praktyce.
Problem ten można rozwiązać dzięki językowi programowania JavaScript.
JavaScript został pierwotnie stworzony, aby „ożywiać” strony internetowe.
Aby zainstalować skrypty JavaScript w tekście strony internetowej, należy wprowadzić deskryptor. Kod JavaScript znajduje się pomiędzy tagami. Kod można umieścić zarówno w treści tytułu strony (między tagami), jak i w treści strony (między tagami).
Aby skrypt zadziałał należy stworzyć funkcję, która będzie używana w dowolnej części serwisu. Użyjemy funkcji sh()

cii();
funkcja sh() (
informacje = dokument.getElementById("info");
przycisk = dokument.getElementById("przycisk");
if (info.style.display == "brak") (
info.style.display = "blok";
przycisk.style.display = "brak";
}
}

Aby wyświetlić na nim pracę skryptu, należy umieścić go w określonym miejscu w tym formularzu

Czytaj więcej...

TEKST, KTÓRY BĘDZIE UKRYTY

W tym miejscu wywoływana jest funkcja sh().
Aby domyślnie otwierać ukryty tekst w kodzie, zmień display:none na display:block

Oto przykład tego, co się stało po zastosowaniu funkcji do tekstu:

W tym przykładzie na stronie ukryto 3000 znaków tekstu SEO, które zostały napisane w celu promocji witryny. Po kliknięciu w link, sam link „Więcej szczegółów...” zniknie dzięki właściwości style.display określonej w funkcji.
W ten sposób możesz wdrożyć tę funkcjonalność. Jeśli masz jakieś pytania, zadaj je w komentarzach.

Szczerze mówiąc, żaden programista tego nie potrzebuje, w zasadzie każdy kod JavaScript jest łatwy do wyświetlenia w przeglądarce i dlatego nie ma szczególnego powodu, aby ukrywać swój kod. To jest, że tak powiem, widoczne, coś, czego nie da się ukryć. Są jednak ludzie, którzy bardzo wstydzą się pokazać komukolwiek swój kod, wierząc, że jest to własność, której nie można ukraść, powiedzmy, bibliotek. Stworzyłeś usługę online, specjalnie dla niej stworzyłeś potężną złożoną bibliotekę, która wykonuje określone operacje, nie ma odpowiedników twojej usługi, twojej biblioteki i, oczywiście, nie chciałbyś, aby każdy (programista) z łatwością zobaczył Twój skrypt i był mogę użyć twojego jako przykładu podobnego, a nawet lepszego. Oczywiście nie ma nic złego w zrobieniu czegoś lepszego, jest to ewolucja, ale z biznesowego punktu widzenia przynosi to korzyści tylko konkurencji. Co jest do tego potrzebne? Musisz tylko zrozumieć algorytm i spróbować go ulepszyć, a także opowiedzieć mi o swoich doświadczeniach na temat tworzenia ukrytych skryptów. Pierwszą rzeczą, której potrzebujemy, jest przetestowanie zadania na prawdziwym (lokalnym) serwerze, zrobię to za pomocą Denwer na serwerze lokalnym.

a) W celu przetestowania utwórz katalog na serwerze.
Wchodzę na dysk wirtualny, u mnie jest to dysk R, idę tam do folderu domowego

Utwórz katalog skryptów, a w środku utwórz folder www, na koniec otrzymasz: home/script/www/ - po tym pamiętaj o aktualizacji serwera (Uruchom ponownie Denwer)

b) Utwórz plik indeks.php - powiedzmy, że jest to nasza strona główna serwisu i tutaj musimy wyświetlić ukryte skrypty. Utwórz także folder „js” w tym katalogu.

Do naszego zadania potrzebne będą żądania AJAX, do tego możesz wykorzystać swoje funkcje wymierne, ale jeśli Twój projekt urośnie do rozmiaru wymagającego użycia efektów specjalnych, zdarzeń, podłącz bibliotekę, a ja wcześniej podłączę jQuery, więc w katalogu głównym folderu „js” » dodaj jquery.js.

Następnie utwórz nowy folder w tym samym folderze, będą w nim przechowywane skrypty, które będziemy musieli ukryć. Nazwę to „bezpieczeństwem”:

c) Wpisz wstępny kod do pliku Index.php

Jak widać jest blok

PHP przejmuje rolę czytania Twoich skryptów, które zostaną zablokowane na serwerze i nie będzie można uzyskać do nich dostępu.

Ale najpierw utwórzmy nasze skrypty, które chcemy ukryć.

d) W folderze „security” utwórz skrypt1.js i skrypt2.js o następującej treści odpowiednio:

To wystarczy jako przykład! Teraz, aby nie można było uzyskać do nich dostępu, musisz ustawić to na serwerze, odbywa się to dzięki plikowi .htaccess.

Htaccess to plik konfiguracyjny skonfigurowany przez programistę, użytkownika tego serwera.

Htaccess ma tę zawartość:

Następnie na żądanie:

Zobaczysz coś takiego:

W ten sposób Twój folder zabezpieczeń jest ukryty przed wścibskimi oczami i niedostępny.

Jeśli spróbujesz dołączyć skrypty:

W każdym razie Twoje pliki nie zostaną wykonane, ponieważ są one globalnie ukryte przez serwer

e) Wróć do bloku programu PHP w pliku Index.php

Chodzi o to, że PHP ma dostęp do wszystkich plików na serwerze, niezależnie od tego czy są ukryte czy nie, czyli jeśli napiszesz:

wtedy w tym przypadku zobaczymy zawartość naszego ukrytego skryptu.

Jednakże zawartość naszego skryptu nie będzie widoczna z innego serwera i zostanie zwrócony komunikat o błędzie 500. Działa to na naszą korzyść i uniemożliwia innym stronom odczytanie naszych ukrytych plików.

f) Tak będzie wyglądał końcowy wynik:

Teraz zastanówmy się, jak to wszystko działa. jQuery wykonuje żądanie pocztowe (pozwala to uniknąć dziur w działaniu indeksu php) do serwera „index.php?js=result”, następuje sprawdzenie, czy żądanie pochodzi z naszego serwera (funkcja strpos() i adres naszego serwera „HTTP:/ /script” – biorąc pod uwagę ten przykład), wówczas skrypt sprawdza zmienną POST, czyli adres naszego ukrytego skryptu i generuje wynik tekstowy. Metoda jQuery did() otrzymuje odpowiedź w postaci tej treści tekstowej, a tekst ten można już przekonwertować na działający javascript, robi się to za pomocą standardowej funkcji eval();

W rezultacie otrzymujemy nasz wynik; naszych skryptów nie można zobaczyć statycznie ani dynamicznie przez konsolę przeglądarki, ale łatwo jest zobaczyć ich pracę. Te skrypty i ich funkcje są łatwe do wykonania. Należy jednak dokładnie przemyśleć zastosowanie tej techniki, ponieważ w tym przypadku podnosi się kwestia wydajności i szybkości. Funkcja eval(code) jest uważana za złą wśród programistów JavaScript i zaleca się użycie jej nowej, analogowej funkcji („return” + kod), chociaż ta ostatnia nie może definiować funkcji wewnętrznie, to znaczy, jeśli twoja zmienna zawiera rekord definicji funkcji , code = „test funkcji() (alert(1);); test();”, wówczas kod nie zostanie wykonany, co oznacza, że eval() nadaje się na każdą okazję, choć ma swoje niuanse, o których trzeba jeszcze więcej poczytać.

Opis: Są sytuacje, w których nie chcesz wyświetlać całej zawartości strony na raz. Na przykład w sekcji „FAQ” wyświetl tylko nazwy pytań. A jeśli dana osoba jest zainteresowana odpowiedzią na określone pytanie, może otworzyć odpowiedź, a kiedy na nią spojrzy, może ją zamknąć. Dzięki temu strona jest wygodna i kompaktowa. I w tym celu przygotowałem prosty skrypt JavaScript, który pozwala otworzyć lub ukryć określony tekst (ogólnie określone elementy), czyli zrobić ukryty tekst w JavaScript.

Wynik: kliknij tytuł pytania. Jeśli klikniesz ponownie, odpowiedź zostanie ponownie zamknięta.

Pytanie nr 1

Odpowiedź 1.

Pytanie nr 2

Odpowiedź nr 2.

Kod JavaScript (wstaw pomiędzy tagami i):

funkcja rozwiń(id)(
obj = dokument.getElementById(id);
if (obj.style.display=="brak") obj.style.display="";
w przeciwnym razie obj.style.display="brak";
}

Kod HTML (wstaw pomiędzy znacznikami i):

Pytanie nr 1
Odpowiedź 1.
Pytanie nr 2
Odpowiedź nr 2.