1

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.com/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.com 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 ?

Improve this question
5
  • 1
    They are not hiding anything, they are just minifying the code using a minifier Commented Mar 5, 2019 at 17:09
  • I see human-readable-ugly code. In what sense are you considering it "hidden"? Commented Mar 5, 2019 at 17:11
  • 1
    If you need to hide your browser's source code then your doing something wrong... 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. 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... Commented Mar 5, 2019 at 17:41

7 Answers 7

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 completely 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.org/wiki/User_agent]

Hope it helps.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

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;
}
});
});
Improve this answer

Comments

1

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.

Improve this answer

Comments

0

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)

Improve this answer

3 Comments

this is interesting... i think this is what i need to look more into... will try to learn react js and see if i can make a page with minimal source shown on view source...
While SPA apps make it more difficult to use "view source", it's still simple to view the script-generated HTML using the browser's developer tools.
The React DevTools helps ruin it, though.
0

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 comments 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.com/Articles/11222/Disabling-the-right-click-on-web-page

Improve this answer

4 Comments

@RyanWilson it was a link - my bad! But edited to satisfy
@Malcolm No worries, welcome and don't feel bad about being new. It's good that you added the actual code to your answer, if you understand what you posted, adding comments to explain the code is also helpful. I gave you a +1 for the attempt as someone decided to down-vote you even though you are new and are just learning the ropes.
No downvote from me, but: disabling the context menu doesn't prevent users seeing the source code (there's no way to do that), and it disables useful functionality in the process.
Thanks, guys! Appreciate the feedback, I have edited it again to make it more appropriate
-1

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

Improve this answer

2 Comments

Please share more details about this. "Despite what others are saying" is not a credible source that any service out there (which isn't even available at the moment) blocks the browser's developer tools
Link to HideJS is broken
-2

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 "

";
    }
?>
Improve this answer

2 Comments

Please add some explanation to your answer such that others can learn from it
you can format your code using code block that will make your answer good and easy to read

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.