One alternative way is to disable the right click on your webpage so that the user will not be able to inspect the page. You can do that with JavaScript by adding an event listener for the “contextmenu” event and calling the preventDefault() method.
document.addEventListener('contextmenu', event => event.preventDefault());
But this will not be a good user experience, try avoiding it.
There is some text that I want to hide from users. So far, I used <body oncontextmenu="return false;"> and a JavaScript function below:
<script>
document.onkeydown = function(e)
{
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
return false;
}
}
</script>
However, this doesn’t stop an individual from opening up dev tools and seeing the text. Is there any way to hide or at least obfuscate a <p> tag?
Here is the part of the code I want to hide. It’s in Django:
<p class="mb-1 multiline-ellipsis">{{item.itemDescription}}</p> <!--thing that I want to hide from inspection-->
I am new to web development, so please help.
Not really, anything you send to the client
Note that even if you find a way, such methods will render your page unusable for people with disabilities. If the inspector can’t see it, a screen reader won’t be able to either.