Laravel Livewire 3.5.12端到端负载加密前端钩子问题求助

我想在Laravel 11（基于Livewire v3）的应用中，在HTTPS之上添加端到端负载加密，给请求额外加一层安全防护，保障敏感数据安全。这个方案的核心特性包括：

• 客户端加密JS模块：基于Web Crypto API的JavaScript类，负责指定端点的请求加密、响应解密
• 服务端加解密中间件：Laravel中间件处理传入负载解密、传出响应加密，实现与后端无缝集成
• 可配置加密：通过环境变量开关控制加密状态，适配不同部署环境
• 密钥交换机制：应用首次加载时从服务端获取公钥，供JS模块完成加密操作
• 路径白名单：特定路径可绕过加密，避免对无需额外安全层的端点做无效处理

目前遇到的问题是：如何对接Livewire的请求与响应流程，将 outgoing payload替换为加密内容、incoming response替换为解密后的内容？我已查阅Livewire文档并尝试自定义Request Hook，相关JS代码如下：

// Initialize encryption service and register Livewire hooks
document.addEventListener('DOMContentLoaded', async () => {
    // Create a global instance of EncryptionService
    window.encryptionService = new EncryptionService();

    // Wait for Filament/Livewire to be ready
    await window.$wire?.initialRender;

    // Initialize encryption service
    await window.encryptionService.initialize();

    // Register Livewire request hook with encryption and decryption
    Livewire.hook('request', async ({ uri, options, payload, respond, succeed, fail }) => {
        // Encrypt request payload if encryption is enabled
        if (window.encryptionService.isEnabled && window.encryptionService.sessionId && payload) {
            try {
                // Set headers to identify the encrypted request
                options.headers = options.headers || {};
                options.headers['X-Session-Id'] = window.encryptionService.sessionId;
                options.headers['X-Encrypted'] = '1';

                // Encrypt the payload
                const encryptedPayload = await window.encryptionService.encryptPayload(payload);
                console.log('Encrypted Payload:', encryptedPayload);

                // Overwrite the payload with the encrypted content
                payload = encryptedPayload;

            } catch (error) {
                console.error('Encryption failed:', error);
                // If encryption fails, proceed without encryption
                payload = JSON.stringify(payload);
            }
        }

        // Handle the response
        respond(({ status, response }) => {
            // Check if the response is encrypted by looking at the header
            const isEncrypted = response.headers.get('X-Encrypted') === '1';

            // If encrypted, proceed to decrypt after parsing the raw response
            if (isEncrypted && window.encryptionService.sessionId) {
                response.text().then(async (encryptedContent) => {
                    try {
                        const decryptedContent = await window.encryptionService.decryptPayload(encryptedContent);
                        succeed({ status, json: decryptedContent });
                    } catch (error) {
                        console.error('Decryption failed:', error);
                        fail({ status, content: 'Decryption failed' });
                    }
                }).catch((error) => {
                    console.error('Error reading response content:', error);
                    fail({ status, content: 'Failed to read encrypted response content' });
                });
            } else {
                // If the response isn't encrypted, handle it as usual
                succeed({ status, json: response.json() });
            }
        });

        // If decryption fails or if there’s an error, handle it in `fail`
        fail(({ status, content, preventDefault }) => {
            console.error('Request failed:', status, content);
            if (window.$wireui) {
                window.$wireui.notification({
                    title: 'Error',
                    description: 'Failed to process request',
                    icon: 'error'
                });
            }
        });

        // Return the (possibly modified) payload to be sent in the request
        return payload;
    });
});

这段JS能正常执行，但请求仍发送普通JSON payload到后端，达不到预期加密效果，求方向指引。

问题修复方向 #

1. 直接修改请求体而非返回payload
   Livewire的request钩子中，仅修改payload变量不会改变实际发送的内容，需要直接修改options.body，同时调整Content-Type头让后端识别加密内容：

// 替换原有payload赋值代码，改为：
options.body = encryptedPayload;
options.headers['Content-Type'] = 'application/octet-stream'; // 或自定义加密类型头

删除最后return payload的代码，Livewire会优先使用修改后的options配置。

2. 修复响应处理的异步逻辑
   非加密分支中response.json()是异步操作，需改为await确保拿到解析后的JSON再传给succeed，同时将respond的回调改为async函数：

respond(async ({ status, response }) => {
    const isEncrypted = response.headers.get('X-Encrypted') === '1';

    if (isEncrypted && window.encryptionService.sessionId) {
        // 原有加密响应处理逻辑
    } else {
        // 非加密分支修改为：
        succeed({ status, json: await response.json() });
    }
});

3. 调整Livewire初始化等待逻辑
   仅等待window.$wire?.initialRender可能无法确保Livewire完全加载，改为监听官方初始化事件：

// 替换原有等待代码，改为：
await new Promise(resolve => {
    if (window.Livewire) return resolve();
    document.addEventListener('livewire:initialized', resolve);
});

4. 后端中间件配合调整
   后端中间件需优先拦截请求，读取原始请求体解密后替换Laravel的请求内容，确保Livewire能拿到解密后的payload；响应时则加密内容并设置X-Encrypted头。

内容的提问来源于stack exchange，提问作者Anil Kumar