Browser-Pwn

В мире браузеров доминируют 4 крупных игрока:

• Chromium/Chrome (движок Blink)
• Firefox (движок Gecko)
• Safari (движок WebKit)
• Edge (движок Blink (бывший движок EdgeHTML)

Далее материал разделён на две части:

• Информация, помогающая понять их архитектуру и реализацию, а также как собрать их из исходников
• Информация, помогающая найти их функцию запуска калькулятора

Оглавление

1. Движки
   • Обзор
   • Chromium
   • Firefox
   • Safari
   • Edge
2. Эксплуатация
   • Обзор
   • Chromium
   • Firefox
   • Safari
   • Edge
3. Инструменты
4. Документация по JavaScript

Движки

Обзор движков

• Основы JavaScript-движков: хорошее, плохое и уродливое
• Основы JavaScript-движков: Shapes и Inline Caches
• JavaScript-движки — как они вообще работают (видео)

Просмотр исходников

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

• CTags (+Vim): Хорошо работает с переходом по ссылкам и вызовам. Если вы привыкли навигировать по большим деревьям исходников с помощью этого пуристского набора, это может быть хорошим вариантом для вас. Минусом, конечно, является отсутствие функций, которыми сейчас обладают большинство крупных IDE.
• CLion: Я использую продукты JetBrains для многих задач программирования, но CLion у меня работал не очень хорошо, особенно переход по ссылкам. Конечно, возможно, дело в настройке.
• Eclipse: Я давно им не пользовался, но он оказался хорошим вариантом. К сожалению, индексатору требуется много ресурсов, чтобы пройтись по коду.
  • Здесь приведено описание настройки для проекта Chromium, но для остальных проектов это работает аналогично.
• ccls+VSCode — это лучший вариант для меня на данный момент. ccls очень быстро индексирует репозитории и отлично работает с VSCode. Его также можно комбинировать с другими редакторами и IDE — см. https://github.com/MaskRay/ccls/wiki/Editor-Configuration

Chromium (Blink)

Проект | GitHub

Статьи:

• Что такое Chromium? (DE)

JavaScript-движком Blink является V8.

V8

Проект | GitHub | Исходники | Как собрать

Сборка (Ubuntu 18.04):

$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH=$PATH:./depot_tools
$ gclient
$ mkdir ./v8 && cd ./v8
$ fetch v8 && cd v8
$ git pull
$ gclient sync
$ ./build/install-build-deps.sh
$ tools/dev/gm.py x64.release
$ out/x64.release/d8

Полезные флаги:

• --print-opt-code: код, генерируемый оптимизирующим компилятором
• --print-byte-code: байт-код, генерируемый интерпретатором
• --trace-ic: различные типы объектов, с которыми сталкивается место вызова
• --trace-opt и --trace-deopt: какие функции (де)оптимизируются
• --trace-turbo: трассы TurboFan для визуализации Turbolizer

Статьи:

• Экскурсия по V8

JIT-компилятор: TurboFan

Документация | Блог

V8 предоставляет визуализацию для TurboFan под названием Turbolizer

Статьи:

• Введение в TurboFan

Использование Turbolizer:

1. Запустите v8 с флагом --trace-turbo: d8 --trace-turbo foo.js
2. Создадутся json-файлы, например turbo-foo-0.json
3. Перейдите в v8/tools/turbolizer и установите с помощью npm, как описано в README.md
4. Раздайте директорию, например python -m SimpleHTTPServer 8000
5. Откройте в браузере localhost:8000 и загрузите turbo-foo-0.json

Firefox (Gecko)

Проект | GitHub

JavaScript-движком Gecko является Spidermonkey.

Spidermonkey

Проект | Исходники | Как собрать

Исходники

• builtin

Сборка (Ubuntu 18.04):

$ wget -O bootstrap.py https://hg.mozilla.org/mozilla-central/raw-file/default/python/mozboot/bin/bootstrap.py && python bootstrap.py
$ git clone https://github.com/mozilla/gecko-dev.git && cd gecko-dev
$ cd js/src
$ autoconf2.13

# This name should end with "_DBG.OBJ" to make the version control system ignore it.
$ mkdir build_DBG.OBJ
$ cd build_DBG.OBJ
$ ../configure --enable-debug --disable-optimize
# Use "mozmake" on Windows
$ make -j 6
$ js/src/js

JIT-компилятор: IonMonkey

Проект

Spidermonkey предоставляет визуализацию для IonMonkey под названием IonGraph

Исходники

• jit

Safari (Webkit)

Проект | GitHub

JavaScript-движком Webkit является JavaScriptCore (JSC).

JavaScriptCore

Проект | Вики | Исходники

Статьи:

• http://www.filpizlo.com/papers.html

Исходники

• Runtime: Source/JavaScriptCore/runtime

Сборка (Ubuntu 18.04):

# sudo apt install libicu-dev python ruby bison flex cmake build-essential ninja-build git gperf
$ git clone git://git.webkit.org/WebKit.git && cd WebKit
$ Tools/gtk/install-dependencies
$ Tools/Scripts/build-webkit --jsc-only --debug
$ cd WebKitBuild/Release
$ LD_LIBRARY_PATH=./lib bin/jsc

JIT-компилятор: LLInt+ Baseline JIT + DFG JIT + FTL JIT

WebKit имеет 4-уровневую систему JIT-компиляторов, отражающую компромисс между накладными расходами на производительность и выигрышем в производительности.

Статьи:

• Введение в JIT-оптимизации JavaScript в WebKit
• Представляем B3 JIT-компилятор