42

I want to hide form code from view code/inspect element browser , how can i do that ?

This is my code, please see below:

<div style=" text-align: center;  padding: 300px; font-family: lato; ">
     Please wait redirect page ......<br>
    <img src="http://maps.nrel.gov/sites/all/modules/custom_modules/hydra/assets/images/loading_bar.gif" border="0">
</div>


<form name="f1" action="payments.php" method="post">
<input type="hidden" name="id_crad" value="...">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="amount" value="12.99">
</form>


<script type="text/javascript">
setTimeout(function(){f1.submit();}, 3000);
</script>

Please see picture

enter image description here

7
  • 1
    I don't think this is possible unless you're using a compiled language (eg. A Java web applet, Flash [easy to decompile], etc).
    – Kodlee Yin
    Jun 20, 2014 at 4:10
  • 3
    You can't. Thankfully. Do you really want to lose the ability to see what websites are doing to you?
    – fin
    Jun 20, 2014 at 4:11
  • 8
    You can easily hide code from prying eyes by not including it in any web page.
    – RobG
    Jun 20, 2014 at 4:13
  • 1
    RobG --- please show example Jun 20, 2014 at 4:14
  • 1
    you cant hide that, your browser already shows what it can do. why not put that values on the server instead Jun 20, 2014 at 4:30

14 Answers 14

41

You simply can't.

Code inspectors are designed for debugging HTML and JavaScript. They do so by showing the live DOM object of the web page. That means it reveals HTML code of everything you see on the page, even if they're generated by JavaScript. Some inspectors even shows the code inside Iframes.

How about some JavaScript to disable keyboard / mouse interaction...

There are some JavaScript tricks to disable some keyboard, mouse interaction on the page. But there always are work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem.

Try theses:

They are outside the control of JavaScript.

Big Picture

Think about this:

  1. Everything on a web page is rendered by the browser, so they are of a lower abstraction level than your JavaScript. They are "guarding all the doors and holding all the keys".
  2. Browsers want web sites to properly work on them or their users would despise them.
  3. As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.

Basically, browsers are god to your JavaScript. And they want to grant the web developer super power with code inspectors. Even if your trick works for a while, the browsers would want to undo it in the future.

You're waging war against god and you're doomed to fail.

Conclusion

To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place.

5
  • 1
    What an absolute statement to make.
    – mjs
    Aug 10, 2016 at 17:27
  • 7
    To the best of my knowledge, that absolute statement is true. There are some javascript tricks to disable some keyboard, mouse interaction on the page. But there are always work around to those tricks. For instance, you can use the browser top menu to enable DOM inspector without a problem. Aug 11, 2016 at 3:28
  • 17
    To put it simple, if you do not want people to get something in their browser, you should never send it to their browser in the first place. Aug 11, 2016 at 3:30
  • What about @dihak's answer below it seems that it does the trick Nov 9, 2020 at 0:34
  • @AhmedAbuthwabah: You can checkout the comments to his answer. Not all browsers "support" that workaround. And since it is not an intended "feature" of a browser, you should not expect it to keep working on those browsers that "support" it, as I described in the "Big Picture", Nov 9, 2020 at 6:18
24

There is a smart way to disable inspect element in your website. Just add the following snippet inside script tag :

$(document).bind("contextmenu",function(e) {
 e.preventDefault();
});

Please check out this blog

The function key F12 which directly take inspect element from browser, we can also disable it, by using the following code:

$(document).keydown(function(e){
    if(e.which === 123){
       return false;
    }
});
10
  • 6
    It only disable the right click and inspect element option , will allow f12 and directly take inspect element from browser, and the reality is you can't disable it . Jun 23, 2015 at 9:26
  • Well, if we can disable all key events, then it is possible. Just try the following code. $('*').off('keyup keydown keypress');
    – Nayana_Das
    Dec 30, 2015 at 8:04
  • that is not the right way to do that, never restrict any key event from our code the user may be used those keys for someother purpose so we cannot do that .Also if we are disable the key events using the code given by you then also we can take inspect element directly from browser,it is a feature provided by browser so how can we restrict that?? Dec 30, 2015 at 8:20
  • 8
    Still you can open Chrome inspector from menu. It's worthless.
    – modernator
    Jan 31, 2017 at 6:40
  • 5
    How about Ctrl + Shift+ i ? Mar 7, 2018 at 8:57
17

You can add this script to make a error when user inpect :D

Try this code

