I need a Javascript sample which reads contents from a url and creates a file in the client with same contents when some button is clicked. I also understand that Javascript cannot be allowed to access the local file system (Unless you use ActiveX objects). I do not want to rely on ActiveX objects (since my client is not IE always).
So here is what I did. I used the standard XmlHttpRequest made a request and got my bytes. Now I thought I could kinda stream this contents to the user, first by opening a standard dialog box (the box that pops up when you attempt download something from internet with options like Open/Save/Cancel) and then asking the user to save it somewhere.
I know how to do the read part, can someone show some javascript/html sample on "How to stream open a confirm dialog box to the user and stream some contents?"
PS: Not too sure if this could be done in javascript at all but with Javascript you never know what is possible and what is not :)
Rather than using Javascript to stream the content, which is not possible for obvious security reasons, you need to point the browser at a URL that will return a 'Content-Type' header of 'application/octet-stream'. In most cases this will force the browser to initiate a 'save as' operation and ask the user what to do with it.
I believe it is possible to do this using an iframe in the same page, such that the user will not have to navigate away from the page or open a new tab/window.
See it this way: if you could read/write to users' computers using JavaScript, then no computer would be safe from browsing the web.
Having said so, you cannot read/write client-side files using JavaScript.
But you could if you use Flash / a Java applet; in those cases the embedded objects asks for your permission before doing such actions.
You may want to have a look at TiddlyWiki that claims it can write itself to the disk...
If I understand what your question is, then you want to use JavaScript to write data like a server-side script would (PHP, Python, Java, etc..) but in browser?
If so, then what your asking isn't possible with in browser JavaScript.
However if for some reason you wanted to do this with server-side JavaScript, then yes the "streaming" part is possible.
Related
I have a program where the user does some actions (i.e. clicking on several buttons). I want to record their clicks and the buttons that they click to allow the user to then download a text file with a record of their clicks when they click a separate "download" button. I looked at the File-system APIs for HTML 5, but they seemed to not have cross-browser support. I would ideally like to have this entire file generation and download scheme be entirely client-side, but I am open to server-side ideas as well.
TL;DR: Essentially I'm looking for an equivalent to Java's FileWriter, FileReader, ObjectOutputStream, and ObjectInputStream within Vanilla JS or jQuery (would like to stay away from php, but I'll use it as a last option).
Also, why don't all browsers support the filesystem api? (I'm guessing that it would make MSWord and Pages go out of business with all the open source clientside text editors that could come out.)
Unfortunately the HTML5-File-system is no longer a part of the spec, long story short FF refused to implement because they claimed everything you could do in the File-System API was doable in the HTML5 Indexeddb (which was mostly true). Please see this blog post for more on why FF didn't implement. I do not know IE's story. (I may have exagerated why FireFox didn't implement, I'm still bummed because you cannot actually do everything in indexeddb that you can do in the noew "Chrome File-system API")
Typically if two of those three browsers implement a spec, it stays in the spec. Otherwise that spec gets orphaned. However, I'm fairly certain a large reason the file-system api didn't take off is because of the IndexedDB API (caniuse IndexedDB) really took off when both specs were introduced. If you want cross browser support, check this api out.
That all said if you are still set on the file-system api some developers wrote a nice wrapper around the IndexedDB, the File-system api wouldn't actually supply you with a stream anyway. You would have to keep appending events to a given file given a fileWriter object. you'd then have to read the entire file and send to the server via an ajax request and then downloaded from the server once successfully uploaded.
The better route would be to use the IndexedDB apiwhich as stated on developer.mozilla
Open a database.
Create an object store in upgrading database.
Start a transaction and make a request to do some database operation, like adding or retrieving data.
Wait for the operation to complete by listening to the right kind of DOM event.
Do something
with the results (which can be found on the request object).
Here are a couple tutorials on the IndexedDB.
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
http://www.html5rocks.com/en/tutorials/indexeddb/todo/
As for giving the user that file, as mentioned briefly before you would have to upload the file to the server and download upon the "download" request. Unfortunately you have to trick the user into giving them the data already on their machine. Anyway, hope this all helps.
I have created a webpage but my friends or collegues always copy the source code and copy all the data easily, so is there any way to hide page source option from browser ?
As a rule, if you are putting information on another user's computer (whether because you made a document or they viewed your webpage), you really can't control what they do with it.
This is an issue that larger companies deal with often. Have you heard of DRM? It's a mechanism that companies like to try to use to control how people can connect to their services, use their content and in general, try to exert control over their data while it's on your system.
Now, a web page is a relatively simple container for holding information. You expressed an urge to prevent your friends from copying the source code. You could try to encrypt it, but if it's using local data to decrypt itself, there still isn't going to be anything that stops them from just copying what's in the View Source window and running it again (even if they can't really read it).
I'd suggest that you don't worry about it. If what you have on your page is so important that others shouldn't be able to see it, don't put it on a webpage.
Finally, Google doesn't much care that you're able to view the source to their home page. Why not? Because the value of the search engine isn't in what the home page looks like, but in the data on the back-end that you don't have direct access to. The value is in the algorithms that execute on the server when you hit that Google Search button that queries that data and returns the information you're looking for. There's very little relative value in the generated HTML that you see in the page. Take a leaf from their book and don't stress that they copy your HTML.
No , there isnt any way to do it, however you can disable right clicking in browser via javascript, but still they can use shortkeys to open developer view (in chrome F12) and see the source. You cannot hide html or javascript from client, but maybe you can make it harder to read.
No. Your HTML output is in the user's realm. Even if there was a way to disable view source in one client, a user could use a different one
Always assume that your site's HTML is fully available to end users.
Yes and no. You can definitely make HTML and JS harder to intrepret by obfuscating your code - that is, taking your code and making it look confusing. Here is a tool that can do that: http://www.colddata.com/developers/online_tools/obfuscator.shtml
However, these things all use code, and code can be decrypted through any number of methods. If you post a song to the internet, even if they cannot find the mp3, they can simply record their speakers. If you upload an image and prevent users from downloading it, they can take a screenshot or use their camera. In order for HTML and Javascript to work, it has to be intrepreted by their computer, and even if you do find a way to disable "View Source" there are others ways, like a DOM inspector (F12 in IE/Chrome, Ctrl+Shift+K in Firefox).
As a workaround, use copyright, warn your users they will be punished if they copy your code, and put watermarks, labels and logos over any mp3s or images you don't want stolen. In the end, disabling right clicking (which is also possible, see How do I disable right click on my web page? ) or disabling selection (also possible) does nothing, because there is more than one way to get your code, like searching through temporary internet files.
However, you ask "what if I want a site where my users can log in and I need security? How can I make it so nobody can see my code then? Doesn't it have to be secure and not out in the open?"
And the answer is, yes, it needs to be secure. That's what server-side languages, like PHP, are for. PHP does all the work on the server itself so the user cannot see it. PHP is like a pre-rendered language - rather than doing it in real-time, PHP does all the work beforehand so the user's computer doesn't have to, making the code safe. The code is never put onto the user's computer, because the user's computer doesn't need it. The work is done by the website itself before the page is sent. SSL is often paired with PHP to make absolutely sure that websites have not been hacked.
But HTML and Javascript have to be done in real time on the user's computer, so you cannot disable View Source because it is useless. There are many, many ways that users could get around it, even if View Source is disabled, and even if right clicking is disabled.
If your code doesn't need to be secure, however, I'd recommend you consider keeping it open source. :)
I am trying to do a simple thing:
Let the user choose a txt file, and save its context to be used on the client side only.
no server side needed.
Is it possible ?
Thanks.
It is possible to do so with HTML5 Files API as explained in these resources:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
http://www.html5rocks.com/en/tutorials/file/dndfiles/
I guess you mean "save its content" and conclude you want to do anything with this content on the client side, e.g. extract some parts to fill a form. Anyway saving the whole file unchanged, on the same machine where it comes from, does not make sense.
So the problem is not how to upload, but how to open/read a file. You can do this with a Java Applet, Flash, Silverlight, ActiveX ... just to name a few.
JavaScript is not an option. It cannot access the file system.
If the html page, that is hosting your javascript, is from a remote server. This script is not trusted to do actions on your local filesystem.
<Obscure solution mode level = 1>
You can give more trust to a page, but this is something your user has to do. If this is an app/web only for use within an enterprise, you can probably do this centrally. And every browser handles this differently. So it is not something you can rely on, when you do not have a limited userbase.
<Obscure solution mode level = high>
If your (enterprise) users are using Internet Explorer, you could also create a HTML Application (simply give your html page an hta extension). These pages have full trust, but can only be started from a trusted location, or require confirmation from the user.
The only way you can acheive this successfully is to build an ActiveX type plugin/component (or java applet) you will have much more control of the client machine.
No. JavaScript cannot access the local filesystem.
However, you could install a webserver on your machine and e.g. run PHP on that one. Then you could do it without ever sending your data over a network connection. That would require you to do your data processing in PHP though.. probably not what you want. Or you could simply send back the data to your javascript.. but that'd be pretty awful to run an upload just to make the data available to JavaScript.
Is it possible to read the contents of an uploaded file (through <form><input type="file">) from inside javascript with no backend? I suppose it's possible with HTML5, but what about HTML4?
You can read (not upload - well, you can upload too, but that's like sending fan-mail to Edgar Allen Poe; nothing stops you but he won't be able to read it) from files if your script runs in a very trusted context.
If anyone on your network is browsing the web in a browser set to give that much trust, disconnect their machine from the network first, make their settings tighter second.
I don't know if I understand correctly. How about using something like uploadify together with jQuery. I guess you'll have to grant the webserver the privilege to write in the specified folders.
The security model will not let you unless you change the security to allow this.
http://www.mozilla.org/projects/security/components/signed-scripts.html
Can you elaborate on what you want to do?
I read the question as "How do I grab the contents from a file chosen using a file upload field and process it on the client without involving a backend/webserver".
I am thinking UniversalBrowserRead access for FF and HTA filesystem for IE for example
I have a Firefox component for PDF signing that I invoke via Javascript. The problem is that this component outputs the signed PDF as a file on the user's filesystem - there is no way to get a byte[], stream or similar.
I need to post this signed PDF file back to the server. Is it possible to do this in plain Javascript, without additional Firefox components?
You can't do this without under intervention, this would he a huge security hole. Think about visiting a webpage and it being able to grab and upload any of your files without you doing a thing...you can see how this would be abused really fast.
You might be able to do this with a Firefox extension, I'm not sure of the security limitations it imposes (though I wouldn't be surprised if it disallowed this as well), but JavaScript would not be an option here.
There's no direct way to access data on a user's file system within a browser unless you're doing it through an extension. This would be a huge security risk.
If the file can be put into an <input type="file" /> element in Firefox, you can use JavaScript to automatically upload the data to the server without user intervention, but you would need something to initially get the file into the page's memory, not the file system.
Hell no - And for very good reason. You wouldn't want every Tom, Dick and Harry automatically grabbing all your files.
I believe it's the file input that needs user interaction. You can post the form automatically but you can't fill it in.
IMO your best bet is replacing the whole Firefox component with a single Java applet - I'd all but guarantee there's a Java project for PDF signing. Perhaps even Flash or Silverlight as long as you can do what you need with your PDF.