javascript - How to hide html source code of website when user use view source option - Stack Overflow

admin管理员组

文章数量:1335621

I see some websites hiding source code when i try to visit the 'View Source' option on the browser... like the following page...

 view-source:

How do they do that ? what technology they use so it look some piece of javascript instead of fully formal HTML code that we use to generate a web page ?

Also when i see the same swiggy website in a mobile phone that operates as same as the android app of them. Do they use any framework which help them to achieve this app feel or they use AJAX / HTML only to make us feel like same as their app ?

I see some websites hiding source code when i try to visit the 'View Source' option on the browser... like the following page...

 view-source:https://www.swiggy./bangalore/restaurants

How do they do that ? what technology they use so it look some piece of javascript instead of fully formal HTML code that we use to generate a web page ?

Also when i see the same swiggy. website in a mobile phone that operates as same as the android app of them. Do they use any framework which help them to achieve this app feel or they use AJAX / HTML only to make us feel like same as their app ?

• javascript
• html
• web-development-server

Share Improve this question Follow asked Mar 5, 2019 at 17:06 user2301765user2301765 72922 gold badges1010 silver badges2222 bronze badges 5

• 1 They are not hiding anything, they are just minifying the code using a minifier – Get Off My Lawn Commented Mar 5, 2019 at 17:09
• I see human-readable-ugly code. In what sense are you considering it "hidden"? – Ray Butterworth Commented Mar 5, 2019 at 17:11
• 1 If you need to hide your browser's source code then your doing something wrong... – Get Off My Lawn Commented Mar 5, 2019 at 17:19
• 1 That site is using a SPA framework, not minified html. You can view the generated HTML using the browser developer tools. It's not possible to prevent users from viewing page source code; at most you can make it mildly inconvenient. – Daniel Beck Commented Mar 5, 2019 at 17:36
• @DanielBeck - Thank you for the information. yeah i know the dev tools allow me to view all... but i want this approach so people does not understand instantly how the source code is made... – user2301765 Commented Mar 5, 2019 at 17:41

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

You will be unable to hide the HTML. You can minified, do a lot of spaces to try to hide it or use javascript to "Hide" or obfuscate and create the DOM structure later. At the end the browser need the html to be able to render a web-page.

By saying this you can see the created DOM and will see all the html code use to render what you see on the browser.

Nobody will pletely hide it, is just some methods to "hide" or make it more difficult to copy etc.

In the case of the android or either IOS applications they can create a custom html to your device base on the browser User-Agent. [ https://en.wikipedia/wiki/User_agent]

Hope it helps.

To disable right click

document.addEventListener('contextmenu', event => event.preventDefault());

To disable F12 options

document.onkeypress = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onmousedown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}
document.onkeydown = function (event) {
event = (event || window.event);
if (event.keyCode == 123) {
return false;
}
}

To Disable ctrl+c, ctrl+u

jQuery(document).ready(function($){
$(document).keydown(function(event) {
var pressedKey = String.fromCharCode(event.keyCode).toLowerCase();

if (event.ctrlKey && (pressedKey == "c" || pressedKey == "u")) {
alert('Sorry, This Functionality Has Been Disabled!');
//disable key press porcessing
return false;
}
});
});

This is impossible on most if not all modern browsers. Even if you disable right click or ctrl + u or ctrl + shift + i there is still the option to view page source in Google Chrome (only browser I can verify).

As other people have mentioned you can minify your code to obscufate it, but even that can be "decrypted" if you have someone who has enough time on their hands to look at that disgusting code.

Another silly option which allows you not to show the source code is by doing a Single Page Application (all modern Javascript framework like Angular, React or Vue are made in this scope).

In this case the source code will be an index.html file nearly empty. The html will be generated dynamically through you javascript code (by the use of template or JSX syntax)

PS: in this way you can still see the generated html in the console of the browser (like Elements tab in Chrome)

Just wanted to point out that I am new at this but perhaps this can help:

You can use

<body oncontextmenu="return false">
  ...
</body>

or

<script language="javascript">
  document.onmousedown = disableclick;
  status = "Right Click Disabled";
  Function disableclick(e)
  {
    if(event.button == 2)
    {
      alert(status);
      return false; 
    }
  }
</script> 

Note: Like many ments already, this is not truly possible but I'll leave this code up just in case it helps in your particular case.

how to hide my source code so to not be copied

https://www.codeproject./Articles/11222/Disabling-the-right-click-on-web-page

You can have your HTML and JS piled on your own server, and streamed in realtime to your users instead of being piled on their own puter. Services like HideJS make this easy. Despite what others are saying, this makes it physically impossible for anyone to see your source code.

Just add php

<?php
    for($i = 0; $i <= 500; $i++) {
        echo "

";
    }

    for($i = 0; $i <= 100; $i++) {
        echo "        ";
    }
?>
<html>
<head>...</head>
<body>...</body>
</html>
<?php 
    for($i = 0; $i <= 500; $i++) {
      echo "

";
    }
?>

本文标签： javascriptHow to hide html source code of website when user use view source optionStack Overflow