violawww

В начале интернета никто не думал о безопасности — ни о шифровании, ни об аутентификации, ни о защите от перебора или других атак. Даже в хорошо знакомой всем электронной почте можно было подставить произвольный обратный адрес.

«Виола» в этом смысле — продукт своего времени. Браузер позволяет себе очень многое, причём без какого-либо разрешения. С одной стороны это даёт дополнительные возможности, с другой позволяет легко натворить всяких дел.

На моём скриншоте две программы для «Виолы» от автора браузера.

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

Справа — пример того, как страница может вывести произвольную информацию на панель браузера с кнопками. В данном примере создаётся соединение с адресом pebble.berkeley.ora.com по порту 7777, и строится график чисел, получаемых из этого сокета. Такого адреса давно нет, чтобы пример заработал, я написал небольшой сервер на «Пайтоне» и перенаправил этот адрес на свою машину.

Осталось полшага до того, чтобы выкачать всё важное из моего компьютера и отправить в интернет по произвольному адресу и протоколу.

Я сейчас как раз думаю что с этим делать. Я могу сделать так, чтобы файлы читались не по абсолютному пути, а по относительному, из какой-то «песочницы», это просто, а вот что делать с сетевыми соединениями пока не ясно. Кроме того, скриптовый язык может запускать произвольные программы.

В браузере компании «Нетскейп» был специальный «менеджер привилегий», который позволял попросить у пользователя разрешение на выполнение каких-то действий. Вот так, например, нужно было попросить разрешение на доступ к файлам и сети:

netscape.security.PrivilegeManager.enablePrivilege('UniversalFileAccess')
netscape.security.PrivilegeManager.enablePrivilege("UniversalConnect")

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

В общем, думаю пока как всё сделать лучшим образом.

Мне стало интересно: автор «Виолы» первым догадался отделить стилизацию элементов от структуры, или эта идея уже активно обсуждалась? Нашёл объёмное исследование о том, как зарождался CSS. Браузер «Виола» со своими собственными таблицами стилей там тоже упомянут.

Оказалось, что таблицы стилей как концепция гораздо старше самого веба. Ещё в конце 1970-х Брайан Рид из Университета Карнеги—Меллон разработал систему разметки «Скрайб». Она стала темой его докторской диссертации, защищённой в 1980 году, за которую в 1982-м Рид получил премию имени Грейс Мюррей Хоппер, присуждаемую Ассоциацией вычислительной техники (ACM).

Язык разметки описывал структуру документа — слова, строки, страницы, интервалы, заголовки, подстрочные примечания, нумерацию, оглавление и т. д. — по принципу, близкому к HTML. Далее специальный компилятор использовал базу стилей (Style Database), где хранились определения оформления — шрифты, поля, отступы и прочие параметры.

Описание разметки «Скрайба», скриншот из руководства (октябрь 1980 года)

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

Синтаксис «Виолы» был не самым продуманным, не был и единственным, но был одним из первых — он появился уже в 1993 году.

Посмотрел несколько готовых демок для «Виолы». Больше всего меня смутили шахматы — я-то думал в моём варианте этого браузера что-то сломано, а на деле это очень простая программа, где можно двигать любые фигуры — контроль хода рудиментарный. При этом нет ни игры за компьютер, ни даже взятия фигуры.

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

Потихоньку начинаю смотреть что же не работает в интерпретаторе встроенного языка. Что меня поражает до сих пор — это возможность на нём дописывать браузер.

Например, я недавно делал поддержку протокола «Веб-архива» — если сайта нет, то я ищу его в «Веб-архиве». Чтобы это смотрелось естественно, мне хотелось в урле браузера оставить только урл открываемого сайта. Это я сделал при помощи встроенного языка:

/* Show original URL when loading via Wayback Machine */
dispURL = docURL;
/* Rule: find "https://web.archive.org/web/", then drop until next '/' */
wbPrefix = "https://web.archive.org/web/";
wbAt = findPattern(dispURL, wbPrefix);

if (wbAt != -1) {
    wbAfter = wbAt + 1;
    wbRest = nthChar(dispURL, wbAfter, 999);
    wbSlash = findPattern(wbRest, "/");

    if (wbSlash != -1) {
        dispURL = nthChar(wbRest, wbSlash + 1, 999);
    }
}
mvw.doc.url("show", dispURL);

Изобретённый компанией «Мозилла» «зул» (XUL), который позволяет делать то же самое , появился только в 1999-м, а тут браузер начала девяностых! Если бы он в своё время собрал вокруг себя сообщество побольше, интерактивная революция в вебе могла случиться на десятилетие раньше.

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

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

Кстати, страница на скриншоте выглядит идеально, ровно как задумано. Такой её в современном браузере не посмотреть. Тут и анимация, и собственные виоловские стили, и кнопки, добавленные страницей — ещё одна интересная фича «Виолы».

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

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

Я решил посмотреть, нет ли в XPM тех же уязвимостей и, если они есть, — исправить.

