Javascript not working on downloaded websites - javascript

So recently I was looking at some well-designed websites, with the functionality that I want to achieve / learn.
However, the problem is, that even though I manage to download the complete website (most recently I was using Scrapbook from Firefox), the website is not fully functional. Seems like the JS isn't working..
For example, a page like this.
When downloaded, the animations, progressive loading etc. are missing. I am guessing it's using Ajax to communicate with the server then?
Or what's the reason? Is there a way to get it working?
Cheers.

Most probably this is due to some scripts needing to be served from a domain name instead of localhost (your local machine). Your best bet is to learn how to set up a local web server with a package like XAMPP or MAMP. This is useful way beyond serving downloaded sites to inspect how they work. You can actually have a complete development environment this way.
Bonus tip: check out sites like Code Academy to learn even more about the ins and outs of web programming languages.

Related

Any way to create an application with the local web page as an interface?

A few days ago I decided to make my own "interface" to make it easier to organize (and work with) some of my personal files. You know when a lot of related data, pictures and links are right in front of you and you can change them in a couple of clicks, this is very convenient.
I started by studying HTML, CSS and JS, because I thought that the changes made to the local page would be saved somewhere on my PC so I can just run Index.html and do whatever I want. But they didn't. Refreshing the page erased all changes.
Using browser localstorage does not suit me, because if I change the browser, the data will be lost. I wanted it to just open with Index.html and work fine even if I change my browser or move the site folder to another computer.
Then I decided to learn more about server-side languages (such as PHP or Node.js) because they are directly related to databases, so I was hoping to save changes through them. But these languages required me to really open the server, with ip and port tracking. And I just wanted to open a local page through one file, without any ports or connections via the console. So this method scared me off quickly.
So is there an easy way to make a local page like this? Maybe I have not studied well one of the above methods and it has this opportunity?
Or the best I can hope for is a simple application that will use that local page as an interface to interact with data? I accidentally heard about this possibility a long time ago. Then I will ask you to give at least a hint as to which language to choose for this.
I don't understand well everything that lies outside of vanilla HTML, CSS and JS, so a complete study of a complex language like Java or Python will be too difficult for me, and the goal is not worth such a lot of effort.
I hope I understand correcly what you are trying to do.
If your goal is to make an application to manage your files, I think the simplest solution will be, as you said, to look into NodeJS and the File system api which will let you interact with your files through javascript code.
Your program will have to be in two part that will have to interact:
the "front" html page
the "back" nodejs script
The downside is that you'll have to go deeper into your study of the language to learn how to create the interactions you want between your html file and your NodeJS application.
However, there is no need to open your server to the web to make it work. The NodeJS application can be set to listen to requests from only the computer that runs it (localhost).
I obviously can't get too much into details without knowing precisely what you want to do but you'll probably have to learn to make a local server with node (search "nodejs http" or "nodejs express"), then make requests to it via the html page's scripts (search "ajax request").
What you need to look into are (web based) content management systems. like strapi or "grand old dame" WordPress.

are there any ways to run a client sided browser script for phone?

I have googled a bit around about this question, but not found any questions exactly about what I wanna do, just similar. I have a feeling that the answer will be no, but thought I would ask to be 100% sure.
There is a website, that is not my own, so I don't have access to the files, but there is API.
There are no phone versions for this website yet, and I use the website quite a lot, so I would like to be able to make a client sided script working like a browser extension to edit the classes and that way just change the CSS of the page to make the design more phone friendly.
I know that normal extensios are not supported on phone, but are there any other ways around this? Using bookmarks or API? Or perhaps an app?
What I myself use is iphone, so preferably a solution for IOS if possible
The approach that one could use, providing that you only want to change css, is the following (I know that it could be done on android, and I would suspect that iPhone has similar capabilities):
create a hybrid application that uses full-screen webView and loads the site in question.
modify the application to provide your modified css file from application assets, when request for css file is issued from webview
This should do the trick.

protect contents of cordova android app

