Как подменить javascript на странице

Свой скрипт для чужого сайта

Даже для многих опытных пользователей интернета сайт представляется чем-то статичным, неизменяемым. Здесь имеется в виду чужой сайт – на который вы заходите с помощью своего браузера. Вы действительно не можете напрямую, к примеру, влиять на внешний вид ресурса, но вот опосредованные варианты присутствуют. Рассмотрим способы решения задачи.

Вот, к примеру, вам не нравится, что в блоке «Мои услуги» на моем блоге читающего программиста цвет заголовка не зеленый. Как можно его изменить?

Самый простой способ – это посмотреть исходный код страницы, скопировать его к себе на диск, изменить код (добавить style prettyprint lineminus»> // ==UserScript== // @name upread // @namespace http://tampermonkey.net/ // @version 1.0 // @description // @author upread.ru // @match http://upread.ru/* // @grant none // ==/UserScript== ‘use strict’; document.getElementById(‘myservices’).style.color=»green»;

Возможности пользовательских скриптов от Tampermonkey на самом деле не ограничиваются изменениями внешнего вида сайта. С помощью них, в частности, можно создавать «роботов», делающих на сайтах онлайн игр рутинную работу, создавать онлайн переводчики и многое другое. Напоследок стоит отметить тот факт, что чужой сайт мы своим скриптом все же не меняем — все изменения происходят только в браузере с уже загруженным сайтом.

Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

заметки, javascript, tampermonkey, скрипты, браузер

Бесплатный https и
домен RU в подарок

Источник

расширение браузера для замены файла JavaScript на живом сайте для тестирования

Я ищу расширение браузера (Firefox, Chrome), позволяющее заменить файл Javascript на веб-сайте в реальном времени, чтобы сделать некоторые проверки/взлома. В принципе, он должен использовать URL-адрес и загружать другой (локально или на сервере разработки HTTP). Любая идея?

10 ответов

Я думаю, что это задача для личного прокси. Вы можете обманывать трафик на прокси и применять правила для изменения запросов/контента

Он делает это и многое другое. Но это не расширение браузера.

@ColBeseder — я отредактировал ваш ответ, чтобы он указывал на правильный URL. Fiddler — это именно то, что ищет OP

@PeterRader обычно fiddler позволяет вам вводить в ssl-соединениях, но, очевидно, сертификат больше не будет проверяться. fiddler2.com/Fiddler/help/httpsdecryption.asp

• Используя хром, вы можете изменить код «на лету» (инструменты разработчика — вкладка «Источники» ) и просто сохранить его (команда + s)
• Используйте приложение LiveReload, которое фактически присоединяет расширение (такого рода делает то, что вы хотите) http://livereload.com/

Это не может быть «точный» ответ на ваш вопрос, но я почти уверен, что один из них сделает то, что вы хотите сделать.

браузер Opera имеет схожие функции:

• Просмотр исходного кода страницы ( Ctrl+U ).
• Внесите некоторые изменения. Или вставьте и замените весь файл.
• Нажмите «Применить изменения» на панели инструментов ( Ctrl+R ).

Для редактирования связанных ресурсов (например, файлов javascript или CSS) используйте следующий подход:

• Откройте связанный ресурс на новой вкладке.
• Просмотр «исходного кода» ресурса ( Ctrl+U ).
• Внесите некоторые изменения.
• Нажмите «Применить изменения» на панели инструментов ( Ctrl+R ).
• Вернитесь на вкладку с веб-страницей и текстом ( Ctrl+R ).

Действительно, этот метод не будет работать с новой Opera. Есть встроенный веб-инспектор, который можно использовать для редактирования HTML и CSS в режиме реального времени. Не JS, к сожалению. Я полагаю, что должна быть возможность заменить существующие функции JS с помощью консоли.

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

Отказ от ответственности: я являюсь автором программного обеспечения: -)

Другим подходом, который может подойти вам лучше, является использование прокси-сервера на основе RoboHydra. Идея здесь заключается в том, что вы хотите сохранить ВСЕ файлы Javascript на своем компьютере и использовать другой сервер просто как бэкэнд. Это здорово, например. которые не хотят, чтобы весь сервер был установлен на своих машинах.

Вы можете ознакомиться с документацией, учебными пособиями и т.д. в http://robohydra.org/ и иметь статью, описывающую именно то, что usecase на http://dev.opera.com/articles/view/robohydra-a-new-testing-tool-for-client-server-interactions/.

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

