隐藏我的管理员登录信息 HTML

Question

我是 HTML 的新手，刚接触 1 周。我正在创建一个网上商店，我希望能够登录 "admin panel" 以便更轻松地管理我的产品。添加新的、删除、重命名等。我的问题是，我的登录信息存储在 html 代码中，我使用 if 语句来检查有效性。

在测试代码的时候，我很好奇，想检查element。毫不奇怪，我有完整的登录信息，任何人都可以访问它。

我需要以某种方式隐藏它，或者对除我以外的用户隐藏登录字段。但我不知道如何处理。我想到了一些解决方案，比如在商店页面上有一个隐藏部分，如果我点击它一定次数，它就会显示这些字段。但我觉得我把它复杂化了。

非常感谢任何想法。谢谢。下面是我的登录功能。

function login()
    {
        var username = "test username";
        var password = "testpassword";

        if(document.getElementById("username field").value == username && document.getElementById("password field").value == password)
        {
            var btn = document.createElement("BUTTON");
            document.body.appendChild(btn);

            <!-- hide the user name field after login -->
            document.getElementById("username field").hidden = true;

            <!-- hide the password field after login -->
            document.getElementById("password field").hidden = true;

            <!-- hide the login button after login -->
            document.getElementById("login btn").hidden = true;

            <!-- show a message indicating login was successfull -->
            window.alert("Login successfull! Welcome back admin!")
        }
        else
        {
            window.alert("Sorry, you are not authorized to view this page.");
        }
    }

这是检查元素的屏幕截图。我不想要任何像数据库那样疯狂的东西，因为我是唯一的用户，只是一种能够在不暴露自己的情况下访问管理面板的方法。再次感谢。

Inspect Element Screenshot

编辑：

我没有使用自己的服务器，我正在使用 Wix.com 创建初始网站，然后使用 HTML 小部件创建网上商店。我不认为他们允许人们与他们的服务器进行任何通信。

Answer 1

永远不要在客户端验证用户名和密码。它应该始终在服务器上完成。不要为此任务使用 javascript。允许您的用户在表单中输入他们的用户名和密码，然后将表单提交到服务器端脚本以验证他们的凭据。在客户端这样做永远不会安全。

Answer 2

如果您通过服务器提供页面，则可以强制执行基本的 HTTP 身份验证。设置应该非常简单，您将受益于安全标准。

例如，这里有 Apache 文档。

Answer 3

对于您的特定要求没有简单的解决方案，但在我要求您提供详细信息之前，我想强调三个非常重要的观点。

1: Javascript 不安全

Javascript 是一种客户端语言，这意味着您将要处理的来自用户的每条数据都可以直接修改。这些包括但不限于 HTML 标签的任何值或属性、内联 Javascript、加载的图像文件等。本质上，缓存在用户计算机上的任何内容都可以修改，也可能不修改成为您期望收到的东西。

因此，Javascript 身份验证系统绝对 不安全 根据该词的任何定义。对于只有您可以访问的本地页面，它可以完成工作，但这回避了为什么您首先需要身份验证的问题。即便如此，作为一个新的开发者，你还是会被广泛鼓励永远不要尝试这样做。以完全不安全的方式练习和学习如何做某事毫无意义，也没有人可能会建议这样做。

2: 身份验证是一个棘手的话题

验证登录不是一件容易的事。是的，制作登录脚本容易，但不容易正确。我永远不会试图阻止任何人自己制作东西，也不会阻止新开发人员追求任何目标，但是身份验证不是你应该在进入 HTML 一周后才学习的东西。如果这听起来很苛刻，我很抱歉，但有些人多年来一直在策划应用程序，但仍然没有安全地做到这一点。

3：第三方最好

可以创建您自己的身份验证系统，只有最坚定的攻击者才能访问，但它不会涉及 Javascript 身份验证。考虑 Javascript 对用户来说更方便，而不是对开发人员的解决方案。 Javascript 可以做一些了不起的事情，但是成为可信赖的数据源是它永远做不到的事情。请理解这一点，因为您提供的源代码存在安全漏洞。

--

现在，谈谈你想做什么。确定您是 "admin" 用户是您输入密码的目的。如果您能在输入密码之前确定自己是该网站的所有者，那么您就不需要密码了，对吧？简而言之，你不能做你想做的事；无论如何，这并不可靠。如果您使用特定的 IP，可以只显示这些表格，但 IP 可以被屏蔽、模仿和更改，这使得它不安全。

您可以使用多种第三方身份验证方法来完成所有繁重的工作。您所要做的就是将字段放在您的页面上，他们会处理剩下的事情。您可以使用任何社交媒体登录（Facebook、Twitter、Google Plus 等），也可以使用 O Auth，它会为您处理所有繁重的身份验证工作。

我并不是要阻止您或其他任何人采用他们自己的身份验证方法，但老实说，我认为这超出了您的技能水平，您不应该考虑正确现在。

隐藏我的管理员登录信息 HTML

Hiding my admin login information HTML

html

javascript

login

inspect-element