Одна из уязвимостей, которую мы рассматривали, — запуск произвольных команд. Мы её, конечно, закрыли, но посмотрите, что нейросеть предложила в качестве теста на отсутствие уязвимости: запуск команды rm -rf /, которая, если бы сработала, удалила бы на диске всё, до чего у неё был бы доступ.

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

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

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

Когда пришёл, всё уже было готово, но я решил проверить перед коммитом — всё ли в порядке. Скомпилировал, запустил один из тестов… и всё развалилось. В сердцах пишу в чат с нейросеткой капсом: «ЧТО ТЫ НАДЕЛАЛ, ТЫ ВСЁ ИСПОРТИЛ». Понимаю, что бесполезно, но на меня так накатило, что куда-то надо было сбросить всю злость.

И сетка в чате пишет в режиме размышления: «понятно, пользователь чем-то сильно расстроен, видимо я что-то сделал не так» и одной командой безвозвратно удаляет всю многочасовую работу!

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

Мы сейчас в аэропорту, летим в отпуск, интересно, что «гофер» открывается, а он работает через порт 70, обычно нестандартные порты не работают в аэропортах

Пытаюсь улучшить транслит в браузере «Виола», который я продолжаю ковырять. Напомню: чтобы не менять шрифты, я сделал транслитерацию для языков, буквы которых отсутствуют в кодировке ISO-8859-1 — именно в ней всё работает по умолчанию.

Кодировка сейчас обрабатывается в три прохода.

На первом шаге я определяю кодировку страницы: смотрю её в заголовке Content-Type или в x-archive-guessed-charset — такой заголовок использует «Веб-архив».
Если кодировка отличается от UTF-8, выполняю перекодирование с помощью библиотеки iconv.

На втором шаге перегоняю текст в транслит при помощи ICU, для русских букв использую таблицу BGN, для остальным — то, что там работает по-умолчанию.

И на третьем шаге я опять вызываю iconv в режиме TRANSLIT, чтобы перегнать оставшиеся значки — то, что буквами не является, всякие там буллиты, кавычки и так далее.

Проблема в том, что я давно разучился бегло читать транслит, поэтому приходится прикладывать усилия. Варианта три: ничего с этим не делать, взять шрифты, которые содержат русские буквы, или переделать транслит так, чтобы его было проще читать.

Результат моих усилий — на скриншоте. Кажется, вариант по центру читается проще, чем правый. Но есть очевидные проблемы с буквами «ц» и «щ»: они у меня передаются как «u,» и «w,» соответственно, и этот знак запятой здорово сбивает темп чтения — заставляет спотыкаться. Пока думаю дальше.

Чем меня в своё время поразила «Виола» в самое сердечко, — предвосхищением идеи стилевых таблиц и браузерного языка программирования. Мне очень нравятся такие пророческие находки, хочется увидеть как они были сделаны и как автор до этого вообще дошёл.

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

Оказалось — показалось, в браузере было реализовано даже меньше.

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

Стилевые таблицы подключаются тегом LINK и имеют расширение .stg, хотя это не обязательно, но в спецификации так:

<link rel="style" href="HTML_sodium.stg">

Таблиц может быть подключено много и они работают «вниз», то есть от момента включения в код ниже места включения применяются стили, которые там описаны.

Селекторов всего два — можно выбрать тег или стиль тега (это работает немного не так как в CSS):

(BODY,SECTION
     BGColor=green
     FGColor=red
     (P)
     (KBD
          BDColor=black
          border=1
     )
)

Что тут написано? Что в тегах BODY и SECTION будет зелёный фон и красный цвет шрифта, а кроме того эти атрибуты унаследуют теги P и KBD, причём у последнего будет ещё и чёрный бордюр.

Атрибутов, к слову немного, в основном это характеристики шрифтов, цвет, бордюр и кое-какие мелочи, вроде организации мигания текста или выравнивания.

Ещё есть стилизованный браузером элементы, некие встроенные стили (например, WARNING, NOTE и так далее), которые можно навешивать на произвольные теги при помощи атрибута STYLE. На картинке пример того как выглядит встроенный стиль WARNING: оранжевый бордюр и картинка.

К тегам, помеченным атрибутом STYLE тоже можно применять собственные стили:

(P
    BGColor=white
    FGColor=black
    {STYLE "WARNING"
        FGColor=red
        fontSlant=italic
    }
)

У тега P здесь белый фон и чёрный цвет шрифта, а если у него есть атрибут STYLE, равный WARNING, то добавляются ещё два стиля, определяющие красный шрифт наклонного начертания.

В коде как будто бы есть небольшой намёк на то, что селектор должен работать и с другими атрибутами (да и синтаксис стилевых таблиц это позволяет), но в спецификации про это нигде не сказано. Я пока тоже не реализовал.

На второй картинке тест со страницы спецификации, который проходит дописанный браузер. В самом тесте, кстати, тоже были две ошибки — не закрытая скобка и неправильные стили синего блока.

