-1

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 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>
ibrahimguzel005
  • 27
  • 7
  • 1
    All html in the browser can be accessed by the user. You cannot do anything about that. If you want to not show data, don't load it into the browser. If you want them to only see one bit at a time, use AJAX – mplungjan Oct 02 '22 at 15:30
  • You can change this static markup by inserting those elements dynamically using javascript – Mauro Aguilar Oct 02 '22 at 15:34
  • Could you please share a sample code on how to do it? – ibrahimguzel005 Oct 02 '22 at 15:35
  • @ibrahimguzel005 there are many ways you can achieve that, the most common way to do it is by using a UI library like [React](https://reactjs.org/) or a framework like [Angular](https://angular.io/) or [Vue](https://vuejs.org/), even a simple templating engine like [Mustache](https://github.com/janl/mustache.js/) would suffice, are you using or are you familiar with any of these technologies by any chance? or just plain html/css/javascript? – Mauro Aguilar Oct 02 '22 at 15:45
  • Unfortunately, I do not have the knowledge to use the libraries you mentioned. Those libraries seem too complicated to me. I use straight. Which library would you recommend I use? – ibrahimguzel005 Oct 02 '22 at 15:54

2 Answers2

0

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 class="container mt-3" 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.

milansav
  • 26
  • 1
  • 4
0

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

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>
BazzerDv
  • 31
  • 4