0

Quero que partes do html fiquem ocultadas do inspecionar do usuário, existem possibilidades de executar isso com algum script ou com próprio html?

1
  • Sua duvida seria ocultar um elemento ou deletar ele para nem ser visto pelo inspecionar elemento ? Commented 31/05/2019 às 0:58

2 Respostas 2

0

Criei um exemplo para você NOTE é só para ler. Os códigos são tudo executado no console pressione Ctrl + shift + i. Mais poderá também colocar na 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>

0

Não. Até o momento (e imagino que sempre será) é impossível ocultar qualquer recurso que faça parte do front-end. Isso abrange arquivos e trechos de código HTML, CSS, JavaScript, e alguns outros.

O que você pode fazer é tentar codificar o seu código HTML usando meios como base 64. No entanto, o navegador irá fazer um parse e mostrar o código HTML e CSS pela ferramenta "inspecionar elemento" de qualquer forma.

Um exemplo:

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

document.body.innerHTML = html

Note que através do inspecionar elemento, você ainda poderá ver que é uma tag <b>.


De qualquer modo, não vale a pena perder o seu tempo com isso. Preocupe-se, no entanto, em garantir a segurança da sua aplicação de modo geral, e não "ocultar" o código que faz parte do front-end.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .