svelte - Sapper:基于用户权限呈现敏感数据是否安全？

Question

我想为管理员呈现 500 错误的回溯来自服务器，所以:

1. 在 server.js 中， session 由从 http_only cookie 中检索到的用户填充，类似于 {'username': 'admin'}

polka()
    .use(
        sapper.middleware({
            session: (req, res) => {
                return { 'user': parseCookie('user') }
            }
        })
    )
    .listen(PORT);

1. 在一些 index.js 中有一个全局变量来存储来自服务器的 500 错误的可能回溯:

import { writable } from 'svelte/store';

export const error = writable();

1. 在 index.html 中预加载了文章，如果出现 500 错误，如果当前用户是管理员，则在下面呈现回溯:

<script context="module">

    import { error } from 'index.js';

    export async function preload(page, session) {
        return { article : await this.fetch('/api/article/').then(response => {
            if (response.status == 500 && session.user.username === 'admin') {
                error.set(response);
            }
            return response.json();
        })}
    }
</script>

<script>
    export let article
</script>

<h1>{ article.title }</h1>
<div>{ article.text }</div>

<!-- 500 ERROR TRACEBACK --->
{#if $error}
    {@html $error}
{/if}

---

那么，如果 $error 是通过 preload 函数设置的，它是否安全并且只在服务器端呈现？ 如果不是，如何改进？ 也许 if (process.browser) 能以某种方式提供帮助？ 谢谢

Answer 1

避免使用这样的商店。

想象一下，response.json() 需要几毫秒的时间来解决，并且在那个时候发生了一个新的请求，也错误。第一个用户是普通用户，第二个用户是管理员。由于 error 存储对于连接到该服务器的所有用户都是通用的，因此第一个用户会看到该场景中针对管理员用户的错误。

相反，只需将 error 作为 prop 公开:

<script context="module">
    export async function preload(page, session) {
        const response = await this.fetch('/api/article/');

        return {
            article: await response.json(),
            error: response.status === 500 && session.user.username === 'admin'
                ? response
                : null
        };
    }
</script>

<script>
    export let article;
    export let error;
</script>

<h1>{ article.title }</h1>
<div>{ article.text }</div>

<!-- 500 ERROR TRACEBACK --->
{#if error}
    {@html error}
{/if}

(更严格地说，最好避免以这种方式使用 session 对象，因为足够专注的人可以找到访问该对象并改变它的方法——服务器应该负责用于确定向用户而不是客户端显示哪些信息。尽管在这种情况下这并不重要，因为您只是显示可通过网络选项卡轻松访问的信息。)