Разговор о песочнице в JS

Автор: Цзэн Пейзен

Чтобы дать простой каштан, по сути, в нашем браузере каждая вкладка в Chrome представляет собой песочницу (sandbox). Процесс рендеринга изолирован песочницей, и содержимое веб-кода веб-страницы должно пройти канал IPC для связи с процессом ядра браузера, а процесс связи будет проверен на предмет безопасности. Цель дизайна песочницы — разрешить выполнение ненадежного кода в определенной среде, тем самым ограничивая доступ этих кодов к ресурсам за пределами зоны изоляции.

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

1. jsonp: при анализе запроса jsonp, возвращаемого сервером, если вы не доверяете данным в jsonp, вы можете проанализировать и получить данные, создав песочницу; (при обработке запросов jsonp в TSW создайте песочницу для обработки и разобрать данные) ;

2. Выполнение сторонних js: когда вам нужно выполнить сторонние js, и файл js не обязательно является доверенным;

3. Онлайн-редактор кода: я полагаю, что все использовали некоторые онлайн-редакторы кода, и выполнение этих кодов в основном будет помещено в песочницу, чтобы предотвратить влияние на саму страницу (например: https://codesandbox.io/ с/новый)

4. Рендеринг на стороне сервера Vue: при реализации рендеринга на стороне сервера Vue файл внешнего пакета выполняется путем создания песочницы; при вызове метода createBundleRenderer можно настроить runInNewContext как true или false, чтобы определить, передать вновь созданный объект песочницы для использования vm;

5. Расчет экспрессии в Vue Template: расчет выражений в Vue шаблон помещается в песочницу, и можно получить только белый список глобальных переменных, таких как математика и дата. Вы не можете попытаться получить доступ к пользовательским глобальным переменным в выражениях шаблона.

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

Прежде всего, начнем с самого простого метода, если вы хотите выполнить кусок кода напрямую через eval и функцию, это нереально, потому что код может подняться по цепочке областей видимости и изменить глобальные переменные, чего мы не делаем. хотите , поэтому вам нужно сделать доступ к переменной в песочнице в пределах вашей области мониторинга, однако вы можете использовать with API, В области блочного уровня with доступ к переменной сначала будет искать объект параметра, который вы передали, и затем посмотрите дальше, так что это эквивалентно отслеживанию «доступа к переменной» в замаскированном коде:

Взял на себя, что вам нужно сделать, это то, что переменные воздействия могут быть доступныexposeObjи блокировка внешнего доступа в песочнице. Благодаря функции прокси, предоставляемой es6, вы можете получить все перезаписываемые объекты:

Установив функцию has, вы можете отслеживать доступ к переменным.В приведенном выше коде для доступа к коду доступны только отдельные внешние переменные, а остальные атрибуты, которые не существуют, будут напрямую вызывать ошибки. На самом деле функции get и set по-прежнему существуют, но если функции get и set могут перехватывать только операции текущих свойств объекта, то операции чтения и записи свойств внешних переменных контролировать нельзя, поэтому можно использовать только функцию has. . Далее давайте протестируем:

Вроде бы все хорошо, но проблема кроется во входящем объекте.При вызове console.log(ab) метод has не может отследить доступ к атрибуту b. Предположим, исполняемый код является Untrustworthy, на этом времени ему нужно только получить доступ к объекту-прототипу конструктора Object через ab__proto__, а затем изменить объект-прототип, например, toString может повлиять на логику внешнего кода.

Например, показанный выше код реализует выход из песочницы путем доступа к цепочке прототипов и изменения метода toString в цепочке прототипов.После того как внешний код выполнит метод toString, он может реализовать атаку xss и внедрить сторонний код. логика кода функции для выполнения определена внутри, она все равно будет искаться по действующей цепочке.Чтобы обойти поиск по цепочке областей видимости, автор получает функцию-конструктор путем обращения к конструктору стрелочной функции.В это время, выполнение в функции Когда код xss выполняется, он не будет подниматься по цепочке областей видимости, а будет выполняться непосредственно в глобальной области видимости Таким образом реализуется выход из песочницы и атака xss.

Вы можете подумать, если я отключу доступ к цепочке прототипов, остановит ли это ее? Действительно, вы можете передать объект без цепочки прототипов через Object.create(null) и позволить открытому объекту иметь только один уровень, не передавая вложенные объекты, но даже для значений базового типа, чисел или строки вы также можно найти цепочку прототипов через __proto__, и даже если вы не передаете объект, вы можете обойти его следующим образом:

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

Некачественный и небезопасный метод был представлен ранее для создания простой песочницы, но наиболее распространенным методом во внешнем интерфейсе является использование iframe для создания песочницы, например, в онлайн-редакторе кода: https://codesandbox .io/ с / новости.

Этот метод более удобен, прост и безопасен, а также является относительно распространенной внешней реализацией песочницы.Если код, который вы хотите выполнить, написан не вами или не доверенным источником данных, вы должны использовать песочницу iframe. Песочница — это новый атрибут, предложенный h5.Способ включить его — использовать атрибут песочницы в теге iframe:

Но это также накладывает некоторые ограничения:

1. Скрипт script не может быть выполнен
2. Не удается отправить запрос ajax
3. Нельзя использовать локальное хранилище, т.е. localStorage, куки и т.д.
4. Невозможно создать новое всплывающее окно и окно
5. Не могу отправить форму
6. Невозможно загрузить дополнительные плагины, такие как flash и т. д.

Но в противном случае вы можете выполнить некоторую настройку этого тега iframe:

Затем вам нужно только объединить API postMessage, передать код, который необходимо выполнить, и данные, которые необходимо предоставить, а затем связаться со своей страницей iframe.

1) Но на что вам нужно обратить внимание, так это на то, что на дочерней странице будьте осторожны, чтобы не позволить исполняющему коду получить доступ к объекту contentWindow, потому что вам нужно вызвать postMessageAPI contentWindow для передачи информации на родительскую страницу, если вредоносный код также получает объект contentWindow, это эквивалентно получению контроля над родительской страницей, на этот раз может быть плохо.

