Is there any option to hide script source?
<script src="./script/jquery/jquery-X.X.X.js" type="text/javascript"></script>
delete this value or change to
<script src="./script/jquery/jquery" type="text/javascript"></script>
without changing a file name in the project?
No there isn't - the browser always needs to know the script is there to be able to use it.
Tools baked into every modern browser make it trivial to see all scripts, no matter how hard they have been obfuscated.
But maybe I have mis-understood your question - are you just trying to hide the path of your file?
You could use mod_rewrite (if using Apache webserver) to map one url to another in the .htaccess file:
RewriteEngine on
RewriteRule ^/script/jquery/jquery$ /script/jquery/jquery-1.2.3.js [NC,L]
Not sure what kind of feature that would be though. I can't see any benefit of doing so. One can always inspect any asset downloaded along with the page.
The only "protection" there is would be to build entire app into one bundle file (using Webpack for example) and then obfuscate the code. But there are plenty of deobfuscation tools already, available online. So no, you can't protect front assets.
Related
I want to know if installing jquery/bootstrap/font-awesome can be done automatically, instead of installing it via npm and then manually dragging the code to my css/js/fonts folder?
Is there no program that can update and automatically drag them to the correct folder?
I know people are saying that you can just manually drag the javascript file to the correct location, but bootstrap for example consists of more than a single javascript file. It includes font and css files.
If I were to include them in this manner:
\web
-\css
--\app
---\main.css
--\font-awesome
---\font-awesome.min.css
-\fonts
etc.
Then it wouldn't work, because font-awesome expects it's fonts to be one folder aside.
JQuery, Bootstrap and Fontawesome are not softwares or applications that you install in a webpage. They are just CSS and Javascript files. So these are like any other javascript or CSS file you may have written from scratch for your webpage. Except that they are well maintained, highly optimized and made for a particular application. (Like Bootstrap primary purpose is to provide a framework for making webpages responsive.)
To include them to a webpage all you have to do is tell the HTML file to use those files. And this is done by linking them to the HTML using the <script> tag and its src* attribute. (*W3schools link. Hehe).
Now in src attribute you may provide a URL to a location on the web containing the file or you may provide a relative local path to a location in your server or local machine containing the file. Yes, you can manually drag the files into your css/js folder and just include the files using that path. No Im not aware of any softwares to automate the process. But you need only place the file in one location for an entire webpage and its sub pages to access it. So its not a very intensive process.
As for why CDN's host such files for public access, an insight is given here : How cloudfare provides free service. And security, well, they are pretty darn secure, it is literally their job to provide secure access to the files they host. And why people use CDN in the first place is because this (in short performance).
Update:
As for how to include files in your HTML, it goes like this (Bootstrap example) :
<link rel="stylesheet" href="static/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
You need to provide the path to the required CSS and JS files. In the case of Bootstrap these two are the only ones you need to include to get full functionality of the library.
I think it is not a good idea to use local files instead of CDNs until you are not working offline.
Here you can read about CDNs vs Local Files:
https://halfelf.org/2015/cdn-vs-local/
Multiple files on CDN vs. one file locally
https://www.sitepoint.com/7-reasons-to-use-a-cdn/
Although there is one another link that is just opposite:
7 Reasons NOT to use a Content Delivery Network
Nevertheless if you want to use the files locally you can follow the instructions below:
Move at the cdn link in your project
Copy the link from src or href and open it in your browser.
Save the file locally and give the reference of the file in your project.
I am working on a strategy for storing and deploying JavaScript files on Azure (ASP.NET web role)
My requirements are:
To use minified versions in production
Use original versions (i.e. not minified) local versions in development environment (to simplify debugging)
Simple build/deployment process (VS2010)
Simple update process (my files will change from time-to-time)
There is a great discussion here Visual Studio 2010: Publish minified javascript files instead of the original ones however this does not take into account the benefits Azure can offer or working with multiple instances.
I am considering deploying my minified JavaScript files to blob storage and use these in the production version. These will be stored with a large max-age Cache Control for client side caching and filenames will store the version (so I can easily update). I welcome feedback on this strategy.
Thus, in development the rendered HTML would refer to a local script file, i.e.:
<script src="Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>
But in Production the result should use the following to refer to a minified version.
<script src="http://myblob.blob.core.windows.net/Scripts/myjavascript-0.0.1.js" type="text/javascript"></script>
My main question though is how to best to achieve automatic switching of the paths in development and production. Or would a custom handler be the normal route (and if so how would that work – I don’t want each instance to reload from the blob on each request).
Regarding #1 & 2:
I discuss a strategy for this here. The basic idea is to user a helper function to emit the script tag. The function can construct a link to the debug files when in debug mode, and the minified files otherwise (which also makes it easy to test locally with the minified files). The same function can handle adding a version to the path for cache invalidation, etc.
Regarding #3:
Add the minification as an after-build step. I added this to my csproj (which is just an msbuild file), which use yui-compressor:
<Target Name="AfterBuild" Condition="'$(Configuration)' != 'Debug'">
<!-- remove previous minified files -->
<Exec Command="del $(ProjectDir)Styles\*-min.css" />
<Exec Command="del $(ProjectDir)Scripts\*-min.js" />
<!-- Minify javascript and css, unless we're in Debug -->
<Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .css$:-min.css --charset utf-8 $(ProjectDir)Styles\*.css" />
<Exec Command="java -jar $(ProjectDir)..\yuicompressor\build\yuicompressor-2.4.6.jar -o .js$:-min.js --charset utf-8 $(ProjectDir)Scripts\*.js" />
</Target>
This will create minified *-min.js and *-min.css files in ~\Scripts and ~\Styles, respectively.
Warning B/c of a bug in version 2.4.6 of the yui compressor, the above won't work if there is only one .css or .js file in the directory.
Your basic plan sounds good. It will even enable you to make use of the CDN with very little effort (you just need to replace the path to your storage account with the path to the CDN).
I don't think I'd try to over think this too much. As suggested elsewhere a control is a good way to go. Simply have this control look up a web.config setting to get the root directory for your scripts and prepend it to the path of the script (your local version this setting would be empty). In order to make sure that you don't have to mess around changing the config for every deploy, I'd use config transformations so it just happens automatically.
For switching the URL of the script links dynamically when running from Azure, you should put all the script blocks inside a usercontrol and use that usercontrol in all the pages. You should not put the script links directly on the aspx/master pages, instead put then on ascx and use the ascx. This helps keeping common script links in a single file and when you need to make a sitewide change, you just change the ascx.
Another approach is to use my httphandler that changes the URL of the scripts from relative to absolute in order to facilitate download of scripts from different domain than the site is running from. You can of course use it to prepend the absolute URL of your Azure site.
http://omaralzabir.com/loading_static_content_in_asp_net_pages_from_different_domain_for_faster_parallel_download/
You may want to check out the Windows Azure CDN helpers project. It should do pretty much everything you are asking for. You can set in the config if you want your minified files to automatically be deployed to blob storage or stay on the web roles.
http://cdnhelpers.codeplex.com/
http://ntotten.com/2011/06/windows-azure-cdn-helpers/
http://nuget.org/List/Packages/CdnHelpers.Razor
http://nuget.org/List/Packages/CdnHelpers.ASPX
I just checked my page size using firebug and all, and javascript files equal 478.2K!
<script src ="<%= Url.Content("/Scripts/MicrosoftAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/MicrosoftMvcAjax.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-1.3.2.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.form.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/xVal.jquery.validate.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/temp.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery-ui-1.8.5.custom.min.js") %>"></script>
<script src ="<%= Url.Content("/Scripts/jquery.ui.tabs.js") %>"></script
temp.js is my own file, and it has code of very few lines (like 10-20).
So what is going on? I mean how to fix this?
Start by getting rid of Microsoft*.js. If you use jquery you don't need those.
I would suggest that you use the minified versions of each js file and also that you combine them into one single js file (or as less as you can).
Here is an interesting article that may help you.
Except for temp.js (which you say is quite small), all the other files are third party libraries.
I assume you're using all those libraries on every page? If not, one thing you could do would be to only include them on pages where they're being used.
The file names suggest that some of them have been minimised. If the others haven't been, you could run them through a minimiser, or alternatively go back to their home pages to see if they supply a minimised version you could use.
Some of them may also provide an option on their site to only include functionality that you intend to use. JqueryUI does this for sure, though from the filename you're using it looks like you already made use of it for that, but check to see if any other libraries also offer that.
Check that you haven't got any overlapping functionality - you may be able to rationalise by removing redundant code. You would have to be very cautious if that means editing third party libraries (that's not usually a good idea), but you may find you've got entire libraries that are unnecessary, in which case it'd be a quick win to get rid of one of them.
If you want to off-load some of the scripts to a third party, Google hosts JQuery, JQueryUI and a lot of other plug ins, and they allow sites to load them from their servers. It wouldn't affect the size of the scripts that the user has to download, but would save your servers quite a lot of bandwidth.
At the end of the day though, you have got a lot of big scripts there, and they're providing a lot of functionality. If you need all that functionality, you'll have to put up with the weight of the code.
their are many thing you can do for this situation
use minified or production version instead of developer version
load them from CDN if you can do that.
If files not been changes from long time that you need TO use Cache.
their are many other thing you can do for application performance improvement.
You could try gzip compression so that the server compresses it and is uncompressed by the browser. That should help a bit.
Maybe something like this.
Or better still, in IIS itself like this.
considering that you're importing the jquery UI library, jquery, the microsoft ajax framework, some validation framework etc.. its not too bad..
You can try minify the files to save space. Here YUI Compressor
If you are using well-known and popular libraries (like jquery) you can use externally hosted files from a cdn (content delivery network), which are more than likely already in the browser cache (and therefore won't need to be downloaded again): google list of libs and jquery ref
Minify it :http://jscompress.com/
I would also suggest refactor it (rewrite it so there is less memory used).
Telerik Extensions For ASP.NET MVC
How about this approach?
MvcContrib: an Outer Curve Foundation project
MvcContrib.IncludeHandling is same approach.
Let's say I have a JavaScript file... using .htaccess is there a way I can make it so a user can NOT look inside the JavaScript file?
RewriteEngine on
RewriteCond %{HTTP_REFERER} !http://your-domain\.com/.* [NC]
RewriteRule ^.*js$ - [F]
This will return 403 code (forbidden) when referer is outside your domain for all JavaScript files.
NOTE: But this solution will only make access to the file harder. If someone will want to see the file, he will do that eventually. Because you can't fully block the js files, if the browser can read it, the user also will. Example: you only can open dev tools and you will see the source. Or if someone will figure out that the block is by referrer he can create link to file or use other way to add the header to the request.
No. You can obfuscate it or hide the javascript inside another container (like inline in your page), but not prevent them looking at it.
If you block it with your htaccess file, then the browser will not be able to download it and use it, which makes it pointless having the javascript file. Once downloaded by the browser it sits in the cache on the local machine, so a determined/knowledgeable person can find it and inspect it. If you obfuscate it you will make it very hard for the user to comprehend it, so maybe that is the best option.
The only way to make your javascript more-or-less "difficult" to read is by compressing and obfuscating it.
Here are some solutions:
YUI Compressor
Online Javascript Compressor
You can use http://dean.edwards.name/packer/ Check the Base62 encode and Shrink variables boxes to make the JS code hard to read.
Then you have Yahoo compressor: http://developer.yahoo.com/yui/compressor/
And the Google compressor: http://code.google.com/closure/compiler/
The first one is on-line, the 2 last ones need some installation on your machine.
But... as the browser needs to understand the javascript it receives, a patient and decided person will be able to reverse engineer it. But the compressors above will discourage many of them.
This is really a pointless exercise. If somebody can run your Javascript on your site, he can run it anywhere else he likes and make any changes he wants. This has not proven to be a very big problem in the history of the Web, so I wouldn't waste much time on it.
If it's really that big of a worry that somebody will "steal" your Javascript, copyright is your best weapon. If some algorithm is secret, do the processing on the server and just provide the result.
You Can't Really Protect Your Javascript Files
Using Developer Tools on Google Chrome:
Click on Resources > Your Site > Scripts > filename.js
And it will appear right there Crystal Clear.
I am using Eclipse Ganymede and Tomcat 5.5. I would like to add some javascript and especially ajax functionality to a dynamic web project and need some help.
I would like to use jquery (but I am open to other suggestions, if you tell me why another library would be better in this case, but I have chosen jquery because it is supposed to be simple (which on the first look it seems to be)).
I am having two problems:
1- Tomcat can't find the jquery library. I tried several things in my jsp file like:
<script type="text/javascript" src="WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/WEB-INF/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./WEB-INF/lib/jquery-1.3.2.min.js"></script>
As you can see, I threw the jquery library in /WEB-INF/lib. Executing the jsp file within a browser without tomcat (with the last path version) works, so the path is correct.
2- There is no proper syntax highlighting within the dynamic web project for jquery and no popup suggestions. I also tried the information in this article, but it didn't change much.
To be more specific (because it took me about half an hour to figure this out after getting to this point):
When you create a Dynamic Web Project with Tomcat in Eclipse, among other things in the project you get a folder named "WebContent". That's the actual folder that gets deployed to the Tomcat server, in Eclipse's equivalent of Tomcat/webapps/<project name> (I'm not sure where it really exists). For security reasons, as a special case nobody can access the META-INF and WEB-INF folders in there, so putting your scripts in those places will not help.
What you have to do is create a folder inside of WebContent, and stick your Javascript in there. This folder will be globally visible, so visitors to your site (like you, when you test it) can actually get to the Javascript.
What I did, for instance, was create a folder named "script" in WebContent and put my Javascript in there; then, when I needed to reference it in a page, I put in src="ProjectName/script/AwesomesauceJavascript.js"
I'd like to add to what #Tacroy responded with. Within the server you're using in Eclipse, check the server.xml. Make sure:
Context docBase="SomeProjectName" path="/SomeProjectName" <-- path and docBase attributes need to be the same.
I had two different things there, and had to make them identical for the src attribute to work in the jsp.
First you must to add resource mapping to your folder where you put jquery.js script library. That folder must be public.
To make folder public use this line of code:
<resources mapping="/scripts/**" location="/WEB-INF/scripts/**" />
Now you just need to add reference in your page to this path:
<script type="text/javascript" src="scripts/jquery-1.10.2.js" ></script>
Below are the steps to enable jQuery syntax highlighting and content assist highlighting in Eclipse.
Download jqueryWTP0.40foEn.jar.
Find your Eclipse Plugin org.eclipse.wst.jsdt.core_version.jar, backup the plugin.
(e.g. C:\DEV\EclipseIndigo37\eclipse\plugins
\org.eclipse.wst.jsdt.core_1.1.100.v201104272153.jar)
Double click the JAR file or run with command java -jar jqueryWTP0.40foEn.jar.
On the opened swing UI, choose org.eclipse.wst.jsdt.core_version.jar, and output directory.
Click the generate button.
Replace the old org.eclipse.wst.jsdt.core_version.jar file with the generated file.
Delete the directory workspace/.metadata/.plugins/org.eclipse.wst.jsdt.core
Start Eclipse.
Open a HTML file or a JavaScript file, edit JavaScript content.
jQuery content assist is now available.
Plugin Developer & Source