I'm developing a Cordova app for Android (so it's all HTML/CSS/Javascript code).
This app is going to feature contents that I don't want them to be freely distributed on the internet, mostly audios, videos and some XML files.
Although those contents will be loaded from a server and other content providers, a user could unzip the APK and look into the www folder, analyze the source code (mostly jQuery and jQuery Mobile stuff) and find the direct paths to all those contents. Then, easily download them. Those paths might be inside the javascript code or inside XML files.
Is there any way to prevent this? I know of JS obfuscators, but I believe that they're pretty easy to reverse.
I think you've pretty much answered your own question. Obfuscation is the only way to "protect" the Javascript code, and there really is no way to protect the content. You try encryption, but the Javascript code to un-encrypt it will be exposed, so that solution practically useless.
Perhaps one option is to encrypt content on the server with a key provided by the user, then download it on the app's first run. This has obvious drawbacks as well: Some kind of separate user registration or account is required, entering a password every time the app starts is inconvenient, dealing with lost passwords, et cetera.
There are lots of obfuscation libraries for Javascript, just Google for them.
"Resources are world-readable by design.
Even if you were to not package the ""images or soundFX files"" as resources but were to download them on first run,
users with root access could still get to the files.
Since this is not significantly different than any other popular operating system humanity has developed,
it is unclear why you think this is an Android problem.
Sufficiently interested users can get at your ""images or soundFX files"" on iOS, Windows, OS X, Linux, and so on."

minified JavaScript is the only way to protect the source code?

I am doing some R&D to define all the technologies involved for the developement of a multi tier application that has html5 as browser frontend.
Now I plan to write all the client in html5 css js, having a middle tier my "real" code is anyway safely at server side, anyway for different reasons there could be a reason to hide the javascript in my web pages.
Minifying it is a way to make it less readable, but is there a simple way to "hide sources"?
The js files will typically be on webfarm,but in same cases there will be an enterprise installation, and this is why i am invesetigating a way to "hide the code".
Thanks.
No, you cannot hide JS source code. If some one wants to take a peek at your JS source they will be able to.
Minification + Obfuscation are things you can do however. Note that these techniques don't protect your source, they only make it difficult to read through your source.
You cannot hide your JS. It will always be visible as long as it is downloaded from your server.
You can use some techniques to make it harder to someone to read your code. These include:
minify and obfuscate (like you pointed out). Using agreesive mode in googleClosure makes the code pretty hard to read.
interpolate client side code with server side.
Getting part of your client side code with AJAX
This only makes "reverse engeneering" harder, not impossible, specially if someone is patient enough to follow the breadcrumbs.
UPDATE:
There is an alternative way to "hide" your code. In browsers that support extensions, you can develop an extension with most of your app core funcionalities and use JS to interact with the code. Most browsers support extensions with external dlls. However, this will "force" your users to download your extension to use your webapp which might not be a good idea.
Minifying JavaScript does not in any way hide it, any developer would be able to reformat it in seconds.
By definition, there is no way to hide your JavaScript. Any code that is available for the browser to execute is available for the user to read.

How to best test JS code and effect of interaction with data file

Can anyone tell me what's the best way to test JavaScript code (particularly linking it to a data file e.g. csv or Json) without it being in a server (i.e. from desktop). I'd like to create and test the JS on my machine before deploying it to the work intranet. Not had much experience with running server on laptop so would like to avoid this if possible.
Running a webserver on your desktop really is the best solution for this, since ajax calls are not allowed for local files.
You could look into xampp, or just fire up your IIS to run your own webserver. xampp is probably a bit easier if you have no experience with web servers what so ever.
Alternatively, an IDE might provide an ad hoc webserver. Visual studio express for example uses a built in development server that alows you to serve your files, some experience with this IDE is obviously also required.
If all this doesn't work you can always try a sandbox service like http://jsfiddle.net/
A fully fledged and free online IDE to develop/test/deploy your code can be found at Cloud9
You might be running into this problem. Basically certain security policies don't allow you to fetch local files . This question talks a bit about how to deal with Same Origin Policy things. A google serach of "Same Origin Policy"+(browser name) might help out too.
This article gives workarounds for most major browsers.

Categories