2) Когда вы используете postMessageAPI, поскольку источник песочницы по умолчанию имеет значение null, вам необходимо установить параметр allow-same-origin, чтобы разрешить взаимодействие двух страниц, что означает, что запросы могут инициироваться на подстраницах. нужно защититься от CSRF и разрешить тот же запрос домена, но, к счастью, не несет куки.

3) Когда вы вызываете postMessageAPI для передачи данных на подстраницу, сам передаваемый объект данных был скопирован алгоритмом структурированного клонирования, если вы не знаете алгоритм структурированного клонирования, вы можете проверить это.

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

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

Виртуальная машина предоставляет три метода: runInNewContext, runInThisContext и runInContext. Эти три метода используются по-разному. Чаще всего используются runInNewContext и runInContext. Для указания объекта контекста можно передавать параметры.

Но так ли вм абсолютно безопасен? неуверенный.

Через приведенный выше код мы можем остановить основной процесс nodejs через vm, чтобы программа не могла продолжать выполняться, а это не то, что мы хотим.Решение состоит в том, чтобы привязать объект контекста, и в то же время, чтобы избежать экранирование через цепочку прототипов (объекты в nodejs структурно не копируются, как на стороне браузера, в результате чего цепочка прототипов все еще сохраняется), поэтому нам нужно отрезать цепочку прототипов и в то же время для входящих открытых объектов предоставлять только значения основного типа.

Давайте посмотрим, как это используется в TSW:

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

Тем не менее, мы не можем гарантировать, что это абсолютно безопасно, ведь могут быть потенциальные уязвимости песочницы?

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

1. Не выполнять ненадежные сторонние JS на бизнес-коде.Если необходимо выполнить сторонние JS, можно настроить CSP на ведение белого списка;

2. Не доверяйте никаким источникам пользовательских данных, чтобы предотвратить внедрение кода злоумышленниками.

Я скомпилировал эту статью из любопытства, и если есть какие-либо ошибки, пожалуйста, исправьте их.