传递环境变量(从getServerSideProps)作为道具到另一个组件是安全的吗?

Question

将env变量(从getServerSideProps)作为props传递给其他组件是否安全?

我想在客户端使用这个env变量，但我想确保它对客户端不可见

const Home: NextPage = (props:any) => {
return (      
<HomeView priv={props.priv} />  
);
};
export default Home;
export async function getServerSideProps() {
return {props:{priv:process.env.PRIVATE_KEY}}
}

我使用getServerSideProps，但环境变量出现在网络选项卡。我能做什么?

Answer 1

是的，将getServerSideProps中的env变量作为props传递给另一个组件是安全的。它是安全的，因为env变量安全地存储在服务器上，不能从客户端访问。这意味着数据不会暴露给潜在的恶意行为者，确保它保持安全。

如果您希望在客户端使用env变量，但对客户端保持不可见，那么您可以使用服务器端环境变量存储(如dotenv或Vault)来安全地存储变量并在服务器端访问它。这将防止将变量暴露给客户端。

你也可以使用Node.js全局对象进程。以安全地存储环境变量并在服务器端访问它们。例如:

// server-side
const MY_SECRET_VARIABLE = process.env.MY_SECRET_VARIABLE;
// client-side
const MY_SECRET_VARIABLE = null;

Answer 2

私钥等环境秘密根本不应该传递给客户端。相反，你应该在服务器端的API函数或getServerSideProps中使用它们。

如果您的环境变量不是保密的，或者是第三方脚本(如analytics)需要的，则可以使用NEXT_PUBLIC_前缀。这将在构建时将秘密内联到包中。