Насколько опасно использование конструктора Function?

Question

[Дмитрий]

В описании на MDN написано:

такой способ представляет угрозу для безопасности

Что это значит? Есть ли более подробное описание проблемы?
У меня есть свой, костыльный фреймформ. Суть проблемы в том, что есть компонент у которого необходимо иметь возможность форматировать вывод данных.

<div data-range="{ min: 1000, max: 8000  и т.д. ... }" data-format-value="Math.floor(value / 100)">
    <span class="range-value"><span>
    <!-- Тело компонента .... --->
</div>
<div data-range="{ min: 0, max: 100  и т.д. ... }" data-format-value="Math.floor((value / 1000) + 200)">
    <span class="range-value"><span>
    <!-- Тело компонента .... --->
</div>

// в недрах компонента
inputValue - это значение поля input range
formatValue - это new Function('value', 'return /* тут значение атрибута data-format-value */')
rangeValueEl - это элемент с классом 'range-value'
// вывод данных
rangeValueEl.textContent = formatValue(inputValue)

Такми образом, планировал достичь желаемого результата. То есть, иметь возможность трансформировать значение согласно требованиям.
ПС: Постарался все максимально упростить. Компоненты более сложные. Если все выкладывать, полотенце будет конкретное. Надеюсь, все понятно описал и суть согласно вопросу ясна. В конечном счете, речь не о компонентах а об использовании конструктора Function...

Answer 1

[alexalexes]

такой способ представляет угрозу для безопасности

Потому, что если злоумышленник будет иметь возможность статично внедрять HTML-фрагменты в тело документа, не имея доступа к интерпретатору JS пользователя, то с помощью атрибута data-format-value он эту возможность получит напрямую, так как может вставлять любой код JS в этот атрибут, получая доступ к локальному хранилищу, кукам. Если по кукам он не угонит сессию пользователя, то хотя бы сможет составить его фингерпринт.

Comments

[Дмитрий]

Я правильно Вас понял, у злоумышленника - должна быть возможность размещать на сайте HTML, он его размещает в виде range компонента но в поле data-format-value - злыми, липкими (фу) лапками, вставляет свой вредоносный код. Теперь, все пользователи сайта получают этот кусочек html кода и получается, злоумышленник - может похитить у них данные?

[Дмитрий]

Но постойте! Если злоумышленник имеет возможность вставки собственное HTML - это уже ВСЕ!!! Тут даже и конструктор Function не нужен... Или нет?

[alexalexes]

В вашем случае, пока атрибут data-format-value выводится статично, злоумышленнику надо иметь возможность внедрять HTML. Но если вы захотите формировать атрибут data-format-value динамично, например, подкорректировать множители на основе введенных значений пользователем. В этом случае злоумышленнику уже не надо иметь возможность произвольно внедрять HTML, ему нужно докопаться то этого поля, и там уже делать JS инъекцию.

[Дмитрий]

alexalexes,

например, подкорректировать множители на основе введенных значений пользователем

Я об этом думал! Спасибо! У меня значение data-format-value - является статичным. Тип. в разметке указал один раз и все!

злоумышленнику надо иметь возможность внедрять HTML

Я думаю что если он такую возможность получил, ему уже конструктор Function - не нужен!

В этом случае злоумышленнику уже не надо иметь возможность произвольно внедрять HTML, ему нужно докопаться то этого поля, и там уже делать JS инъекцию.

Извиняюсь, а что ему это даст? Ну вот он имеет возможность внедрить js, но ведь это js... Получается, он внедрил его сам себе, на своем клиенте... А другие пользователи его ведь не получат. они получат первозданную страницу в которой тоже могут выполнить инъекцию, но для себя. Или это не так работает? Я так понимаю что для глобальной инъекции - нужно иметь некое общее поле между пользователя?

[Алексей Дубровин]

Дмитрий, https://sudip-says-hi.medium.com/what-is-a-javascr...

[alexalexes]

