display:none 安全吗？答案

【问题标题】：Is display:none safe?display:none 安全吗？
【发布时间】：2019-08-17 05:51:33
【问题描述】：

我知道这是一个基本问题，可能太简单了，但是..

我隐藏了根据用户数据执行关键操作的关键按钮。

如果我阅读了用户的数据并意识到他不应该有某个按钮（比如他没有付款），那么我将其隐藏在 css 上：

.hidden{
display:none;
}

这个类被添加到html。（这对安全性有影响吗？）

黑客有没有办法抓住这个按钮并“点击”它？

我需要添加另一层安全onClick吗？

【问题讨论】：

如果您需要安全性，请不要生成该 html 部分。
隐藏按钮并不安全，因为黑客很容易知道前端隐藏的按钮。所以你应该更喜欢从后端控制它
您必须在服务器端检查您的业务。
display: none 本身绝对不够。您也需要在后端处理此问题。
谢谢大家，但只是为了理解 - 他能做什么？他不能取消隐藏吧？他不能操纵我的js并点击它吗？那么例如什么？

标签： javascript html css security

【解决方案1】：

display: none; 将使该元素在浏览器中不可见。但是，它仍然存在于 DOM 中，如果用户去检查网站，按钮的 HTML 代码和onClick 代码将存在于 DOM 中。

这个 CSS 属性不适合实现安全功能，它只是实现用户可能希望看到的可见性变化。

业务逻辑的安全部分必须在后端代码中实现。这样，黑客就无法调用 onclick 并进行任何不需要的 API 调用。

【讨论】：

黑客如何在 js 上调用我的点击事件？（对不起，如果这是一个愚蠢的问题）
任何 JS 函数都可以从开发者控制台执行。将那段代码加载到 callStack 中可能需要一些工作。但是在加载函数的上下文后，它几乎只是写下函数的名称并按下回车键，为了减少这些威胁，请关注这个线程stackoverflow.com/questions/19235872/…
即使它是一个 https 网站？我以为你可以看到代码但不能更改它，因为加密
HTTPs 使用 SSL 或 TLS 提供双向加密，这对于 MITM 攻击非常有用。一旦数据被传送到浏览器，它就不再被加密，加密只在数据传输过程中存在。您可能还想看看 XSS 攻击。
非常感谢。你帮了我。有没有关于简单的基本攻击以及如何防范它们的文章 - 或者不该做什么？

【解决方案2】：

没有。任何存在于前端的东西都是不安全的。

您应该使用不在用户本地设备上运行的后端代码来实现任何功能或验证，而是验证代码。

例如，隐藏按钮、执行验证或执行任何安全操作都应在后端实现，您始终可以在前端隐藏这些元素，但不要依赖仅使用您的用户界面的人用于与您的应用程序交互。

在 JavaScript 上添加验证可以帮助用户，但不会帮助任何人访问他们不应该访问的任何内容（例如，他们可以找出您正在使用的 URL，然后直接向它发送请求）。

【讨论】：

【解决方案3】：

简单的答案是否

每个人都可以通过页面检查工具看到您的<button>。

所以这样你只能从网站中隐藏按钮，而不是从 DOM 中。

尝试通过服务器端代码（如 PHP 或您正在使用的任何代码）隐藏它。

【讨论】：

【解决方案4】：

我知道这个问题已经有一个公认的答案。但只是为了演示使用display: none“取消隐藏”按钮是多么微不足道，请考虑以下示例：

在下面的 sn-p 中，我有一个文本输入，您可以在其中键入任意 JavaScript。可以把它想象成在控制台中输入 JavaScript。
我还有一个隐藏按钮，当您第一次运行 sn-p 时看不到它。使用display: none 隐藏它。
单击“运行片段”，然后在文本输入类型（或复制/粘贴）此代码： document.getElementById("hiddenButton").style.display = "inline"
隐藏按钮现在应该出现在“运行代码”按钮旁边。

$("#submit").on("click", function () {
  eval($("#js").val());
});

#hiddenButton {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Enter some JavaScript:
<input id="js" type="text"/>
<button id="submit">Run Code</button>
<button id="hiddenButton">Hidden Button!</button>

但更重要的是，用户甚至不必“取消隐藏”按钮即可单击它。他们可以使用以下方法模拟单击按钮：

document.getElementById("hiddenButton").click();

所以，如果他们查看文档源，发现按钮存在但被隐藏，他们仍然可以模拟按钮上的点击事件。

网站通过 SSL 提供服务这一事实并不重要。 SSL 保护传输中的数据。页面上的按钮是静态数据。 StackOverflow 是一个 HTTPS 站点，但您仍然可以执行我上面讨论的代码。

【讨论】：

【解决方案5】：

是的。您可以使用纯 CSS 继续隐藏您的按钮。您还需要在后端增加一层新的安全性。

您不应在前端处理用户操作授权。您可以继续使用 CSS 隐藏您的按钮，但您需要保护此类按钮可以在后端执行的操作，以便只有授权的人才能执行该操作。因此，即使有人可以伪造按钮操作，后端也会阻止作者未经您的系统授权执行该操作。

【讨论】：

【解决方案6】：

你可以使用

Width:0; & Opacity:0;

而不是显示：无；

【讨论】：

【解决方案7】：

display:none 意味着该标签根本不会出现在页面上（尽管您仍然可以通过 dom 与它进行交互）。其他标签之间不会为它分配空间。

例如：

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

将 [style-tag-value] 替换为 display:none 会导致：

test |   | test

将 [style-tag-value] 替换为 visibility:hidden 会导致：

test |                        | test

【讨论】：