Тестовый пример с сайта «Виолы», открытый собранным мною браузером

Продолжаю понемногу возиться с браузером «Виола», оживлением которого я недавно занялся. Благодаря нейросетям, на это ушли не годы, а всего несколько дней.

Чтобы не нарушать аутентичность, решил править только ошибки — их там нашлось и ещё найдётся немало — и доработать работу с сетью. Добавил менеджер соединений, поддержку HTTPS и транслитерацию кодировок: иначе пришлось бы заменять шрифты, а это в мои планы не входит. Кроме того, сделал забавную вещь — поддержку протокола «Веб-архива»: если сайт не резолвится, браузер ищет его в «Веб-архиве» через их API и переходит туда.

Если желаете тоже прикоснуться к истории, проект лежит на «Гитхабе», можно попробовать себе его собрать. Только сразу скажу — я собираю под «МакОС», под другие платформы без переделки собрать не получится.

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

Для начала хочу сказать, что в процессе переписывания кода возникло огромное количество задач. В основном — скучных и рутинных: множество очевидных и мелких правок, с которыми нейросеть справилась на «ура», тогда как я бы в них просто утонул. А вот перед более комплексными задачами она иногда пасовала, хотя мне они были вполне по плечу.

Теперь — по пунктам.

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

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

Во-вторых, кое-где она не учитывала свой предыдущий опыт в том же контекстом окне. Приходилось писать: «Смотри, ты ведь уже делала подобное — просто повтори то-то», и это помогало. Зато, и это особенно любопытно, когда исчерпывалось окно, она конспектировала проделанную работу и план в файл, а на следующей итерации читала эту информацию перед началом работы.

В-третьих, у меня сложилось субъективное ощущение, что в разные моменты времени одна и та же модель (у меня сейчас используется Claude 4.5) то «умнеет», то «глупеет» в течение дня. Возможно, это какая-то экономия ресурсов при перегрузке запросами от пользователей, а может, просто случайность.

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

Мы сейчас продолжаем переводить приложение на 64 бита (не все куски кода переведены), поэтому я попросил сделать команду make, которая подсвечивает ошибки усечения типа (ключ -Wshorten-64-to-32). После своих исправлений она запускает эту команду и правит оставшиеся ошибки.

Нейросеть в процессе правки падения приложения — она умеет использовать отладчик, чтобы смотреть где упало

В 2017-м году я в своих раскопках в интернете наткнулся на браузер ViolaWWW. Он совершенно незаслуженно забыт, хотя обладал в своё время поразительными возможностями: имел встроенный язык программирования Cmm и собственную реализацию таблицы стилей! Это задолго до появления стандарта CSS!

Пожалуй он заслуживает быть вписанным в историю развития интернета!

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

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

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

За один рабочий день нейросеть портировала этот брайзер под «МакОС» и перевела 32-битное приложение в 64 бита!

Моя попытка запустить браузер под Линукс пока завершилась провалом

Пока читал про «Си-минус-минус», наткнулся на браузер ViolaWWW. Браузер разрабатывался с 1991 года в университете Беркли одним-единственным человеком — Вэй Пей-Юанем.

Эта вещь достойна внимания из-за примечательного факта — там реализованы таблицы стилей, за несколько лет до появления CSS, а так же первый скриптовый язык — задолго до «ДжаваСкрипта» и «Си-минус-минуса»! Причём с событиями и подобием аякса!

Автор написал несколько программ на своём языке, например — шахматы. Я пока не нашёл документацию, зато обнаружил несколько примеров. Например, скрипт выводящий синусоиду:

\class {field}
\name {wave}
\parent {}
\children {wave.sb}
\script {
    switch (arg[0]) {
    case "graph":
        f = float(arg[1]);
        xx = width();
        r  = height() / 2.0;
        theta = 0;
        for (x = 20; x < xx; x += 2) {
            theta = theta + 0.1;
            y = sin(theta * f) * r + r;
            drawLine(x, y, x, y + 1);
        }
        return;
    break;
    }
    usual();
}
\width {300}
\height {200}
\
\class {slider}
\name {wave.sb}
\parent {wave}
\script {
    switch (arg[0]) {
    case "_shownPositionV":
        usual();
        send(parent(), "graph", arg[1]);
        return;
    break;
    }
    usual();
}
\x {2}
\y {2}
\width {15}
\height {200}
\shownSizeV {10}

К сожалению, позапускать программы пока нечем. Исходный код я нашёл, но под Линуксом он компилироваться не захотел, собственно, судя по коду, он никогда под ним и не собирался. Я сделал минимально необходимые правки, код собрался, но попытка запуска завершилась крахом. Подумаю стоит ли тратить силы дальше.

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

Насколько я могу видеть, поддерживалось более десятка форматов графики, в том числе всем знакомый GIF, правда без анимации и в формате 1987 года, а так же сейчас уже экзотический XBM (до относительно недавнего времени поддерживался «Эксплорером», «Сафари» и «Оперой»).