- PVSM.RU - https://www.pvsm.ru -

Пользовательский JavaScript и CSS на мобильных устройствах

Пользовательский JavaScript и CSS на мобильных устройствах

Хочется странного

Если вы регулярно посещаете с мобильного устройства (телефона, планшета) какие-нибудь сайты, и если у вас регулярно возникает желание изменить на них JS/CSS (но разработчикам сайтов вы по какой-то причине не сообщаете об этих желаниях), то статья вам может быть интересна.

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

Давай покрасим холодильник…

В целом, спектр возможностей видится широкий: изменение «темы» сайты, размеров отдельных элементов, исправление ошибок JS/CSS, включение спрятанных возможностей (к примеру, на VK есть HTML5 плеер, который не активен), или отключение имеющихся, вроде заботливо расставленных на сайте «ховеров», из-за которых на мобильных устройствах по ссылкам приходится тыкать два раза, и т.д. Но увы, в стандартных браузерах большей части устройств нет механизмов для реализации UserCSS или UserScript [1]. Где-то работают букмарклеты (и я даже написал для себя около десятка), но процесс их «приготовления» нельзя назвать быстрым. В случае, если количество правок растёт (или уменьшается), постоянно править «закладурки» :) становится неудобно.

В общем, как это можно решить:

  • находим хостинг [2] с Apache или nginx
  • включаем там 2 расширения: прокси и что-то, что позволит менять проходящие через прокси файлы
  • настраиваем заменялку так, чтобы она подключала к страницам нужные вам JS/CSS
  • прописываем прокси на устройстве
  • профит

У меня «хостинг» нашелся с Apache, на стоящем на подоконнике NAS, который, кстати, мне достался от QNAP (тайваньского!) по программе бета-тестирования [3]. Его я и мучил.

Injection

Включить прокси на Apache несложно, сложнее оказалось с подменой контента на лету. Расширений «на рынке» несколько: mod_substitute [4], mod_filter [5], mod_sar [6]. mod_sar я тупо не смог собрать, у mod_substitute были проблемы сначала со сжатыми страницами (пришлось собирать цепочку из фильтров распаковки-замены-упаковки, чтобы работало), потом обнаружилось что некоторые страницы он портил, причину «быстро» установить не удалось. Обновить Apache и все фильтры до последних версий (нового mod_sed [7], к примеру) мне не светило (ядро и либы старые на NAS-е). В общем, остался я с mod_filter, в конфиг виртуального хоста вставил что-то вроде

ExtFilterDefine fixtext mode=output intype=text/html 
    cmd="/opt/bin/sed 's|</body>|<script src="/injector.js" type="text/javascript"></script></body>|i'"

ProxyRequests On
ProxyVia On

<Proxy *>
SetOutputFilter fixtext
</Proxy>

и пользовался. Файлы правил «как обычно», через SSH/mc, или в Textastic [8] через SFTP (у меня iPad).

Вместе веселее

А потом одному стало скучно. Предлагаю желающим присоединиться к тестированию и использованию. :)

Это всё еще NAS, на нем сделана страница регистрации, где вы вводите свой email. От него откусывается часть до @, с этим именем создается пользователь для openssh, домашняя папка под chroot, и UserDir для Apache. На почту высылается сгенерированный пароль (который нигде в явном виде не хранится, как и адрес почты, поэтому функции восстановления/сброса пароля нет, пока?). В выданный shell можной зайти через SSH или по SFTP, в папке htdocs лежит пример «инжектора» на JS, доступен редактор vim. Хост для SSH/SFTP и прокси один и тот-же, разница только в портах (для прокси — 8282). Прокси требует авторизацию, учётные данные те-же.

Адрес страницы регистрации: http://www.slcontent.ru:8282/reg/ [9] (логин: habr, пароль: habr).

P.S.: Дисклеймер. Если вы настроили прокси на мобильном девайсе, то все ваши программы будут пытаться ходить в инет через него. К чему я это… почти все они пользуются HTTPS, так что чего они там шлют, я в любом случае не увижу. :)

[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"
[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"
[27/Jan/2013:22:35:50 +0400] "CONNECT m.google.com:443 HTTP/1.1" 200 - "-" "Apple-iPad3C3/1001.523"

Хотелось бы услышать мнения относящиеся к идее как таковой, советы, отзывы по использованию. :)

Автор: SOb_S

Источник [10]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/25815

Ссылки в тексте:

[1] UserScript: http://userscripts.org

[2] хостинг: https://www.reg.ru/?rlink=reflink-717

[3] по программе бета-тестирования: http://www.slcontent.ru/nesl/beta-testirovanie-qnap/

[4] mod_substitute: https://httpd.apache.org/docs/2.2/mod/mod_substitute.html

[5] mod_filter: https://httpd.apache.org/docs/2.2/mod/mod_filter.html

[6] mod_sar: http://www.linuxpages.org/mod_sar_en.php

[7] mod_sed: https://httpd.apache.org/docs/2.4/mod/mod_sed.html

[8] Textastic: https://itunes.apple.com/ru/app/textastic-code-editor/id383577124?mt=8

[9] http://www.slcontent.ru:8282/reg/: http://www.slcontent.ru:8282/reg/

[10] Источник: http://habrahabr.ru/post/167273/