Содержание

Вопрос или проблема
Как мне переместить эти данные в хранилище браузера, чтобы они не отображались в HTML?
Ответ или решение
1. Проблема отображения JSON-данных в HTML
2. Перемещение данных в хранилище браузера
Использование Vuex или Pinia
Использование локального хранилища
3. Обновление маршрутов и API
Создание API маршрута
4. Улучшение безопасности
Заключение
Рекомендуемые шаги:

Вопрос или проблема

Я создаю приложение на Laravel с Vue на Laravel Sail (плагин Docker для Laravel) + Breeze. Я построил его с помощью учебника по Laravel Bootcamp и плагина Vue.

Проблема в том, что данные из серверной базы данных видны в HTML-структуре, в формате JSON, в id=app page-data.
данные JSON в HTML

Как мне переместить эти данные в хранилище браузера, чтобы они не отображались в HTML?

Я пробовал собирать с помощью “npm run build”, но проблема остается, и я думаю, что, возможно, мне нужно изменить структуру того, как данные обрабатываются в хранилище браузера, что-то вроде переработки вещей, просто запутался.

Еще раз спасибо.

конфигурация

vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app/**/*.vue', 'resources/js/components/**/*.vue'],
        }),
        vue(),
    ],
    resolve: {
        alias: {
            ziggy: path.resolve(__dirname, 'vendor/tightenco/ziggy/dist/vue.m'),
        },
    },
});

app.js

import './bootstrap';
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => {
        const page = resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'));
        console.log(`Разрешение компонента: ./Pages/${name}.vue`);  // Строка отладки
        return page.then(module => {
            console.log(`Компонент ${name} успешно загружен.`);  // Отладка успешной загрузки
            return module;
        });
    },
    setup({ el, App, props, plugin }) {
        const vueApp = createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue)
            .mount(el);
        return vueApp;
    },
    progress: {
        color: '#4B5563',
    },
});

bootstrap.js:

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import Echo from 'laravel-echo';
import Pusher from 'pusher-js';

window.Pusher = Pusher;

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: import.meta.env.VITE_PUSHER_APP_KEY,
    cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
    forceTLS: true,
    encrypted: true
});

console.log('Echo инициализирован:', window.Echo);

app.blade.php:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- CSRF -->
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <!-- Шрифты -->
        <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Скрипты -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
        <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

Ответ или решение

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

1. Проблема отображения JSON-данных в HTML

В вашем случае, данные из базы данных, отрисованные как JSON в div с id="app", могут легко стать доступными для просмотра в исходном коде страницы. Это происходит из-за того, что данные передаются как часть начальной загрузки страницы через Inertia.js. Данный подход делает их видимыми для всех пользователей, которые могут просто просмотреть исходный код страницы или использовать инструменты разработчика в браузере.

2. Перемещение данных в хранилище браузера

Чтобы переместить данные в более безопасное хранилище, вам следует рассмотреть следующие рекомендации:

Использование Vuex или Pinia

Интеграция Vuex: Если вы используете Vue 3, вы можете применить библиотеку Pinia (новая версия управления состоянием).
- Подключите Pinia к приложению:
```
import { createPinia } from 'pinia';

const pinia = createPinia();
const app = createApp({ render: () => h(App, props) });
app.use(pinia);
```

Храните данные: Вместо передачи данных из Laravel на клиент через Inertia, вы можете загружать их через API, используя axios, после загрузки компонента:

import { defineStore } from 'pinia';

export const useDataStore = defineStore('data', {
   state: () => ({
       data: null,
   }),
   actions: {
       async fetchData() {
           const response = await axios.get('/api/data');  // Ваш API endpoint
           this.data = response.data;
       },
   },
});

Вызов действий: После создания хранилища, в вашем компоненте Vue вы можете вызывать fetchData при его созд мире.

Использование локального хранилища

Как дополнительный шаг, вы можете отложить данные в localStorage или sessionStorage, чтобы их не было видно в HTML:

localStorage.setItem('data', JSON.stringify(response.data));

3. Обновление маршрутов и API

Создание API маршрута

Убедитесь, что у вас настроен API для передачи данных:

Route::get('/api/data', [YourController::class, 'index']);

4. Улучшение безопасности

Аутентификация: Убедитесь, что доступ к вашему API ограничен. Например, используйте middleware для защиты ваших маршрутов API.
Шифрование данных: Если данные требуют высокой конфиденциальности, рассмотрите возможность их шифрования перед сохранением.

Заключение

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

laravel и vue json данные в id=app data-page= все json из базы данных в html коде отображаются.