Как скрыть конфиги в js веб-приложении?

Question

[Назар Линовецкий]

Допустим у меня есть веб-приложение построенное на js модулях (не важно нативный js или Vue или React приложение), которые собираются с помощью webpack в финальный билд файл для продакшена. В этом приложении есть модули подключение к Базе Данных и другие модули, использующие конфиги с информацией, которую пользователь на фронте не должен знать.

Вопрос: Как сделать так, что бы объекты конфигов, используемые в модулях, не попали в финальный билд? Или попали в него но так, что бы юзер не смог их "прочесть"? Учитывая что сами модули, использующие эти конфиги, должны в финальном билде присутствовать. Тоесть мне нужно скрыть эти конфиги от возможности просмотреть их инспектором кода или путем выкачивания билд файла конечным пользователем, либо любым другим способом.

Какой бест практиз существует в этом случае? Если можно с примерами кода пожалуйста.

Заранее благодарю за ваши ответы.

Comments

[Назар Линовецкий]

Артём Петренков, напрямую. Например так: https://firebase.google.com/docs/web/setup#config-...

Нода используется только для сборки проекта вебпаком.

Да и речь идет не только о БД, а и скажем о каких то Ключах Доступа к различным АПИ и т.п.

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

Answer 1

[Талян]

фронтенд на то и фронтенд, что к любой его части у браузера есть доступ

Comments

[Назар Линовецкий]

Думаю есть способ. Подпишитесь на этот вопрос, что бы убедиться в этом.

[Антон Спирин]

Назар Линовецкий, нет способа. Если используете облачное решение для БД без собственного бэка, то светить публичным ключом API базы нормальная практика.

[Назар Линовецкий]

Антон Спирин, Не уверен что это "нормальная практика". Уверен, способ есть.

[Антон Спирин]

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

[Назар Линовецкий]

Антон Спирин, Думаю что способ все таки есть. Где-то на этапе сборки веб-паком.

[Антон Спирин]

Назар Линовецкий, а по-моему не думаете. Так как, после вдумчивого прочтения фразы "все, что загружает браузер можно прочитать" подобные сомнения, обычно, отпадают.

Почитайте это

[Назар Линовецкий]

Антон Спирин, На самом деле способ есть. На этапе сборки проекта вебпаком. Сто процентов.
Просто вы о нем не знаете. Но у вас есть возможность узнать об этом. Следите за обновлениями в ветке данного вопроса.

[Роман]

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

PS: это я так шучу))))

[Александр Аксентьев]

Назар Линовецкий, с такой уверенностью надо идти в депутаты какие-нибудь.

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

Подпишитесь на этот комментарий, что бы убедиться в этом.

[Pavel Shvedov]

Роман, любой сможет интерпретировать твой вновь изобретённый брейнфак, твоим же интерпретатором, так как и тот и другой загрузится в браузер

[Роман]

Pavel Shvedov, это то да, но согласитесь, что возможность выполнить не понятный код и возможность его модифицировать добиваясь определенного результата это не одно и тоже?

[Антон Спирин]

Pavel Shvedov, Роман, расходимся. Firebase ключ API, который ТС так хочет спрятать, открыто посылает при запросах в search params:
https://www.googleapis.com/somePath?key={API_KEY}
А доках, по поводу конфига, на первой же странице, выделено в рамку:

The Firebase config object contains unique, but non-secret identifiers for your Firebase project.

Это было очевидно, но на всякий проверил, что так и есть.

[Арсений Матыцин]

Блаженного завезли, расходимся.

[Талян]

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

[bro-dev]

К пейлоаду JWT нету например. Если и есть решение для автора вопроса, то только на основе криптографии как то.

[alex-1917]

Арсений Матыцин, скоро Пасха

Answer 2

[Арсений Матыцин]

Конфиги из морды можно спрятать только зашив их не в морду.
Что, собсно, мешает использовать прослойку в виде одного файла php? Ты ему запрос, в нем запрос по данным (конфигу) к бд и на возврате ответ в json, к примеру.
То же самое, я думаю, можно и в ноде провернуть, да и в принципе в любом бэке, который работает, как бэк, но пример с пыхой — это классика ассинхронных запросов =)
.....из тех времен, когда смайлики мы писали именно так ↑

Comments

[Даниил Маслов]

красиво уместил стрелочку над смайлом

[Арсений Матыцин]

s0xzwasd, плохой лайфхак, добавил 2 точки вместо неразрывных              пробелов.

Answer 3

[McBernar]

Подключение к БД на фронте? Это что-то новенькое.

Если вы имели в виду запросы к API, то они будут видны в любом случае — просто откройте вкладку network и читайте все заголовки, ключи, запросы и ответы.

Если вы хотите, чтобы нельзя было обратиться к вашему API из других мест — настраивайте CORS, добавляйте JWT.

Comments

[Назар Линовецкий]

Не совсем новенькое. Вот например: https://firebase.google.com/docs/web/setup#config-...
Именно о таком случае я и спрашиваю.

[Robur]

И где вы там увидели "скрытие конфига" если там прямо написано "а вот сюда скопируйте конфиг".
Если вы хотите сделать доступ не по паролю а по каким-то API ключам, как в файрбейс - так и напишите.

Так как вы сформулировали вопрос - способа нет. Если вам нужно что-то другое - подумайте и сформулируйте, что.

Конфиг вабпаком и правда скрыть можно и исключить его из финального билда.
Только код который его должен использовать сразу сломается.

Answer 4

[Robur]

Как сделать так, что бы объекты конфигов, используемые в модулях, не попали в финальный билд?

через https://webpack.js.org/plugins/ignore-plugin/. Правда весь код который их использует сломается.

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

Только на уровне "бабушкиной защиты" - можно сделать так что ваша бабушка не сможет, но всегда найдется тот кто сможет.

Какой бест практиз существует в этом случае?

варианта два - либо вы правильно проектируете систему и обеспечиваете защиту на стороне firebase или что там у вас и за счет грамотного разделения прав доступа, если это позволяет проект
Вы же, я надеюсь, не используете в качества API токенов те которые дают полный доступ к базе? :)

либо недостающее должен предоставить пользователь каки-либо образом.

Answer 5

[Ilya Bobkov]

Перенести конфиги на бэкенд.