Скрытый код javascript просмотреть на странице. Как показать и скрыть фрагмент текста или картинку в html с помощью JavaScript

Хотелось ли Вам когда-нибудь спрятать от посторонних людей на своей страничке скрипт, который реализует нереально красивое появление меню или выполнение других действий, которые Вы бы не хотели видеть в скором времени на каждом втором сайте?
Если да, то способ изложенный в этой статье Вам пригодится совместно с обфускацией кода. При этом оговорюсь сразу, что способ не 100-процентный, но от большинства непрофессионалов и части профессионалов он возможно защитит.

Теория Допустим у нас есть страничка nojs.php, а на ней скрипт secret.js, который надо спрятать. Браузер и пользователь могут получить скрипт с сервера следующими путями:
  • Загрузка скрипта непосредственно размещенного на странице или подгруженного с помощью DOM;
  • Просмотр скрипта в окне Исходный код страницы ;
  • Сохранение страницы со всеми файлами на жесткий диск;
  • Ввод прямого URL в адресной строке.
    • В первом случае браузер обязательно передает http-заголовок HTTP_REFERER.
    Во втором и третьем случае он передается не всеми браузерами (Chrome, FireFox выдают ранее загруженный скрипт из кэша; Opera, IE загружают скрипт вновь, но уже без отправки referer).
    В четвертом случае referer не передается ни одним из этих четырех браузеров.
    Если выдавать JavaScript динамически с проверкой наличия заголовка referer в запросе, то мы сразу же защитимся от Opera и IE, но для Crome и Firefox придется придумать что-то позаковыристее. Мы загрузим сначала один скрипт, который в свою очередь загрузит другой скрипт, при этом обе загрузки будем проверять на наличие http-referer. Методом научного тыка установлено, что если динамически создать скрипт на странице document.createElement(«script»), а потом удалить его со страницы, то скрипт будет работать как обычно, но сохраняться он не будет.Практикаnojs.php Эта страничка несет в себе цель загрузить script1.php
    Найди JS Через 10 секунд Вы должны увидеть работу скрываемого скрипта в виде аллерта нажмите ссылку после алерта, дабы убедиться что события тоже не отвалились. По этой ссылке можно увидеть скрываемый скрипт script1.php Его задача: динамически загрузить script2.php, если есть заголовок referer. Таймауты можно уменьшить, в зависимости от примерного времени выполнения скрываемого скрипта.
    script2.php Его задача: выдать конечный скрипт, если есть заголовок referer
    Итоги В итоге мы получаем, что мы не можем ни посмотреть в исходном коде страницы, ни скачать, ни сохранить скрываемый скрипт средствами тестируемых четырех браузеров. Вообще же можно посмотреть его двумя способами:
    • Переход по ссылке прямо ведущей на script2.php и расположенной на странице нашего сайта;
    • Формирование http-запроса с указанием в нем заголовка referer.
    Повысыть эффективность скрытия можно такими методами:
  • С помощью mod-rewrite заменять идущие к серверу script1.js и script2.js на script1.php и script2.php соответственно, чтобы на странице были всем привычные файлы js, так как php резко бросается в глаза;
  • Сделать фиктивный скрипт максимально сложным, правдоподобным и запутанным, чтобы человек пытающийся его разобрать изрядно помучался перед осознанием того, что его обманули;
  • Обфускация кода.

    • Для полноценной и оптимальной работы веб-страниц в браузере необходимо, чтобы в нем был активирован javascript.

    Что это такое и как его включить, мы расскажем в этой статье.

    Сводная таблица Что такое javascript?

    ЯваСкрипт можно назвать мультипарадигмальным языком. Он имеет поддержку множества способов программирований. Например, объектно-ориентированное, функциональное и императивное.

    Данный вид программирования никак не связан напрямую с java. Основным синтаксисом этого языка программирования является язык Си, а также Си++.

    Основой веб-страниц браузеров является HTML-код, с помощью которого программисты добавляю на страницы различные интерактивные элементы.

    Если javascript в браузере отключен, интерактивные элементы работать не будут.

    Появился данный вид языка программирования благодаря совместной работе компаний Sun Microsystems и Netscape.

    Изначально ЯваСкрипт имел название LiveScript, но после того, как язык Java стал популярным среди программистов, компаниями-разработчиками было принято решение переименовать его.

    Маркетинговый отдел компании Netscape посчитал, что такое название увеличит популярность нового языка программирования, что, собственно, и случилось.

    Напомним, что ЯваСкрипт не имеет прямого отношения к Java. Это абсолютно разные языки.

    Возможности JavaScript

    Данный язык программирования имеется неограниченное количество возможностей за счет своей универсальности.

    Основными аспектами применения являются мобильные приложения для смартфонов, интерактивные веб-страницы сайтов и сервисов.

    Бо́льшую часть новшеств привнесло присоединение к проекту компании AJAX, которая предоставила возможности, используемые в языке на сегодняшний день.

    Для экономии трафика и увеличения удобства использования, ЯваСкрипт предоставляет возможность изменять страницы сайтов и сервисов небольшими частями незаметно для пользователя в режиме онлайн.

    Это не требует отключения сайта на время редактирования или добавления новой информации.

    Изменения происходят сразу, не требуя обновления или перезагрузки страницы.

    Функция ЯваСкрипт может быть отключена по разным причинам.

    Возможно, предыдущий пользователь намеренно мог его отключить, так как он не требовался для просмотра веб-страниц. Также отключение могло произойти самостоятельно.

    Отключение javascript может послужить причиной отказа в открытии некоторых ссылок. Чуть ниже мы рассмотрим способы включения данной функции в популярных браузерах.

    Яндекс.Браузер

    Чтобы активировать функцию ЯваСкрипт в версии 22 и ниже, следует перейти на панель инструментов и выбрать пункт меню «Настройки» .

    Для включения javascript переходим в раздел «Содержимое» , в котором для активации функции требуется поставить галочку в строке «Использовать JavaScript» .

    Для отключения функции нужно эту галочку снять.

    Для сохранения изменений нажимаем кнопку «ОК» и обновляем страницу браузера.

    Для того, чтобы изменения вступили в силу, перезапускать браузер не требуется. После активации, вы сможете полноценно просматривать веб-страницы и совершать действия на интерактивных сервисах.

    Opera Версии от 10,5 до 14

    В первую очередь нам потребуется открыть настройки браузера.

    В левом верхнем углу нажимаем кнопку «Меню» , в контекстном меню наводим курсор на пункт «Настройки» и жмем на подпункт «Общие настройки…» .

    После этого откроется новое окно с настройками браузера.

    В нем необходимо выбрать вкладку «Дополнительно» .

    В левом меню вкладки нажимаем на пункт «Содержимое» , после чего активируем функцию, поставив две галочки на пункты «Включить JavaScript» и «Включить Java» .

    Для деактивации эти галочки нужно снять.

    Активация и деактивация javascript в Opera версии от 10,5 до 14

    После того, как вы поставили или сняли галочки, сохраняем изменения нажатием кнопки «ОК» .

    Теперь перезапускаем браузер для того, чтобы изменения вошли в силу. Вам станут доступны все функции javascript.

    Версии от 15 и выше

    В данных версиях браузера Опера активация ЯваСкрипт намного проще.

    Для того, чтобы открыть окно настроек, необходимо в открытом браузере нажать сочетание «горячих» клавиш Alt +P . В открывшемся меню открываем вкладку «Сайты» .

    Для активации функции требуется установить «флажок» на пункт «Разрешить выполнение JavaScript» , для деактивации – «Запретить выполнение JavaScript» .

    После этого достаточно нажать кнопку «ОК» для сохранения изменений и обновить просматриваемую страницу клавишей F5 или нажатием соответствующего значка слева на адресной строке.

    Перезапускать браузер не требуется.

    Safari

    Для включения функции ЯваСкрипт в фирменном браузере Apple – , требуется перейти в настройки.

    Чтобы их открыть, требуется нажать кнопку «Safari» и выбрать пункт «Настройки ».

    Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "FAQ " вывести только названия вопросов. А если человека заинтересует ответ на определённый вопрос, то он может открыть ответ, а когда просмотрит, то и закрыть. Это создаёт удобство страницы и её компактность. И для этого я подготовил простенький скрипт на JavaScript , позволяющий открыть, либо скрыть определённый текст (в общем случае, определённые элементы), то есть сделать скрытый текст на JavaScript .

    Результат: Кликните мышкой по названию вопроса. Если Вы кликните ещё раз, то ответ вновь закроется.

    Вопрос №1

    Ответ №1.

    Вопрос №2

    Ответ №2.

    Код JavaScript (вставлять между тегами и ):


    function expandit(id){
    obj = document.getElementById(id);
    if (obj.style.display=="none") obj.style.display="";
    else obj.style.display="none";
    }

    Код HTML (вставлять между тегами и ):

    Вопрос №1
    Ответ №1.
    Вопрос №2
    Ответ №2.

    Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

    Обычными средствами срыть (англ. hide ) или показать (англ. show ) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility . Отличие между ними состоит в том, что visibility , хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display .

    display (с англ. отображение ) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

    Список возможных значений CSS-свойства display , понимаемых различными браузерами, не велик, но и этого вполне достаточно.

    • block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
    • inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
    • list-item — элемент выводится как блочный и добавляется маркер списка.
    • none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

    Понятно, что для того, чтобы изменить CSS-свойство того или иного HTML-элемента необходимо использовать скриптовый язык программирования. В нашем случае это JavaScript. Но всё по порядку.

    Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

    document.getElemetById("test")

    Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

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

    Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display , по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none , а для отображения «пусто» . Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

    Для наглядности приведу следующий пример:

    function change(idName) { if(document.getElementById(idName).style.display=="none") { document.getElementById(idName).style.display = ""; } else { document.getElementById(idName).style.display = "none"; } return false; } Hi World! Change

    Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none , т.е. HTML-элемент изначально будет скрыт.

    Это небольшой javascript позволит при необходимости скрывать и показывать при нажатии на ссылку фрагменты текста и картинки. Это может понадобиться, когда вы захотите описать совсем уж тривиальные вещи, которые многие знают. И чтобы большинство читателей не отвлекалось на эту информацию, предоставить её лишь при нажатии на ссылку. Таким же образом можно скрыть картинку и вообще любой фрагмент. Или реализовать вопросник, где при нажатии на конкретный вопрос будет раскрываться конкретный ответ.

    Сначала приведу пример, затем скрипт и пояснения.

    Пример Код:

    Всегда ли это будет работать?

    Посмотреть розового слоника

    Вот реализация данного фрагмента (жмите на ссылки):

    Будет работать, если пользователь в своём браузере сознательно не отключил использование джаваскриптов. Все современные темы Wodpress с галереями и эффектами работают не без помощи JavaScript. Да и многие современные сайты используют эту технологию.

    Скрипт

    Нам понадобится небольшая функция show_hide().

    function show_hide(obj_id) {
    doc= document.getElementById(obj_id) ;
    if(doc.style .display == "none" ) doc.style .display = "block" ;
    else doc.style .display = "none"
    }

    Для WordPress функцию show_hide() можно разместить в файле header.php перед закрывающимся тегом , заключив её в теги и . Или разместить в подключаемом js-файле.

    Подробнее

    А скрываемый фрагмент помещаем в div

    Подробности

    Скрываемый фрагмент должен быть заключён в свой div c уникальным в пределах страницы id (здесь id="detail" ) и стилем display:none (который говорит браузеру, чтобы не отображал содержимое). При загрузке страницы этот скрываемый фрагмент загрузится в браузер, будет индексироваться поисковыми системами, только будет скрыт до тех пор, пока пользователь сознательно не нажмёт на ссылку Подробнее , где прописан вызов нашей функции show_hide . В качестве параметра в функцию передаётся значение id скрываемого div’а. Функция меняет свойство display с none на block и обратно. Что приводит к показу и скрытию фрагмента в div’е.

    В случае с картинкой можно позаботиться о тех немногочисленных пользователях, у которых всё-таки отключён javascript, показав им картинку в другом окне. Нам же известен адрес картинки. Поэтому ссылку на картинку вида:

    Посмотреть розового слоника

    лучше переписать так:

    Посмотреть розового слоника

    При включенном джаваскрипте вы не увидите изменений. Зато при отключённом вместо нерабочей ссылки перед вами откроется картинка в новом окне.

    Похожие статьи