Безопасность маршрутов на маршрутизаторе Vue
Я изучаю Vue уже 2 недели и не могу найти ответа на этот вопрос о безопасности маршрутизации.
Когда я защищаю маршруты во Vue с помощью мета-полей и защиты маршрутизации, как на экзамене, мне интересно, что может сделать клиент, чтобы все еще видеть компоненты.
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
router.beforeEach((to, from, next) => {
// check if authenticated by jwt from store or localstorage
})
Маршрут /foo/bar защищен перехватчиком beforeEach и метаполем requiresAuth. Но весь этот код находится на стороне клиента (как минифицированная версия, но все еще там). Пользователь мог изменить код и увидеть компонент.
Я знаю, что мне нужно снова защитить все маршруты api на Backend, чтобы пользователь не мог получить какую-либо личную информацию. Но пользователь возможно мог видеть защищенный компонент.
Насколько я понимаю, нет возможности спрятать компонент от пользователя в 100% безопасности?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если пользователь изменяет код внешний интерфейс, тогда составная часть будет доступен для просмотра, да.
Но данные, который будет заполнять этот компонент, должен не быть видимым из-за того, что серверная часть ограничивает доступ к таким данным.
Если бэкэнд не ограничивает его, это большая ошибка безопасности, независимо от Vue (злоумышленник может запросить у API напрямую без JS-клиента).
Что касается маршрутов, аутентификация, которую вы выполняете, в большей степени является проблемой рабочего процесса / удобства использования. Это потому, что, как правило, нет способа предотвратить изменение кода внешнего интерфейса. Вы можете сделать минификацию + углификацию, чтобы усложнить задачу, но это все. (Обычно минификация выполняется для повышения производительности, даже не из соображений безопасности.)
Взгляните на Vue-Router / ленивая загрузка маршрутов, если вы хотите разбить приложение на куски:
When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.
Технически вы можете защитить фрагмент, сделав его доступным для загрузки только с определенными разрешениями. Вы должны спросить себя, действительно ли работа, необходимая для достижения этого, стоит того, хотя .
Да, может. Если вы не выполните ту часть, о которой я упоминаю в конце, о «защите куска». Но я даже не знаю, встроено ли оно в фреймворки (полагаю, что нет). Между прочим, безопасность и проверка всегда должны происходить на бэкэнде, так как, как вы знаете, злоумышленник может обойти такие ограничения, если они действуют только во фронтенде.
В моем приложении мне не нужно защищать некоторые компоненты, но представьте себе компонент для администраторов, у которого есть заголовок с заголовком «сотрудники, которых нужно уволить». Сотрудник должен не сможет видеть, что этот компонент вообще существует. Ленивая загрузка звучит неплохо для такого рода задач. Спасибо за разъяснение!
В этом случае заголовок должен быть своего рода данными, поступающими из бэкэнда.
Одна вещь, которую я не понимаю, заключается в том, что если компонент доступен для просмотра из-за вмешательства во внешнем интерфейсе и хук created () в этом компоненте извлекает данные из, скажем, хранилища огня, как следует защитить данные, когда хакер запускает измененный страницу со своего компьютера, потому что технически это тот же компонент, который запрашивает данные?
Это тот же компонент, но вы должны предоставить учетные данные (например, через JWT) бэкэнду для получения данных. Измененная страница получит 401 неавторизованный запрос при запросе защищенных данных без предоставления учетных данных.
Я все еще ищу решение. Разделение на куски не решает проблему, потому что вам нужно ограничить доступ на вашем сервере, где вы можете столкнуться с проблемами, такими как: «Как установить заголовки для импорта?» - тоже вопрос без ответа. ...ПОМОЩЬ!?
@Fusseldieb, возможно, установит идентификацию в cookie, который должен быть отправлен при запросе блока. Однако вам, вероятно, понадобится какой-то собственный код, чтобы обработать его в вашем бэкэнде (тот, который обслуживает чанки).
@acdcjunior Этот подход действительно сработал !! Если я отправляю файл cookie с сервера Express, браузер отправляет его обратно, независимо от того, пришел он из Vue-Webpack или Axios. Единственный недостаток: вы не можете использовать JWT (по крайней мере, традиционным способом), но он наконец-то работает, вот что важно! Большое спасибо за этот совет. На этот вопрос напишу ответ позже (когда действительно заработает, пока только тестирую). В настоящее время я пишу "app.use", который проверяет запрошенные имена js-файлов, проверяет, существует ли файл cookie аутентификации и, если он действителен, он пропускает файл. Файл js obv. необходимо разбить по маршрутам.
Я не шучу, @acdcjunior, никто имеет (имел) решение для этого, каким бы смешным оно ни казалось. Все просто обходят вопросы, говоря, что проверки внешнего интерфейса достаточно, и если API защищен, этого должно быть достаточно - но на самом деле так не работает. Подход с использованием файлов cookie, теперь, когда вы упомянули о нем, казался настолько простым (?), Что я даже не думал об этом. Я слишком усложнял (JWT, заголовки и т. д.)
Спасибо! Это то, что я ищу. Я знаю, что мне нужно защитить бэкэнд, но мне было интересно, будет ли виден компонент без данных бэкэнда мог.