<script type="text/javascript">
eval(function(p,a,c,k,e,d){e=function(c){return c.toString(36)};if(!''.replace(/^/,String)){while(c--){d[c.toString(a)]=k[c]||c.toString(a)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(3(){(3 a(){8{(3 b(2){7((\'\'+(2/2)).6!==1||2%5===0){(3(){}).9(\'4\')()}c{4}b(++2)})(0)}d(e){g(a,f)}})()})();',17,17,'||i|function|debugger|20|length|if|try|constructor|||else|catch||5000|setTimeout'.split('|'),0,{}))
</script>

From http://www.bloggerku.com/2017/08/memasang-anti-inspect.html

4
  • 1
    I already encountered this one on a website while attempting to inspect element. (function() {}).constructor('debugger')() and setTimeout do the trick 😂
    – ninhjs.dev
    Aug 24, 2017 at 17:41
  • 2
    Doesn't work on Chrome. It does show an error but can easily view and edit the inspect elements. Nov 12, 2017 at 7:02
  • It create difficulty to inspect the source but not impossible. but I disabled indexedDB by this code.
    – A.Z. Soft
    Oct 18, 2020 at 1:03
  • I see some websites hide their m3u8 how can they do that? Nov 9, 2020 at 0:14
15

You can use this code -

Block Right Click -

<body oncontextmenu="return false;">

Block Keys - You should use this on the upper of the body tag. (use in the head tag)

<script>

    document.onkeydown = function (e) {
        if (event.keyCode == 123) {
            return false;
        }
        if (e.ctrlKey && e.shiftKey && (e.keyCode == 'I'.charCodeAt(0) || e.keyCode == 'i'.charCodeAt(0))) {
            return false;
        }
        if (e.ctrlKey && e.shiftKey && (e.keyCode == 'C'.charCodeAt(0) || e.keyCode == 'c'.charCodeAt(0))) {
            return false;
        }
        if (e.ctrlKey && e.shiftKey && (e.keyCode == 'J'.charCodeAt(0) || e.keyCode == 'j'.charCodeAt(0))) {
            return false;
        }
        if (e.ctrlKey && (e.keyCode == 'U'.charCodeAt(0) || e.keyCode == 'u'.charCodeAt(0))) {
            return false;
        }
        if (e.ctrlKey && (e.keyCode == 'S'.charCodeAt(0) || e.keyCode == 's'.charCodeAt(0))) {
            return false;
        }
    }
</script>
0
5

This code removes the inner html of an element from the dom when the debugger is open (tested in Chrome and IE)

var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;

element.__defineGetter__("id", function() {
    currentInnerHtml = "";
});

setInterval(function() {
    currentInnerHtml = innerHtml;
    console.log(element);
    console.clear();
    elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);

Here #element-to-hide is the id of element you want to hide. It is a hack, but I hope it helps you.

2

While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.

You can first of all try and stop the inspect menu by doing the following:

<body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;">

I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.

I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source:www.exapmle.com and that will show them the source. So you will then probably want to encrypt the HTML(I would advise using a website that gives you an extended security option). There are plenty of good websites that do this for free (eg:http://www.smartgb.com/free_encrypthtml.php) and use extended security which you can't usually unencrypt through HTML un encryptors.

This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)

Ok so you can't fully hide the HTML but you can do an extremely good job at stopping people seeing it.(If you think about it most people don't care about looking at a page's HTML, some people don't even know about inspecting and viewing the source and the people who do probably won't be bothered or won't be able to get past theses implications! So probably no one will see you HTML)

(Hope this helps!)

2

Below JavaScript code worked for me to disable inspect element.

// Disable inspect element
$(document).bind("contextmenu",function(e) {
 e.preventDefault();
});
$(document).keydown(function(e){
    if(e.which === 123){
       return false;
    }
});
1
  • above code only disable right click and F12 key?
    – Kapil Soni
    Jan 28, 2021 at 7:42
1

While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.

You can first of all try and stop the inspect menu by doing the following:

I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.

I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source

This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)

0

You can use the following tag

<body oncontextmenu="return false"><!-- your page body hear--></body>

OR you can create your own menu when right click:

https://github.com/swisnl/jQuery-contextMenu

0

you can not stop user from seeing our code but you can avoid it by disabling some keys

simply you can do <body oncontextmenu="return false" onkeydown="return false;" onmousedown="return false;"><!--Your body context--> </body>

After doing this following keys get disabled automatically

1. Ctrl + Shift + U 2. Ctrl + Shift + C 3. Ctrl + Shift + I 4. Right Click of mouse 5. F12 Key

0

While I don't think there is a way to fully do this you can take a few measures to stop almost everyone from viewing the HTML.

You can first of all try and stop the inspect menu by doing the following:

I would also suggest using the method that Jonas gave of using his javascript and putting what you don't want people to see in a div with id="element-to-hide" and his given js script to furthermore stop people from inspecting.

I'm pretty sure that it's quite hard to get past that. But then someone can just type view-source:www.exapmle.com and that will show them the source. So you will then probably want to encrypt the HTML(I would advise using a website that gives you an extended security option). There are plenty of good websites that do this for free (eg:http://www.smartgb.com/free_encrypthtml.php) and use extended security which you can't usually unencrypt through HTML un encryptors.

This will basically encrypt your HTML so if you view the source using the method I showed above you will just get encrypted HTML(that is also extremely difficult to unencrypt if you used the extended security option). But you can view the unencrypted HTML through inspecting but we have already blocked that(to a very reasonable extent)

0

<script>
document.onkeydown = function(e) {
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.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;
}
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'H'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'A'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)){
return false;
}
}
</script>

Try this code

0

if someones is interested you can delete the form node from the DOM after the submission and it won't be there using the inspector.

https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove

0

I did some digging for your question and found an intriguing idea by PwnFunction.

If you can fit your complete code into your CSS file. Then we can use the response header "Link" to link your CSS file to your request for the site.

According to MDN Docs:

HTTP headers let the client and the server pass additional information with an HTTP request or response. An HTTP header consists of its case-insensitive name followed by a colon (:), then by its value. Whitespace before the value is ignored.

The Link entity-header field provides a means for serializing one or more links in HTTP headers. It is semantically equivalent to the HTML link element.

So this header can link your stylesheet to your HTTP request. So what will happen in the backend is that whenever someone tries to "inspect element" your source code, they'll see a blank page for your HTML code. But they can still see the link to your stylesheet in developer tools.

Not the answer you're looking for? Browse other questions tagged or ask your own question.