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?
2 Respostas
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>
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.