Problem with html display none property appearing in page source-CodePudding

I have one page and I have 4 sections with div tags on this page. I print the first of these sections on my page and hide the other sections with the 'display: none' property.

Later, when I click the next button on my page, it hides the first section and removes the 'display: none' property of the second section.

But there is one problem. There are source codes of my 4 sections in the page source. And from here, they can access the content of the relevant section by 'display: block'. Idont want this. What can I do?

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

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

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

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

CodePudding user response：

Another option is to use a preformatted text tag and then call a function that changes the inside:

let text = `<div  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>

CodePudding user response：

There is no real way of hiding source code in browser, the user can either look it up by viewing page source. However there are a few options you can try to obfuscate the source code as much as possible.

One option would be to use a framework (I'll use React as an example).

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

By doing this you're telling React to only render this section when condition is true. When the condition is not true this code won't get displayed in Inspector (This should work the same in most frontend frameworks)

However if someone with a lot of dedication wanted to get to the source code, they still can. Even though it would be obfuscated a lot in the JavaScript by a minifier, the source code is still there for anyone to see.

Second option is to use the DOM API in vanilla JavaScript (although I really do not recommend it). And manually manage when to remove certain elements and when to create certain elements. This whole process could be again simplified with custom elements.

But again I strongly recommend to get out of 2004s and use a framework for this kind of the job.