Front end Sensitive info(前端敏感信息)
问题描述
我正在构建我的第一个 react 应用,但不确定前端的安全性.我正在调用以下第三方库:emailjs.sendForm(serviceID, templateID, templateParams, userID);
userId 字段是敏感信息.我对我的 onSubmit 处理程序进行了以下调用.我想知道我是否需要以某种方式保护这些信息?另外,有没有办法让我检查用户是否能以某种方式看到这些信息,我以某种方式检查并找到方法中的代码?
emailjs.sendForm(邮箱",客户电子邮件",#形式",**here_is_the_sensitive_info**").then(() => {重置表格({});}).catch(() => {常量确认 = document.createElement("H6");acknowledgement.innerHTML = "出了点问题,请尝试.";document.getElementById("form").appendChild(acknowledgement);});
在这种情况下,EmailJS 是要在浏览器中使用的,所以我认为 userId
不敏感全部.
在自己的文档中,可以看到如下入门说明.
<块引用>
也就是说,任何人都可以在浏览器的页面源代码中看到这一点.谨慎处理客户端 JavaScript 中的任何敏感内容是正确的.
为了避免任何人在他们自己的网站上使用您的 userId
(这不太可能,因为它只会触发您配置的电子邮件),您可以 将您自己的域列入白名单 显然是他们的付费计划.
.env
文件,在前端项目中使用时,仅用于设置编译时使用的环境变量.该文件永远不会到达浏览器,但值通常只是插值(例如,使用 DefinePlugin)在最终的包源中,所以这里没有什么比这更安全的了.
警告:请勿在您的反应应用!
环境变量嵌入到构建中,这意味着任何人都可以通过检查应用的文件来查看它们.
# (s) 用于敏感信息.env ->编译->捆绑->浏览器->第三者(s) (s) (s) (s) (s)
也就是说,当在 Node.js 服务器中使用时,.env
文件再次用于设置环境变量,但这次是在应用程序启动时.但是这些值不与前端共享,因此将其用作安全解决方案的一种方法是公开您自己的端点,仅将您自己的域列入白名单,然后仅在服务器上使用敏感信息.
.env ->Node.js 服务器 ->第三者(s) (s) (s)^/(API调用)...捆绑->浏览器
但话又说回来,EmailJS 的 userId
不是敏感信息.
I am building my first react app and not sure about front end security. I am making a call to the following third party library: emailjs.sendForm(serviceID, templateID, templateParams, userID);
The userId field is sensitive information. I make the following call on my onSubmit handler. I am wondering if I need to secure this information somehow? Also, is there a way for me to check if a user can somehow see this information my inspecting and finding the code in the method somehow?
emailjs
.sendForm(
"gmail",
"client-email",
"#form",
"**here_is_the_sensitive_info**"
)
.then(() => {
resetForm({});
})
.catch(() => {
const acknowledgement = document.createElement("H6");
acknowledgement.innerHTML = "Something went wrong, please try.";
document.getElementById("form").appendChild(acknowledgement);
});
In this case, EmailJS is meant to be used in the browser, so I don't think that the userId
is sensitive at all.
In their own documentation, you can see the following instruction to get started.
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/emailjs-com@2.4.1/dist/email.min.js"> </script> <script type="text/javascript"> (function(){ emailjs.init("YOUR_USER_ID"); })(); </script>
That said, anyone can definitely see this in the source of the page in their browser. You are right to be cautious with anything sensitive in client-side JavaScript.
To avoid anyone using your userId
on their own website (which is very unlikely since it only triggers emails that you configured), you can whitelist your own domain with their paid plan apparently.
The .env
file, when used in a frontend project, only serves to set environment variables that are used at compilation time. The file never gets to the browser, but the values are often just interpolated (e.g. with the DefinePlugin) in the final bundle source, so there's nothing necessarily more secure here.
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
# (s) for sensitive info
.env -> compilation -> bundle -> browser -> third-party
(s) (s) (s) (s) (s)
That said, when used in a Node.js server, the .env
file serves to set, again, environment variables, but this time, at the start of the application. These values are not shared with the frontend though, so one way to use this as a secure solution is to expose your own endpoint, whitelisting only your own domain, which then uses the sensitive information only on the server.
.env -> Node.js server -> third-party
(s) (s) (s)
^
/ (api call)
...bundle -> broswer
But then again, here, EmailJS' userId
is not sensitive information.
这篇关于前端敏感信息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:前端敏感信息
基础教程推荐
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01