Hiding script in html

HTML Help: Comment Out JavaScript

Someone told me I should put my JavaScript in between comment tags. Is this true? What’s the purpose?

It used to be that JavaScript support was very spotty at best, and browsers that didn’t support JavaScript would often display the code on the page and make a mess of things.

The way around that was to use HTML comment tags to hide the JS from older browsers, thus ensuring backward compatibility. A typical JavaScript with comment tags would look like this:

When CSS came along, the same technique was used to hide the CSS from old browsers so they wouldn’t display the CSS code on the page. That «trick» worked for CSS too, and everyone lived happily ever after.

Say goodbye to all that. Using this traditional «trick» means you may now be hiding your JavaScript and CSS from NEW browsers!

XML compliant browsers, which is most any current version browser, are supposed to ignore content within comment tags. Here’s the text from the official W3C specs on Embedded Style Sheets and Scripts (section C.4):

Note that XML parsers are permitted to silently remove the contents of comments. Therefore, the historical practice of «hiding» scripts and style sheets within «comments» to make the documents backward compatible is likely to not work as expected in XML-based user agents.

I’ve used that trick on my sites in the past, but no more. There is only a very small percentage of old browsers still in use that wouldn’t be compatible nowadays, so the trick is not really needed anymore.

The choice between being backward compatible for first and second generation browsers or being forward compatible with current and future browsers seems obvious to me. Since the number of incompatible browsers in use is next to nothing nowadays, I suggest we move forward.

HTML Help about Hiding JavaScript in HTML Comment Tags

If you want your web site to rank high in the search engines . . . what are you going to do to get it there? Check out my search engine optmization guide, SEO for YOU: Search Engine Optimization for Ordinary Everyday People!

Almost a Newsletter

Subscribe today for exclusive website design tutorials and grab some free gifts to boot! Learn more, or subcribe below:

Источник

Hide JavaScript Code in View Source

1. Hide JavaScript Code in View Source
2. Conclusion

This tutorial teaches how to hide JavaScript code from a web browser’s View Source function.

The steps involve the placement of the JavaScript code in an external JavaScript file. After that, you can insert the file dynamically into the current page.

Hide JavaScript Code in View Source

Write the JavaScript Test Code

Write a new JavaScript code and save it with the .js extension. This JavaScript file will be the one that we’ll hide from View Source .

To follow along, you can save the following JavaScript code as test-viewsource.js .

alert("My code is not visible in View Source"); 

This HTML should contain what you’d like to show on the web page. Meanwhile, it’ll also contain a tag.

Write some JavaScript code within this tag. There will be a few lines of code that will include the test-viewsource.js dynamically into the HTML file.

As a result, you will not see the test-viewsource.js in the web browser’s View Source .

You can use the next HTML to follow along. Save the file as no-viewsource.html .

body>  main>  p>The included JavaScript code is not visible in View Sourcep>  main>   script type="text/javascript">  /`  * Code to hide from view source will go here.  * Check the next code block.  */  script>  body> 

Write Some JavaScript Code Between the Tag

1. Create a new script element with the document.createElement method.
2. Set the script type attribute to text/javascript .
3. Set the src attribute to test-viewsource.js .
4. Append this new script element to the HTML body element.

The code below is the implementation of these steps.

script type="text/javascript">  let scriptElement = document.createElement("script");  scriptElement.type = "text/javascript";  scriptElement.src = "test-viewsource.js";   document.body.appendChild(scriptElement);  script> 

Load the no-viewsource.html in your web browser and use View Source on it. If you’ve done everything right, you’ll not see the code for test-viewsource.js .

Rather, you’ll see the code that includes it dynamically into no-viewsource.html . The image below is an example of a sample output of what you should see in the View Source of your web browser.

Conclusion

At this stage, the JavaScript code in test-viewsource.js will not show up in the web browser’s View Source . Meanwhile, anyone can write the URL of your website in their browser to see the code.

As advice, do not place any sensitive information in test-viewsource.js .

Habdul Hazeez is a technical writer with amazing research skills. He can connect the dots, and make sense of data that are scattered across different media.

Related Article — JavaScript Browser

Источник

How to Hide JavaScript Code in View Source

In practice, it is impossible to hide the Javascript code from the source code, because the Javascript code is downloaded to the client browser in clear text and is executed completed by the browser. As a result in this article, I will share with you a few methods to hinder and make it difficult to read the javascript source code:

Obfuscate the javascript code

Obfuscation is a technique that changes the code structure to make it harder to understand. For example, variable names can be replaced with random characters or strings. This makes the code harder to read and understand, as said earlier it doesn’t provide complete protection. There are tools available online to obfuscate the javascript code, such as JavaScript Obfuscator Tool.

Server Side Rendering

To maintain the security and privacy of sensitive code, it is important to execute computations on the server side rather than the client side. This approach is commonly used in various web applications, particularly those that handle confidential data such as online banking applications. By performing the computations on the server side, the sensitive code is kept hidden from the client side, thus reducing the risk of unauthorized access, tampering, or theft. In executing computations on the server side, the web application works by sending a request from the client side to the server side, which then processes the request and sends the result back to the client side. This approach ensures that the sensitive code is never exposed to the client side, which may be vulnerable to hacking or other security breaches. Moreover, the server-side processing of computations offers several benefits, such as faster performance, enhanced scalability, and efficient use of resources. Since the server side can handle multiple requests simultaneously, it can provide faster response times and a better user experience. Additionally, the server-side can efficiently manage the computational resources, ensuring that the application can handle large volumes of data and users without compromising performance. Taking note of all these benefits, developers need to consider the server-side approach when building web applications that handle confidential data.

Javascript minification

Minification is a process that involves optimizing the code by removing unnecessary characters such as white spaces, and comments, and shortening variable names. It is a technique that is commonly used to reduce the amount of data that needs to be sent over the internet, which in turn speeds up the loading time of web pages. During the minification process, the code is stripped of all extraneous characters to make it as compact as possible. This is achieved by removing all spaces, tabs, and line breaks from the code. Additionally, all comments are removed from the code, as well as any code that is not necessary for the functioning of the program. Although minification makes the code smaller and harder to read, it is still possible to understand the code if someone is determined to do so. However, the primary objective of minification is to optimize the code and reduce the amount of data that needs to be transmitted. This, in turn, helps to speed up the loading time of web pages, resulting in a better user experience for website visitors.

Disabling the right mouse click

One method to prevent users from accessing the context menu, which includes options such as viewing source, inspecting elements, and saving images, is by disabling right-clicking through event listeners or CSS properties. However, this approach is not entirely effective in hiding code, as users can still access the source code using keyboard shortcuts or browser tools. Here’s how to disable the right mouse click in javascript,

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

Note: You should not disable the right click as it makes the website less accessible resulting bad User Experience.

Conclusion

In conclusion, while it is impossible to completely hide Javascript code from the source code, several methods can be used to make it more difficult to read and understand. Obfuscation, server-side rendering, Javascript minification, and disabling the right mouse click are some of the techniques that can be used to protect sensitive code. However, it is important to note that these methods are not foolproof and determined individuals can still access the code if they are motivated enough. Therefore, developers must implement multiple layers of security to protect their code and ensure the safety of their web applications.

Источник