Sapper:根据用户权限呈现敏感数据是否安全?

Question

我想渲染 500 错误的回溯仅来自管理员的服务器，因此：

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

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

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

import { writable } from 'svelte/store';
export const error = writable();

3. 在预加载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}

---

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

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

Answer 2

更新

查看里奇哈里斯的以下答案

源语言

如果您将其中一个模板与 webpack 或汇总一起使用，您将看到process.browser被替换为true这意味着无法访问的代码将被树摇动。

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

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