Además, ¿cuál es la mejor manera de ocultar los elementos del DOM para que el atacante no pueda cambiar la propiedad css o el atributo html para acceder al elemento? Sé que podemos usar React o Angular para desarrollar un sitio web y es más fácil ocultar o mostrar elementos. Pero quiero saber en HTML puro y JS, ¿cuál es la mejor manera?
Cualquiera puede usar la consola del navegador y encontrar todos los elementos, por ejemplo:
document.querySelectorAll('*'); No importa si los elementos están ocultos con CSS.
Incluso si cifra su HTML, tendrá que descifrarlo para mostrarlo al navegador. Entonces el código anterior todavía encuentra todos los elementos.
Cualquier código que tenga se puede desactivar estableciendo un punto de interrupción y reescribiéndolo en el navegador utilizando las herramientas de desarrollo.
Incluso si reemplaza document.querySelectorAll y todos los similares con una función vacía, los desarrolladores aún pueden simplemente agregar jQuery o cualquier motor de consulta DOM y encontrar sus elementos de esa manera.
Cualquier código que pueda usar para ocultar o mostrar elementos puede ejecutarse usando la consola del navegador si alguien dedica tiempo a entender su código.
¿De qué otra forma lo depurarías o lo probarías?
Angular, Vue, etc. eliminan elementos del DOM, ¡pero nunca debe esperar que esto sea una característica de seguridad! Un pirata informático puede establecer fácilmente un punto de interrupción en cualquier parte de su código, inspeccionar los resultados de la API desde el panel Red, ingresar al código de los componentes para averiguar qué HTML estarían representando y mucho más que no he comenzado a mencionar.
Para implementar la seguridad, solo desea tener en el navegador lo que el usuario necesita ver.
No hay manera de evitarlo.
Siempre se puede acceder a DOM, estilos, scripts, recursos, etc. mediante las herramientas de desarrollo.
En cuanto a la pregunta en el título de su pregunta:
style de atributos de estilo tienen una especificidad más alta que CSS del archivo (o etiquetas de estilo)!important tiene mayor especificidad que los estilos del atributo de stylestyle de atributo de estilo con !important tienen la especificidad más alta ¡Así que !important simplemente anula la especificidad si quieres verlo de esa manera. Aparte de eso, debe leer sobre la especificidad de CSS .
Ambos son lo mismo. Si almacena su valor desde html hidden o css hide. Cualquiera puede averiguarlos.
Entonces, si está utilizando html, js y css y desea pasar el valor como oculto, deshabilite la herramienta de desarrollador y la tecla abreviada para abrirlo de esta manera, puede proteger sus datos o usar cualquier método de cifrado para eso.