出现在页源中的html无显示属性的问题

Question

我有一个页面，我有4个部分，在这个页面上有div标签。我在我的页面上打印第一个部分，并使用'display: none‘属性隐藏其他部分。

稍后，当我单击页面上的next按钮时，它会隐藏第一个部分，并删除第二个部分的'display: none‘属性。

但有一个问题。在页面源代码中有我的4个部分的源代码。从这里，他们可以通过'display: block‘访问相关部分的内容。我不想要这个。我能做什么?

​

<div class="container mt-3" id="features_offer" style="display: block" data-aos="fade-up" data-aos-delay="200">
    <!-- offer -->
</div>

<div class="container mt-3" id="personal_information" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- form -->
</div>

<div class="container mt-3" id="reject_survey" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- survey display -->
</div>

<div class="container mt-3" id="complete" style="display: none" data-aos="fade-up" data-aos-delay="200">
    <!-- success screen -->
</div>

​

Answer 1

另一个选项是使用预先格式化的文本标记，然后调用更改内部的函数：

​

let text = `<div class="container mt-3" id="features_offer" style="display: block" data-aos="fade-up" data-aos-delay="200">
    <!-- offer -->
</div>` //Div element goes here

let condition = true

if (condition == true){
  document.getElementById('divs').innerHTML = text
} /*Only this will be rendered in html, regardless of whether dev tools is open*/

<pre id='divs'></pre>

​

Answer 2

在浏览器中没有真正隐藏源代码的方法，用户可以通过查看页面源代码来查找源代码。然而，有几个选项，您可以尝试尽可能混淆源代码。

一种选择是使用框架(我将以React为例)。

{condition && 
<div class="container mt-3" id="features_offer" data-aos="fade-up" data-aos-delay="200">
  <!--offer-->
</div>
}

您告诉通过这样做只在condition是true时才呈现此部分。当条件不是true时，这段代码将不会在检查器中显示(这在大多数前端框架中应该是一样的)

然而，如果有很多奉献精神的人想要获得源代码，他们仍然可以。尽管它在JavaScript中会被一个小型机混淆很多，但是源代码仍然存在，任何人都可以看到。

第二个选择是在vanilla JavaScript中使用JavaScript(虽然我真的不推荐它)。并手动管理何时到移除某些元素和何时到创建某些元素。使用自定义元素可以再次简化整个过程。

但是，我再次强烈建议退出2004系统，并使用一个框架来完成这类工作。