How to hide form code from view code/inspect element browser? - javascript
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
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:
Firefox: ☰ > Tools > Web Developer > Inspector
Chrome: ⋮ > More Tools > Developer Tools > Elements
They are outside the control of JavaScript.
Big Picture
Think about this:
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".
Browsers want web sites to properly work on them or their users would despise them.
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.
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;
}
});
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
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>
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.
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!)
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;
}
});
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)
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
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
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)
<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
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
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.
Related
Is it possible to generate a virtual keyboardEvent (tab) in IE8 with Javascript
I want to generate a virtual keyboardEvent(tab). I did some research on the same and got few usefully answers, however it not working for me. I understand that Javascript is event driven programming language so User should press require key, but I also want to understand that can we generate an keyboard event through JavaScript.
function fnGenerateTabKeyEvent() {
var e = document.createEventObject("KeyboardEvent");
e.keyCode = 9; // tab's ASCII
document.getElementsByName("someTxtBox").fireEvent("onkeyup", e);
}
<input type="text" id="someTxtBox"/>
It's not working in IE8 and I'm not getting any error either. I just want that whenever I can this function it should an keyboardevent(tab) from that text box.
Source1,Source2. Any suggestion will be helpful.
I think you were too hasty, as your code works on my machine:
<html>
<body>
<input type="text" id="someTxtBox" onkeyup="window.alert(event.keyCode)"/>
<script type='text/javascript'>
function fnGenerateTabKeyEvent() {
var e = document.createEventObject("KeyboardEvent");
e.keyCode = 9; // tab's ASCII
document.getElementById("someTxtBox").fireEvent("onkeyup", e);
}
fnGenerateTabKeyEvent();
</script>
</body>
</html>
There're of course some "issues" (like - accessing elements via getElementsByName, maybe having the script called before the <input>, but let's blame that on copy-pasting ;)) As such, on my IE, running in document mode 8 the alert successfully displays 9.
How to disable 'save image as' option on right click? [duplicate]
This question already has answers here: How do I disable right click on my web page? (30 answers) Closed 8 years ago. I want to prevent users from right-clicking on image on my site and saving them. I know there are many work-around for this, but I still need to do it. Any help? Also, this site has this feature - http://finsix.com/dart/#section-colors It can be html, javascript, jquery. Any solution will do.
$("body").on("contextmenu", "img", function(e) {
return false;
});
This is the "new" way in jQuery. Bear in mind anyone with technical knowledge would be able to get around this.
Use the image as a background-image of a div element, This will keep the easy minded people away from saving it ;)
<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
I have found this script on selfhtml.org.
This function is originally designed to disable the client side context menu and to insert your own context menu. But it can be used for this too.
But keep in mind: By using browser addons like NoScript or opening the image url user could get around this.
Multiple key presses in JavaScript only working in IE
I have the following code:
function handle_paste_keydown(key)
{
if(key.keyCode == 86 && key.ctrlKey) // Ctrl + V
{
alert("Test...");
}
}
This works in IE, but none of the other browsers. My reason for doing this is that I have finished creating a rich-text editor, but I need to handle the onpaste event carefully because formatted text is able to make it in to my editor, which could pose a minor risk to security, but also butchers my layout if malicious <span>s and <div>s make it in.
My current method is to give focus to an off-screen textarea, which means all code will be pasted in to that (which removes formatting); then I immediately grab the textarea.value and insert it at the current caret position in my contentEditable <div>.
So anyway, how do I get the Ctrl+V to work in all browsers and why doesn't it work in its current state?
Thank you.
If it works in IE but nowhere else you did something wrong.
Use the keypress event rather than keydown.
http://jsfiddle.net/Lxvgr/1/
document.getElementById('foo').onkeypress = function(e) {
if(e.charCode == 118 && e.ctrlKey) alert('pasted');
};
#Eric Sites: "use jQuery" isn't the answer to every javascript question. including an entire external framework to solve a simple 4byte issue like this is ridiculous.
How can I force the browser to print a PDF version of a webpage?
Consider a static HTML page as test.html, and a printable version of the page has been stored in test.pdf. How can I guide browser to load and print test.pdf instead of test.html when visitors tell their browser to print? If it's not possible how can I introduce a print button (using JavaScript) within the HTML page to do so?
You cannot force the browser to print a different file than the user is requesting/viewing. That would be a security nightmare!
Option 1 (JS (as requested) & HTML)
I suggest creating a printable version link on your site that will direct the user to the .pdf (opening the PDF in a new window would be preferable).
<!-- JS -->
<script type="text/javascript">
function LoadPrintableVersion() {
window.open("Test.pdf");
}
</script>
<!-- HTML -->
<span id="spanPrintableVersion" onclick="LoadPrintableVersion()">
Printable Version
</span>
Option 2 (pure html)
Printable Version
You can’t hijack the print command in the browser, but you can hijack keyboard shortcuts (although I wouldn’t recommend it) so that when the user prints using ctrl/cmd + p, it redirects to a PDF (or does something else). This is a usability minefield though, you should probably just create a big link that says "Printable version" and link it to the PDF (or a version of the page that uses a print-friendly CSS).
Another good options is to simply define some rules for the print media type in your CSS file, then the browsers will apply those when the user prints, without any hacks or javascript at all.
But since you asked I created a small shortcut hijacking script for the print command. It‘s kind of tricky because of the mac command key, but something like:
var cmd = false;
$(document).on('keydown', function(e) {
if(detectMacCommand(e.which)) {
cmd = true;
return;
}
// now detect print (ctr/cmd + p)
if ( e.which == 80 && ( e.ctrl || cmd ) ) {
e.preventDefault();
alert('redirect to PDF');
}
}).on('keyup', function(e) {
if(detectMacCommand(e.which)) {
cmd = false;
return;
}
});
function detectMacCommand(key) {
return ( $.browser.mozilla && key == 224 ||
$.browser.opera && key == 17 ||
$.browser.webkit && ( key == 91 || key == 93 ));
}
That’s pretty cool, but don’t use it :)
Here is the way the W3C says you should: <LINK REL="alternate" HREF="/path/to/PDFVersion.pdf" TYPE="application/pdf" MEDIA="print" TITLE="PDF version" /> Mind you, as far as I can tell, no browser currently supports this. Sorry.
Disabling Copy/Paste in a Web Page
How Do I disable the copy paste feature in my webpage. To be precise, I don't want my users to copy any information from my website and use them for personal purposes. The previous question on the same topic doesn't give enough explanation. The onselect and ondrag aren't working. Please help.
I don't want my users to copy any information from my website and use them for personal purposes There is no way to do this. If someone really wants your information, they can get it. You might be able to give them a litte bit of trouble with disabling certain functions using javascript or whatever...but you'll only give the people who don't know much about technology that trouble. And usually those people aren't even trying to copy your data. The one's who are, will figure out a way.
If you publish information online, you should clearly indicate your copyright claim on the page (or indicate the type of license you issue the content under). Please find and read the copyright law of your territory to understand what this does and doesn't allow - for example, in the UK there are provisions for making personal copies of copyrighted material and for using parts of copyrighted work for critical review or parody. You can't stop people from copying the content on your page. You can make it more difficult for them to do - but this will have a negative impact on your page. Techniques such as preventing the left-click of the mouse, intercepting keyboard events or converting your entire article into images just make your website less usable. If you have textual information on your website, I can re-type it even if you've stopped every other method of me copying the image. If you have an image and you've managed to lock out everything else, I can still do a screen-grab (not to mention the fact that my browser caches all the images in a temporary folder on my machine). Your content-paranoia affects many people who set up a website - but the idea behind the Internet is that it is used for sharing information.
Just add the following code to the HEAD tag of your web page:
<script type="text/JavaScript">
//courtesy of BoogieJack.com
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>
By default, Chrome and Firefox block disabling the right click menu. You have to manually edit an entry in about:config in Firefox to prevent it being blocked, which is not something you can force your visitors to do. Regarding IE, you can modify your BODY tag like so: <body onContextMenu="return false"> Which will prevent the right click context menu. Other than that, the next best step is to create an image of your text, place it in a .swf (flash) document, and point the page to load the .swf as the page. This will cause all browsers to display the flash context menu on right click, and will prevent simple copy/paste efforts. I do agree with previous replies, regardless of method used, any user can simply use their Print Screen key, paste the image in Paint (or other program), save it, and use OCR to grab your text.
You need to rethink your strategy if you're resorting to these measures on the front end. What you are trying to do is inherently wrong.
As a visitor to your web page, pulling something like this is just going to annoy me - I will eventually figure out what you've done and get around it. That said, I've recently found this particular method can be quite effective if you're aiming to restrict impatient or non-technical users. Proceed with caution...
<div class="text">
<p>Hello, world! Sadly, I won't work.</p>
<img alt="I can't be dragged or saved either :(" src="tree.png">
<div class="preventSelect"></div>
</div>
...and the CSS:
.text {
position: relative;
width: auto; /* can be fixed as well (ie 400px) */
width: auto; /* can be fixed as well (ie 400px) */
z-index: 0;
}
.preventSelect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
The obvious drawback for this method is that the user cannot interact with anything inside the div we're preventSelecting. That includes links, buttons, images etc.
Please don't use this unless you absolutely have to. Frankly, it's a pain in the ass for everyone.
To be honest, if you don't want people to use any information on your site, then you can't put it up there. If you stop them from being able to copy and paste the information, they'll still be able to take a screenshot of it, type it out and save the data that way. I know it's not the answer you're looking for, but that's just something to think about. (I did this because i can't comment yet).
Forget it. It is not possible to block these functions in a browser. The "best" you can do is to present your data in an image or Flash movie - inconceivable, slow, impractical, horrible to implement and also circumventable using OCR software. If all else fails, users will simply make screen shots or key in the data manually. If you present data to your users, you will have to live with the possibility that they can copy it. End of story. Use legal threats to prevent your contents, not technical means.
You can't ever disable it.. users can view the source of your page so the text is always available. If you put click handlers to disable right-click, they can turn javascript off.. The best you can try to do is make it inconvenient for people to deter them, but never can you prevent them.
It is impossible to secure a website against copying. There are some technices to make it more difficult, but as soon as the user has the information on his screen its already too late. He could for example take a picture with a camera if the screenshot function could be disabled somehow. Disabling of javascript functionality (f.e. shortcuts) is not working in all browsers and the user may disable javascript. Using programs like curl all the information on the webpage can be grabbed. Best thing you could do is to put all the information you present into an image.
What the developers of lyrics.com have done is attach events to document.body.oncontextmenu, document.onselectstart, and document.body.onkeydown to disable the actions browsers would take. It can be done as simply as <body oncontextmenu="return false" onselectstart="return false" onkeydown="if ((arguments[0] || window.event).ctrlKey) return false"> You'd need all three; oncontextmenu basically governs right clicks, onselectstart covers drag-selecting with the mouse, and onkeydown Ctrl-key events (like someone who'd hit Ctrl+A, Ctrl+C to copy the whole page). But I highly recommend that you NOT DO THIS. It kills usability and frustrates even legitimate users (for example people that have certain key mappings set up, or the ones who use "back" and "reload" from the context menu), and the ones you'd have to worry about would not be hindered even the slightest bit. And frankly, your content is not as special as you think it is, or you wouldn't be serving it up to any loser with a web browser. Information that valuable is not put online. As has been noted before, all that return false stuff is not enforceable. And because i found the page particularly infuriating, that prompted me to pop up a console and dissect what they did, and detach event handlers so i could copy whatever i like and they don't even get their precious click-tracking data. Really, though, all anyone has to do is disable JavaScript. The only way to keep people from copying text from the internet, is to keep it off the internet. Any other way is doomed to fail, as you yourself are handing them a copy as part of the very act of serving it to them.
You can stop from copy paste using below code <body ondragstart="return false" onselectstart="return false">
<script type="text/javascript">
function md(e)
{
try { if (event.button==2||event.button==3) return false; }
catch (e) { if (e.which == 3) return false; }
}
document.oncontextmenu = function() { return false; }
document.ondragstart = function() { return false; }
document.onmousedown = md;
</script>
<br />
Try adding this css:
#content {
pointer-events: none;
}
This will deactivate mouse actions, thus copy-paste too.
Disable cut, copy, and paste options.
<script language="text/javascript">
// disable portal cut copy and paste options.
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
</script>
But I prefer to enable this option on localhost.
<script language="text/javascript">
// disable portal cut copy and paste options.
$('body').bind('cut copy paste', function (e) {
// enable only localhost
if (location.hostname === "localhost" || location.hostname === "127.0.0.1")
{
return;
}
e.preventDefault();
});
</script>
please try this one its working for me...
$('body').bind('cut copy paste',function(e) {
e.preventDefault(); return false;
});
With Javascript you can disable copy/cut/drag for average users who don't know how to use inspect element feature, for that just add this simple javascript code:
document.addEventListener("copy", disable);
document.addEventListener("cut", disable);
document.addEventListener("drag", disable);
document.addEventListener("dragstart", disable);
document.addEventListener("dragover", disable);
document.addEventListener("dragend", disable);
document.addEventListener("drop", disable);
function disable(e) {
if (e) e.preventDefault();
return false;
}
If the user however tries to access the source code then you can't stop him, the best is to wrap each sentence in its own span to make it difficult for him to copy.
<script type="text/JavaScript">
function killCopy(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>
I would suggest disabling right click.
<script language="text/javascript">
var message = "Not allowed.";
function rtclickcheck(keyp){
if (navigator.appName == "Netscape" && keyp.which == 3){
alert(message); return false;
}
if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
alert(message);
return false;
}
}
document.onmousedown = rtclickcheck;
</script>