ColBeseder правильно отображает Fiddler (http://www.fiddler2.com/fiddler2/version.asp) как решение вашей проблемы.

Fiddler отлично способен обрабатывать и расшифровывать трафик HTTPS, см. документацию на странице о том, как ее настроить.

Чтобы напрямую ответить на вопрос OP, вы можете использовать функцию автоответчика в Fiddler, чтобы взломать ваш JS для тестирования.

Включите вкладку автоответчика в Fiddler, убедившись, что вы пропустили проход для проверки непревзойденных запросов, указав URL-адрес файлов JS, которые вы хотите заменить в качестве шаблона. Выберите файл ответов из локальной файловой системы и перейдите в город!

Существует https везде, где вы можете определить правила для перезаписи URL. Это должно работать во всех запросах, включая запросы script.

Tamper данные могут выполнять эту работу, но я не знаю, как автоматическая/постоянная вы можете настроить ее.

И есть также расширение, называемое redirector. Я не испытал этого. Потенциально он работает только в адресной строке.

Это несчастливо. В этом случае, вероятно, прокси-сервер — это единственный способ. Что касается расширения firefox, которое является прокси-сервером, например Foxyproxy

Источник

JS. Подделываем сайт, с помощью TamperMonkey [10]

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

Что такое Tampermonkey.

Tampermonkey — это плагин, позволящий писать пользовательские JS скрипты для вебсайтов.

С помощью него вы сможете:

А также, все то что возможно в Javascript, доступно и здесь. Хорошо, приступим к первому скрипту.

Пишем Hello World.

Сперва установите Tampermonkey.

Зайдите на сайт, к которому хотите прицепить скрипт. И нажмите «Создать новый скрипт»

У вас отроется редактор кода, с созданной основой скрипта.

И нажмите Ctrl+S, чтобы сохранить скрипт.

Теперь, перезагрузите страницу, к которой привязан скрипт.

Скрипт работает. Теперь разберем код.

Разбор простейшего скрипта

// ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://under-prog.ru/ // @icon https://www.google.com/s2/favicons?domain=under-prog.ru // @grant none // ==/UserScript== (function() < 'use strict'; // Your code here. alert("Hello World"); >)();

Комментарии находящийся в этом промежутке, называются заголовками пользовательского скрипта (Userscript header)

Они содержат информацию о скрипте, а также, о специальных разрешениях. Имеют следующий вид.

// @name имя_скрипта // @namespace пространство_имен_скрипта // @version вверсия // @description описание // @author имя_автора // @match url_сайта_на_котором_будет_воспроизводится_скрипт // @icon ссылка_на_иконку_скрипта // @grant дополнительные_разрешения

Также, стоит отметить, что иконку можно будет достать из base64 кода, например вот так.

// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

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

Если вы хотите, применять скрипт для всех страниц данного сайта, а не только к одной. То, просто поставьте * в конце ссылки, в поле match.

Подробнее про userscript header, вы можете почитать в документации.

Вызываются в момент, загрузки скрипта на сайт.

При помощи функции alert, выводим сообщение на экран.

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

Способы получения элементов в JS.

В JS есть 2 основных способа получения элемента:

• Классический — через document.querySelector()
• Библиотека JQuery — существовала до появления document.querySelector() в JS, за что заслужила популярность. Имеет более короткий синтаксис.

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

Еще, для получения элемента используются 2 функции:

• querySelector — принимает css-селектор в качестве аргумента. Возвращает, первый попавшийся элемент.
• querySelectorAll — то же самое что и querySelector, но возвращает все найденные элементы в виде массива.

Css-селекторы я разбирал первом уроке этого курса.

Меняем содержимое сайта.

Получив элемент, с помощью querySelector, можно производить всевозможные манипуляции. Такие как:

• Добавление elem2 в внутри element, в конце — element.append(elem2) или element.appendChild(elem2)
• Добавление elem2 в внутри element, в началае — element.prepend(elem2)
• Вставка elem2 перед element — element.before(elem2)
• Вставка elem2 после element — element.after(elem2)

Также, можно создать новый элемент с помощью document.createElement(). Вот пример создания div‘а.

Остальные типы элементов создаются по аналогии.

Что-бы получить доступ к html-коду элемента, используйте element.innerHTML.

let html_text = element.innerHTML //Получили код элемента element.innerHTML = "
Новый код элемента
" //Изменили код элемента

Краткий курс по добавлению элементов закончен, двигаемся дальше.

Отправляем запрос на сайт.

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

Встраивание будете делать через appendChild. А вот информацию с сайта, будете получать путем отправки запроса на сайт.

Ниже, я привел пример подобного запроса.

let req = new XMLHttpRequest(); //Создаем обьект запроса req.open('GET', link, true); //Настраиваем запрос req.send(); //Отправляем запрос на сайт req.onreadystatechange = function() < //Ответ получен if(req.readyState == 4 && req.status == 200) < //Если статус ответа, удовлетворительный let tmp = document.createElement('div'); //То создаем div элемент tmp.innerHTML = req.responseText; //Запоняем его внутренности полученными данными (html код сайта) //И дальше, парсим что нужно. let cur_price = tmp.querySelector("div.current_price"); console.log(cur_price); >>

Все обьяснение в комментариях.

req.open имеет следующий синтаксис:

req.open('тип запроса', ссылка, ассинхронность);

• Тип запроса — может быть GET или POST (в редких случаях DELETE, PUT, ).
• Ссылка — задает ссылку на сайт.
• Ассинхронность — если false, то запрос делается синхронно (последовательно), в противном — ассинхронно (парралельно).

Теперь вы знаете как посылать запросы. Двигаемся дальше.

Скачиваем файлы по ссылке.

Сперва, получим доступ к функции GM_download:

И используем её внутри функции.

Разберем аргументы этой функции.

• url — ссылка на файл
• name — имя файла, с расширением
• saveAs — задает, нужно ли открывать окно, при скачивании файла.

Таким образом и скачиваются файлы.

Я прочитал статью, что дальше?

Дальше идите на сайт greasyfork.org. На данном сайте, обычные люди делятся своими скриптами, которые вы можете установить и, при желании, изучить.

Источник