【问题标题】：Sapper: is it safe to render sensitive data, based on user rights?Sapper：根据用户权限呈现敏感数据是否安全？
【发布时间】：2020-07-09 04:10:27
【问题描述】：

我想为管理员渲染来自服务器的 500 错误回溯，所以：

在server.js 中，会话填充了从http_only cookie 检索到的用户，就像{'username': 'admin'}

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

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

import { writable } from 'svelte/store';

export const error = writable();

在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) 能以某种方式提供帮助？谢谢

【问题讨论】：

标签： svelte sapper

【解决方案1】：

避免使用这样的商店。

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

相反，只需将 error 公开为道具：

<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 对象，因为足够敬业的人可以找到访问该对象并对其进行变异的方法——服务器应负责确定要发送哪些信息显示用户，而不是客户端。尽管在这种情况下，这并不重要，因为您只是显示可以通过网络选项卡轻松访问的信息。）

【讨论】：

哦，谢谢，不知道商店对于所有用户来说都是独一无二的。当然这样的事情必须由服务器控制，只是想更深入地了解工兵生命周期。您能否澄清一下，“足够敬业” - 是一个可以使用诸如 csrf/xss 之类的前端漏洞或者可以在没有任何漏洞的情况下以某种方式访问它的人吗？
我的意思是有人利用某种漏洞（可能就像您或同事将window.session = stores().session 放在某个组件中以帮助您调试，然后忘记将其取出一样简单跨度>

【解决方案2】：

更新

查看 Rich Harris 的以下答案

原创

如果您使用 webpack 或 rollup 模板之一，您会看到 process.browser 被替换为 true，这意味着无法访问的代码将被摇树。

所以简短的回答是肯定的，只要在适当的位置用process.browser 包围该代码，就可以使用它

但话虽如此，当涉及到 500 错误代码时，最好还是依靠服务器日志。只向所有用户返回错误代码，仅此而已，并将堆栈跟踪推送到日志系统以进行调试。

【讨论】：