We are developing a web based application. In this we want to hide a script files from browser's page source. After some research we are planned to push the script files dynamically on browser page load, and also after page loaded we empty the source of the script files.
By using this method we are hide the script files from browser's page source.Is there any other method to get the script files.
Instead of inline javascript you can use external files. Your code will not be in the page you are viewing, but in another file. Of course it's not hidden from the browser.
Example for inline javascript:
<!-- index.html -->
<body>
<script type="text/javascript">
alert("my super secret js!");
</script>
</body>
Example for external file javascript:
<!-- index.html -->
<head>
<script type="text/javascript" src="your_js_file.js"></script>
</head>
/* your_js_file.js */
alert("my super secret js!");
Simple! If you see source like : <script type="text/javascript" src="xyz.js"></script> in the browser's sorce window , then click on it and it will show you your javascript code!
Related
first post..
trying javascript for first time.
i am following a book , created two files in the same directory
test_js.html
helloWorld.js
Contents of both are below:
test_js.html
<html>
<head>
<title> First Javascript page </title>
<script type="text/javascript" src="helloWorld.js"></script>
</head>
<body></body>
</html>
helloWorld.js
<script type="text/javascript">
alert("hello");
</script>
I dont see any alert when i load the html page.
However if i embed the same alert("hello") in the html page, i am seeing the alert being displayed.
Tried this on chrome and firefox (both latest) with same result.
Following googled examples is not showing any error in any of the files.
Please help.
remove script tags from helloWorld.js
just
alert("hello");
hi am trying to create an external link for a java script program i created and i tried using https://www.000webhost.com but they blocked me, so pleases is there any better way i can do this, plus am still a learner in programming,
here is the code i created and i want it to be linked,
document.body.appendChild(document.createElement('script')).src='https://usscript1.000webhostapp.com/example1';
EDIT:
For hosting the JS source file on some external server for testing you can use sites like http://yourjavascript.com
You can search for more alternatives on Google but this one worked well for me :)
Original Answer:
As others pointed out in comments, you can simply put the source url of JavaScript program in src attribute of <script> tag...
<html>
<head>
<script src="https://usscript1.000webhostapp.com/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
Regarding the blocking issue, make sure your src link to the JavaScript file is correct (by opening the link in seperate browser tab or have look at the console in inspect page window for any errors).
You can put the script on the same site and link to it as,
<html>
<head>
<script src="/example1.js"></script>
</head>
<body>...your website's body here...</body>
</html>
If you are facing issues with putting the file on your site, you can directly put the code of JavaScript program inside <script> tag like this...
<html>
<head>
<script>
...your JS program goes here...
</script>
</head>
<body>...your website's body here...</body>
</html>
I am trying to implement an online chat functionality on 3 of my websites, but I dont want to copy paste my whole code on every website. I want to create something like tawk.to has. They just have a <script> tag and we paste a tiny code on our page and the whole functionality is rendered through JS.
Right now I have it in an HTML file, where my logic is in JS in the same HTML file.
Something like this?
<script src="path-to-my-file.js"></script>
Basically in my page's tag I will include this JS.
<!DOCTYPE HTML>
<body>
<script src="loads-html-from-other-place"></script>
</body>
Here is what tawk.to does:
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var
s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/12341/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
You just paste this code in your page and it displays chat box along with the functionality
Yes you can do this by below approach.
....
</body>
<script src="path-to-my-file.js"></script>
Create a JS file
IN that file write a logic to create chat button.
That file can have click events of that button which is added at run time VIA ajax.
You can then include this file in all the HTML pages where you need chat functionality.
Make sure you load this file at the end of body tag.
I have a problem with loading JavaScript in Google Chrome.
I've created the separate js file with a simple alert message and then linked it before the end of the body tag.
Google Chrome shows the alert box first then when I click 'ok' the content is loaded.
In other browsers it works fine, I mean the alert box shows at the same time as the content of the web page.
In short, Google Chrome loads the javascript first even when I put the script tag before the end of the body tag.
alert("Hello World!");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Write Your First Program</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="text-vertical-center">
<h1>Write Your First Program</h1>
<h3>JavaScript Essentials</h3>
<br>
</div>
</header>
<script src="js/scripts.js"></script>
</body>
</html>
Do you have any idea how to fix this problem?
Thanks a lot
Your problem is that your script have the tag async, which let it execute whitout taking care of the web page loading state. Remove the async tag, or replace it with defer, which execute the script after the page loading.
In order to prevent any problem with script and html/css loading times conflict, you should encapsulate your Javascript's scripts with window.onload = function() { //code here }. This will guarantee that your whole page is loaded before executing your code.
That is a problem with Chrome. The developers of chrome for some reason have still not corrected that. If you have alert or a prompt pop-up, which is the first thing that user has to interact with in your website, chrome will not load HTML until after the pop-up has been closed.
Try including jquery cdn just above your script tag in body.
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous">
</script>
This will work fine!!
I also had this problem and realized that my Google chrome was just loading the cached version of page(the one before putting my script tag near bottom).
Closing the window and reopening the page worked fine.
async and defer boolean attributes are only helpful when the script is inserted in the head portion of the page. They are useless if you put the script in the body footer like we saw above.
(Refer following article: https://flaviocopes.com/javascript-async-defer/).
I am also facing similar issue and using window.onload = funcRef; with cleared cache also does not work on my google chrome. I have tried all of this with disabling all my browser extensions but in vain.
I was finally able to, not solve, but agree upon a way around - which was - to include a
jQuery CDN
before my javascript script in the body. Hope this helps.
To share an interesting observation of <script> tag after </html>.
We have a HTML page which is written in below way:
<html>
<body>...</body>
</html>
<script type="text/javascript" src="js/util.js"> </script>
<script type="text/javascript">
....
</script>
The page is embedded into an iOS app, and we found randomly the page is loaded more than 30seconds.
After diagnostics using Safari Web Inspection feature to record timeline, we found the way of writing the <script> tag after </html> causing mobile Safari or iOS UIWebView to start loading util.js after 30seconds of finishing loading the containing HTML page.
Is there a specific reason of this 30 seconds waiting before loading the util.js?
You shouldn't have any tags outside of the tags, it is pure malformed html syntax.