Are there possibilities to hide part of the html of the inspect?

Asked

Viewed 821 times

0

I want parts of html to be hidden from the user’s inspection, there are possibilities to run it with some script or with html itself?

javascript html

  • Your doubt would be to hide an element or delete it to not be seen by inspect element ?

2 answers

0

Not. So far (and I imagine it always will be) is impossible conceal any resource forming part of front-end. This covers files and snippets of HTML, CSS, Javascript, and some others.

What you can do is try to encode your HTML code using such means as base 64. However, the browser will make a parse and display the HTML and CSS code by the "inspect element" tool anyway.

An example:

const code = 'JTNDYiUzRUVzdG91JTIwc2VndXJvJTNGJTIwTiVDMyVBM28hJTNDJTJGYiUzRQ=='
const html = decodeURIComponent(atob(code))

document.body.innerHTML = html

Note that through inspecting element, you can still see that it is a tag <b>.

Anyway, there’s no point in wasting your time on this. Be concerned, however, to ensure the security of your application generally, and not "hide" the code that is part of the front-end.

0


I created an example for you NOTE is just for reading. The codes are all executed on console press Ctrl + shift + i. More can also put on tag <script> etc..

<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>teste</title>
  <style>
    
    body {width: 50%;margin: 5% auto;}
    h1, h3, p {font-family: arial;}

  </style>
</head>
<body>

<h1>Execute isso no console do navegador</h1>

<h3>visibility</h3>

<p>Execute o bloco de código logo abaixo para poder ocultar o <strong>html</strong> inteiro, usando o <strong>visibility: hidden</strong>.</p>

<pre>
  <code>
    document.body.style.visibility = "hidden";
  </code>
</pre>

<p>Volte a ver o elemento novamente.</p>

<pre>
  <code>
    document.body.style.visibility = "visible";
  </code>
</pre>

<p>Esse código em cima serve para qualquer <strong>tag</strong> no <strong>html</strong> que você queira ocultar ou torna-la visível
outros exemplos são <strong>body</strong>, <strong>p</strong>, <strong>h1</strong>, <strong>section</strong>, <strong>div</strong>, etc.</p>

<hr>

<h3>display</h3>

<p>Ou você pode usar o <strong>display:none</strong> para poder ocultar e o <strong>display: block</strong> para aparecer.</p>

<p>Ocultar</p>

<pre>
  <code>
    document.section.style.display = "none";
  </code>
</pre>

<p>Aparecer</p>

<pre>
  <code>
    document.section.style.display = "block";
  </code>
</pre>

<h3>Com id</h3>

<p>Caso você tivesse um elemento com <strong>id="example"</strong> poderia desaparecer ele assim.</p>

<pre>
  <code>
    document.getElementById("example").style.display = "none";
  </code>
</pre>

<p>E aparecer ficaria assim</p>

<pre>
  <code>
    document.getElementById("example").style.display = "block";
  </code>
</pre>

<hr>

<h3>Com class</h3>

<p>Ou invés de <strong>id</strong> fosse <strong>class</strong> ficaria assim.</p>

<pre>
  <code>
    document.getElementsByClassName("example")[0].style.display = "none";
  </code>
</pre>

<p>E aparecer ficaria assim</p>

<pre>
  <code>
    document.getElementsByClassName("example")[0].style.display = "block";
  </code>
</pre>

<p>você pode usar o <strong>visibility também.</strong></p>

<p>Note depois do <strong>getElementsByClassName("example")</strong> possui um index <strong>[0]</strong>. isso serve para você indicar 
qual classe vai receber o código, Se eu tivesse 5 classe com a mesma <strong>class="example"</strong> e eu se eu quiser aplicar o código
na 4 class eu usaria <strong>[3]</strong>. O javascript sempre começara do 0 se você for trabalhar com array.</p>

</body>
</html>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.