javascript external file hides source - javascript

i have seen answers to similar questions. but, not quite what i want to know. if i make an external javascript file. then, on the client side, when the client loads the HTML, all they see is a link to the external javascript file. like this:
<script src="myScript.js"></script>
they never see the source code.
i don't get all this talk about obfuscation & minification. best way is just make an external file. then, without hacking into the server to download the source, they will only get machine code.

They can still follow the link to get the file directly.
Just display the source of this (this question) page, you can see
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
but you can still simply open https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to see the source.
Even obfuscation doesn't provide protection as the source is still accessible to the client and he can de-obfuscate it (although that can be hard, it is not impossible).
And minification is used to reduce file size, so the file loads faster (and thus the page load time is lower).

i get it now. but, someone answered that you can hide the source w/PHP server side produced web pages. i haven't understood this yet. but, i have seen this answer a few times. this would seem the way to hide your scripts.

Related

Chrome, firefox, or opera preload changes

Is there any way to "edit" a "server side" javascript file in one of the mentioned browsers that will save the js edits on the client side and replace the server side scripts?
Basically I want to edit the javascripts on the server. Obviously I can't save them on the server so they need to be saved on the client side(my computer) and the browser needs to load my scripts instead.
It shouldn't be hard to do at all but I've not been able to find any way to accomplish this.
Edit:
I want to modify the javascript's from a site I do not own or have write access too. e.g.,
Html page uses some javascript page on server. I want to modify this javascript file(the actual file).
I can download and save the javascript file BUT the html page will always use the one on the server because that is what is in the script tag. I need to modify the script tag of the html page to point to the local javascript file BEFORE the html page's scripts are executed(else the javascript from the server will be used).
here, for example, is a script tag from SE:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
It uses a non-local javascript file. I need to replace this line with my own line before any javascript is executed. It would like like:
<script type="text/javascript" src="file://C:/temp/myjquery.min.js"></script>
or whatever. (this way, I can modify the jquery file and have it execute my own version of the one on the server)
I, could, ofcourse, download the html file and modify it BUT then php code may not work among other things. (for example, relative links will be broke)
this is usually very easy in Opera: Just view source, edit what you want and use the special "Tools > Advanced > Reload from cache" command instead of a normal reload. Voila, you'll be running the site with your modified scripts..
(There are some exceptions, related to specific no-caching techniques some sites use it won't work 100% for all files - but it certainly should work for anything served from googleapis.com)
I think what you're looking for is something like LiveReload
It allows you to edit css files and have the browser apply the changes without refreshing the browser.
The windows version is in alpha right now but the Mac version works quite well for CSS.
I don't know if it does Javascript but I think it might.
You could also try the Chrome DevTools. It's a chrome extension that does just what you want with javascript and css.
No problem, you want to use bookmark-lets for this. Indeed it is easy, just remember to use an anonymous autoexecuting function: javascript:(function(){ //commands })();
In the sane good old day's one could even place this javascript directly into your addresses, but nowaday's some browser-builders (like firefox we coders USED to trust in the old day's) are being a 'good boy' and listen to facebook's 'demands' to kill normal standard functionality in favor of their lack on comprehending closures... But alas..
Ofcourse you could also create a bookmark to fix firefox's insanity, again reclaiming power to the user :)
Every time you visit the site, you click your bookmarklet. Done.
One can even make it 'memory resistant' for as long als you are on the same page (if you really want to). Naturally power is with the user/visitor AS IT SHOULD BE, not with the webmaster (who already publicly shared whatever info).
You might also look into greasemonky on firefox and comparable solutions.
Good luck
Build a string on the server side to write all your javascript code on the server side.

Is it normal to be able to see JavaScript in page source?

I understand that scripting language such as PHP will not be shown in the page source of the browsers. Is it not the same for JavaScript?
If so, why are they treated differently and are there solutions available to hide JavaScript from page source (revealed by browser)?
I don't need the details about how exactly to hide it, just out of my curiosity if it has been worked on.
Thanks!
PHP is run on the server and produces some output, often HTML, but may also include XML, CSS, PHP, images etc.
JS gets sent to the client, and is run there, so they need to see it.
You can always view JS source, though you can obfuscate it. There isn't much point though, as a decent debugger will let you work things out anyway.
For instance, using the Web Inspector in Webkit browsers, or Firebug will allow you to view the javascript and set breakpoints and see variable values, so it's often trivial to work out what is going on.
This is OK though, and it one of the reasons why learning JS is so straight forward. When designed correctly, it's rare that this presents a security problem.
You may find sites where the JS looks mangled and unreadable - this is frequently done to reduce the file size, hence all the .min.js files you see on websites rather than to make it hard to read.
Most people do this automatically as part of their build process, rather than doing it by hand. To do this, https://github.com/mishoo/UglifyJS is a good choice.
You should understand that there are server-side and client-side scripting languages. What you see on the client (browser) is the output of execution of the server-side script (PHP, Perl etc).
That said, there have been libraries developed to obfuscate JavaScript code.
PHP isn't "shown" in the browser because it's not there: it's already been rendered as HTML and sent to the browser by the server. (Same as Java servlet or JSP code.)
In-line JavaScript is part of what's sent to the browser, so it can be shown in page source.
JavaScript source linked in a <script> tag is not shown as part of page source; you only see the tag and the URL.
I understand that scripting language such as PHP will not be shown in
the page source of the browsers. Is it not the same for JavaScript?
Yes, server-side script is not visible in the browser's source though client-script like
JavaScript is fed to and parsed by the browser.
If so, why are they treated differently and are there solutions available to hide JavaScript from page source (revealed by browser)?
"Hiding" JavaScript isn't possible. Though, you can minify and obfuscate the script.
http://en.wikipedia.org/wiki/Minification_(programming)
http://en.wikipedia.org/wiki/Obfuscation
No, you need to distinguish between serverside and clientside (scripting) languages.
A serverside script runs invisible [from the client] and sends its results (of any type, including js files) to the browser. These result files are public.
A browser receives public files. Some of them can and will be executed. As JavaScript is a non-compiling language, you will always see its source.
See also How to prevent View Source of page using Javascript?, how to hide javascript code etc. - you only can obfuscate it.
Javascript and PHP are two different concepts one of them is client side language which can be seen in browser and the other server side which is hidden to the eye.
One simple way to hide your javascript code would be to include in a file so it wouldn't be seen in that specific page - but everyone will have a link to it and can still see it when they click on it.
Other solution would be to minify it, which would work the same but is going to be petty much unreadable.
http://en.wikipedia.org/wiki/Minification_%28programming%29
PHP is like a macro running on the server, it outputs text that is sent to the client. JS is scripting that the browser must interpret to update the contents of the page.

HTML5 Boilerplate Page-specific Javascript Placement

Question
If you use a single javascript file to hold all scripts, where do you put scripts that are for just one page?
Background
This may be a matter of opinion or "best practice" but I'm interested in others' opinions:
I'm using the html5 Boilerplate on a project. They recommend you place all javascript in a single file script.js for speed and consistency. Seems reasonable.
However, I have a bit of geolocation script that's only relevant to a single page, and not others. Should I break convention and just put this script on the page below my calls to the javascript libraries it depends on? Just put calls to the relevant functions (located in the script.js) file, below the links to the libraries they depend on?
Thanks!
The good folks at html5 boilerplate recommend putting all of your javascript in script.js so that the browser will only have to load that one file (along with the others that h5bp uses) and to allow caching of that file.
The idea is not to get caught up in the "recommended" way, and to think about things related to your own applications.
This geolocation file is only going to be used on this one page, right? It will never be used anywhere else.
The script.js file will be used on multiple pages.
Well, then it wouldn't make sense to put a "whole script" that will only be needed on one page in the script.js file. You should make the file external and call it separately on the page that it is needed. This will keep you from bloating the script.js file for functionality that may never get used by that user.
However, if your "whole script" for the geolocation functionality is pretty small, then include it in script.js. If it doesn't add to the speed of the download for that file, then it makes sense to include it there.
The gist of all of this is, What is the best trade off for my application?
These things we know to be true:
cached js files are good
fewer files to download are good
smaller files to download are good
maintenance is important
Once you think of these things in terms of your application, the decision making becomes a bit easier. And remember, decisions that trade off milliseconds are not going to make much of a difference in your user's "perception" of how fast your page is.
The browser will only download the .js files once (unless something is happening to discourage the browser from caching). So if you expect all of your users to hit the one page that uses geolocation sometime during their session, then you might as well give it to them early. If you expect maybe a tiny percent of your users to eventually hit the geolocation page, then maybe you might want to split them.
Split it out into a separate .js file so that it can be cached. Then reference both external .js files from your page.
I think you should put it in a separate file. Putting all the scripts in one single file could cause unexpected behavior and conflicts. I like to have one script file for the javascript that all pages will use containing plugins, helper functions, formatting functions etc. And then create one separate js file for everything that is relevant just for each page.
If you still want to have just one js file in the browser you could take advantage of one of those utilities that combine multiple js files into one.

Include a text or XML file via the script tag?

For a little context I'm working on a site for a client and it has to run completely offline. It's just a set of html/css/js files that you run locally. The computers it will be used on are office computers and quite locked down so I can't even use java. Luckily the project isn't overly complicated and I've accomplished most of my goals with this limited platform. The issue I'm having is I want to create some easy to change files to load the data from. Right now I have all the data loading through script tags that point to js files that can be manually edited, however I've tried to make the javascript as simple and straight forward as I can but it's still not looking very friendly to someone who hasn't programmed before.
What I would like to do is include an xml file or text file in the HTML using a script tag or something similar and then use JS to read the contents but every time I try this it doesn't actually load the file. Here's a few things I've tried:
<script type="text/xml" src="myxml.xml"></script>
<script type="text/plain" src="myxml.xml"></script>
I've tried using XMLHttpRequest but most of these attempts end in the same result.. can't do a cross-site request. Even though I'm using a url "myxml.xml" and they're in the same folder, chrome is still convinced this is a XSS attempt. So I'm starting to run out of ideas. Can anyone think of any clever way to achieve this?
IF you're goal is to just run your web-app, even offline and you do not care about cross-browser compatibility, you can consider to convert you're application to Packaged App.
It will work only in google-chrome browser but setting the right permissions, you should not have problem with cross-site requests. At this point, you could download the xml content through a noraml XMLHttpRequest.

Confused: javascript.js code shows in Chrome?

My understanding was that only the javascript code placed inline in the HTML page would show, never the code stored in .js files
...and I had never seen in any browser code in a .js file show on the clientside...
until I started to use Chrome and noticed all my code is available for viewing???
Have I been convincing myself the code is safe in .js files, when in fact it never was?
and while on this subject can a responder be totally clear whether the code in .js files can be hidden or not.
I have read many posts that left me doubting whether it can be done or not.
. Some say to place it in a .js file on the server so it executes on the server...
--- using 'language=javascript' and an html line with 'runat server'? no idea how to do that.
--- But, would that not defeat the purpose of speed, and refresh since the server has to be accessed?
--- might as well code it in the code-behind???(C#, VB, php, ...)
. Some say use an AJAX call etc... but it seems others contradict that, saying the code lands on the clientside anyway thus will show? ...and I am assuming this would be a callback with no page redraw...
JavaScript is executed in the browser, this means the script has to be submitted to the client. So, of course anyone can view the code, wether it's happening in the developer tools, getting the direct link out of your html or, for example, using a http sniffer.
Altough, there are some methods to make the script unreadable for humans.
Minifying your script is a good practice in general. It decreases file-size, so the client has to download less, speeding up loading time. After all, this does not really help making your script "unreadable" for users, there are a lot of deminifying services all around the web.
Still, there is another way: obscurifying (or obfuscate) your script. This replaces the code to make it unreadable. Unfortunately, I don't really have experience with using this technique, so I don't know how it would affect the performance of the js-code.
Maybe you want to have a look at this: How can I obfuscate (protect) JavaScript?
Javascript code can be seen even if its in a .js file the only thing you can do to make it little tough to understand is minify the js file.
Actually, javascript code stored in a separated file wont be shown directly; the user must explicitly type the name of the file in the address bar to see its content.
The only way to hide it is, as said before, to minify the file, which compress the file and make it unreadable for humans.

Categories