So I realize that anyone can view the javascript in-line with HTML running in their browser, so if I use an external js library on my server will its contents be completely hidden?
Another question is are there any cases where it's better to use in-line javascript, like with jQuery or something, or is there really no down side to just using a js library for all of it?
No, there is no way that your javascript will ever be "hidden". Anything that can be run in a browser can be trivially saved and inspected. The best you can do is use an obfuscator.
The downside to using an external file is that it's another request. The upside is that it can be cached independently. For best performance, code that will be used from more than one page should be stored in its own file, and code that is page-specific is better off being stored within the page that uses it.
JavaScript operates on the Browser level, that means that the browser at some point read your JS (external or internal same s.). You can easily conclude from this that if at some point the JS is now registered by the browser, and it's accessible by anyone with a bit more knowledge in web stuff. you'll not be able to hide your JS trickery.
Pus inside your JS a Copyright notice and pray.
Never send sensitive data through the yellow wire.
If you have some extra sensitive strings, encode and compare them on server side - sending them like MD5 or in some SHA model to the server.
Javascript, with the exception of something like node, operates client-side so you can't really use an "external js library" on your server, whatever that means.
Best practices dictate that you should almost always reference your javascript using <script> tags and link to your javascript file using the src attribute.
Related
For ex.: I need to prevent replacement of js. What is more secure way to store it? In page xaml or in separate .js file?
I think that .js file could be replaced in browser cache. But js in page code more difficult to replace.
This is an unwinnable fight - mostly because there are browser plugins like Greasemonkey which are created exactly for the purpose of changing scripts that are executed on the page.
Since JavaScript runs on the client, there is nothing you can do to prevent the chance of the user modifying it, skipping some functions etc. Always revalidate the data and any calculations on the server.
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.
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.
When I write my JS files for a Django project, of course I do some AJAX calls, and for the moment the urls for those calls are hard-coded (which is very ugly).
I was thinking of having the JS files served by django (instead of Apache), so I could take advantage of the template tags ({% url %} !!!).
Is there a reason why I shouldn't do this ?
Or is there a right way to do this ?
(I can give a least one : it will consume a lot of time resending JS files that haven't changed. What would be great is to have an application that generates files when restarting django server, and serves them statically after !)
I would go for a hybrid technique. Serve most of your javascript statically. But in your Django template, have a <script> block that defines various global variables, which are generated by the server-side code - url is a good example. Then your static JS can refer to the variables that are generated in the dynamic code.
I searched deeper in those asset manager applications from djangopackages, have found out that django-mediagenerator provides that feature, even if it is not well documented : you can generate your js or css files as django templates, and then serve them statically (they are also bundled, and caching is managed etc ... so two birds with one stone + it is really easy to set-up !).
In order to have JS files generated as django templates (after having set-up django-mediagenerator), just add the filter :
ROOT_MEDIA_FILTERS = {
'js': 'mediagenerator.filters.template.Template',
}
in your settings.
Dynamically generating Javascript on your server can be a tremendously powerful tool and I've experienced both it's upside and downside in my projects.
In general you want to keep as much as possible static to minimize the work to be done on every request. This includes having the browser cache as much as possible, which might become a problem in your case.
What I usually do is to have a block in the header in my base template. In templates that need to do custom javascript that is only known at runtime (customization based on logged in user, for example), I add it to the block. Here I can dynamically generate javascript that I know won't be cached so I can make some assumptions. The downside is more complexity.
If what you need are just pointing to urls, or have some simple configuration, etc, then I would suggest creating a view that will return a Javascript file with these settings. You can set the correct headers(Etag, Cache-Control, etc) so the browser will cache the file for some reasonable time. When you upgrade your code, make sure the Etag will change.
In the code that needs to use the configuration, you need to always check that the variable you are looking for is actually defined otherwise you will run into problems that are hard to debug when for some reason the configuration javascript is not loaded correctly.
The .js that gets sent to the browser would vary. That could make debugging more cumbersome. Maybe not a problem but something to potentially consider...
Nowadays, the best way to do this is to use Django.js
Here is the doc where they talk about the URL reversing: http://djangojs.readthedocs.org/en/0.8.1/djangojs.html#reverse-urls
Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.