Я так понимаю что для глобальной инъекции - нужно иметь некое общее поле между пользователя?

Да, это в том случае, если в интерфейсе одного пользователя задается значение, и передается на сервер. А у другого пользователя воспроизводится тот же компонент, но с переданным значением от предыдущего пользователя, как значение по умолчанию. Тогда можно использовать эту уязвимость.

[Ivan Bogachev]

Я так понимаю что для глобальной инъекции - нужно иметь некое общее поле между пользователя?

Или иметь возможность подкинуть пользователю что-то, что он сам себе скопипастит. Социальную инженерию как первый шаг никто не отменял. Локальные инъекции тоже бывают опасными.

Answer 2

[Ivan Bogachev]

И конструктор Function, и eval, в теории позволяют без каких-либо проверок выполнить код, который мы не контролируем. Мы не можем проверить его на этапе разработки и не можем быть уверенными, что у пользователя будет выполняться именно он. Он прилетает откуда-то. И весь вопрос в доверии к источнику. Если кто-то (пользователи, контент-редакторы, или кто там еще может быть) может влиять на то, что прилетит - возникает простор для потенциальных атак на пользователей системы. Кто-то что-то куда-то написал, скопипастил, а потом это что-то у пользователя выполнилось. И кто знает, что оно с данными пользователя сделает. Тут каждый оценивает риски сам, но в общем случае выполнять непроверенный код действительно не рекомендуется.

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

Comments

[Дмитрий]

То есть, если я сам пишу разметку, этот метод безопасен? Я ведь сам буду указывать data-format-value...

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

Дико извиняюсь, я не понял как это может быть реализовано... В примере у меня простая математика с округлением. Но есть более сложные вещи.

[Ivan Bogachev]

Дмитрий,

я сам пишу разметку, этот метод безопасен

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

Дико извиняюсь, я не понял как это может быть реализовано... В примере у меня простая математика с округлением. Но есть более сложные вещи.

Нужно смотреть контекст, какие у вас там формулы и что они делают. У вас действительно там прям много принципиально разных логик для форматирования значений?

[Дмитрий]

Ivan Bogachev,

У вас действительно там прям много принципиально разных логик для форматирования значений?

На данный момент, их всего три. Обычное число, проценты и число преобразованное в дату. Я думал над тем что-бы сделать что-то типа data-format-value="percet" и потом выполнять что-то тип:

window.helpers[/*  тут значение data-format-value */](value, maxValue)

где percet - функция которая преобразует значение в проценты. Аналогично с датой или числом. Но проблема в том, что мне в некоторых случаях нужно иметь 200% или же другое, отличное от 100% значение. Или в случае с числом мне при min: 0.1 max:1 нужно иметь значение умноженное на 1000 в в другом случае, к этому значение еще и 200 в виде процентов размазанных на min и max нужно прибавить... Короче, таких функций будет много!

[Ivan Bogachev]

Но проблема в том, что мне в некоторых случаях нужно иметь XXX, или нужно иметь значение умноженное на YYY, к этому значение еще и ZZZ в виде нужно прибавить... Короче, таких функций будет много!

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

[Дмитрий]

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

Если бы я был таким умным...

[Ivan Bogachev]

Дмитрий,

Если бы я был таким умным...

Да тут все просто в сути. Посмотрите на свой пример в самом вопросе. Там самая комплексная конструкция - (value / a) + b. А дальше идут частные случаи. Первый компонент: a = 1000, b = 200. Имеем формулу (value / 1000) + 200. Второй компонент: a = 100, b = 0. Получаем (value / 100) + 0. Что то же самое, что (value / 100). Т.е. обе формулы в вашем примере - это частные случаи (value / a) + b. Разница только в коэффициентах. Возможно в ваших финальных компонентах самая комплексная конструкция будет иметь больше коэффициентов, но суть от этого не поменяется. Там будет много частных случаев, многие из которых будут состоять из коэффициентов 0 или 1.