I am writing an app for mobile phones using HTML5, Javascript and CSS. One part of the app should allow the user to load a text file present the phone's local storage on to a text area provided on that page. My questions are:
How do I create a file dialog box to ask user to select the txt file. (Is it possible?)
I read something about PHP etc to load files but I have no experience in it. Is there like a code snippet that I could use to load text file? Can Javascript, jquery mobile has something to do this?
Once I load it into the textarea, I want to edit it and save it again.
It would be helpful if someone can throw some light on this or direct me towards some resource where I can learn about it.
Local I/O is never allowed directly, for what should be fairly obvious security reasons. You need to set up an <input type="file"> form to do this, but I'm not sure how those behave on a mobile platform. I'm sure that that would very between platforms. Assuming a successful file upload and transmission to your editing area, saving back to storage would require a file download you would have to initiate, and which the user could choose to accept or ignore.
You use the words "local storage" and your tags include HTML 5, so there are additional options. You can look in to the LocalStorage API, which allows you to store larger amounts of data which you can then retrieve, allow editing on, and save. This is controlled by the browser to eliminate security issues. There is also the File API, which allows reading files. I believe this is read-only, however, (again for security) and may not be what you are looking for.
Related
The use case of this problem is very simple but i struggle to find a good solution for it.
I want to allow my users (through a webapp) fill some pdf files stored in server (pdf with forms, which begin more and more popular).
Actually, app like chrome or acrobat reader are able to fill them perfectly whe its open locally.
I already allow this functionnality for docx and xlsx files, for that i use Webdav and the custom protocols ms-word ad ms-excel. It works perfectly.
For pdf, I didnt found equivalent. Its look the mains pdf reader/editor doesn't implement this protocol. Whe we open distant file with these tools, they failed for write permission when save or they try to save the file locally) .
Another option i take a look was the new file system access api (https://web.dev/file-system-access/). But again i wasn't able to make it working properly. The main problem here is how we can edit the file.? Im able with this api to dowload the file locally and keep the filehandler to retrieve the updates, but i blocked on how i can edit the file ? like an option on the fileHandler to say "Open this file with default editor on the OS". this would be perfect. But for now to edit the file i have to manually open it on the eplorer. i can't ask my end user to do that there is too many risk they edit the wrong file.
Another option on the table is the different javascript library for editing PDF, but these last one looks all very expensive, usually very heavy on the client side, with advanced features definitively i don't need. I just want to fill the forms and retrieve the pdf completed. So i would like to avoid this option.
Last option i take a look, i already use pdf.js (from mozilla) and pdf-lib.js in my app for some drawing features. I was thinking
rendering the pdf with pdf.js
retrieve all the forms fields (id, type, size, position) of the pdf with pdf-lib
generate html input write on the top of the pdf with the informations given by pdf-lib
i let the users fill the input and click on a save button whe he finished
on the save, i edit my pdf with pdf lib, i set the value of all my forms fields by taking value of the corresponding html input, and i retrieved the pdf updated.
This solution look for me the more "feasible". But im afraid of the volume of development, on how it will render, deal with zoom, rotation, etc. i would like to not have my custom solution.
I precise my webapp target chrome so it make me crazy to not be able to use the chrome pdf viewer/editor to do what i want.
PS : i struggle to post this question on stackoverflow. the previous one was deleted witout i had precise reasons. i try to be more specific on this one, but please if its such a dumb question, please answer it
I feel your pain, this is currently not possible. Adobe acrobat can open PDFs from webdav locations (simply call acrobat.exe and pass in the WebDAV UNC and it will work) but there is no way to trigger this from the browser.
If you are able to deploy software to your customers machines, you could create a custom URL scheme to do this...
I'm not an expert in cyber security and exploits. I need help figuring out if my app is vulnerable and in what way.
Let's assume I'm an idiot (and I'm not to this extent), and I leave the possibility for client users to upload (exploiting my front end) any file they want on my server in a subfolder (let's call it 'danger') of my ASP.NET application, hosted on IIS.
Being that way, anybody can upload a generic example.hml file and access it back at the url mydomain.com/danger/example.html. They can also upload JS files and whatever they want.
Let's forget for a moment the fact they can fill my disk.
Given I prevented ASP execution from files in that folder, what kind of damage can I be subjected to?
Thanks in advance.
Just off the top of my head:
An attacker could upload a corrupted file which would trigger a remote-code execution vulnerability in your antivirus, potentially executing code under the local system account. (I've seen this happen with Windows Defender, and I've seen reports of similar vulnerabilities in other AV products.)
They could upload a file with a mangled name which exploited a bug in IIS to bypass your file-type checks and the "no execute" flag on the folder. (I've seen this reported, albeit in a very old version of IIS.)
If the files can be accessed publicly, they could host their own content on your site, potentially including illegal or malicious content. This could damage your site's reputation, and potentially leave you liable to prosecution.
Well, yes, you do have to be carefull IF YOU allow any kind of preview, or say allow the person to download the file, but when you download, you also attempt some kind of preview on the server.
In fact, this is not a lot different then dropping a simple text box into a form, and then letting the user type in information into that text box, you then say hit submit button, and now re-display the page with what they just typed in.
What happens if they start typing in javascript text into that text box?
Say a multi-line text box in which you can type in a paragrath of comments or text.
So, you type in this:
Hellow how are you
<script>
JavaScript code here
</script>
Now, when you go to re-plot the page - not only are you re-display of what was typed in, but those script code typed in ALSO will run!
In fact, if you drop a text box on a web page, and do this:
Hello, how <script> are you
You notice you get a page exectution error. (becuase asp.net has built in protection to NOT allow this). However, if you adopt some html editor text box (ckEdit, or ajaxtoolkit editior), such controls will have additional security code to prevent end users from typing in script code.
So, a few things you have to be concered about:
If you allow up-loading of files, then ensure that you don't have code that attempts to load/execute that file. So, you might allow users to up-load pdf files, and then maybe a routine that attempt to "open" or use that file. But what happens if they in place of a pdf file up-load a MyTest.exe. In other words, they up-load a exectuable program in place of a pdf? Well, then you mostly ok, but you BETTER NOT have code that attempts to load such files - especially code behind that may use some library or code that in effect launches that pdf or word or exec file. Since that code then might try to load or run what is now a .exe program.
So, this means a few things:
You want to limit the file extensions allowed
You need to ensure that your code does not "execute" that up-load file
If you allow download of that file, then careful how you do this
(again, ensure that you don't open up possibiity to execute that file).
So, for the most part you should be ok, but if up-loaded files are further processed by your server side code, then just be aware of HOW you open or process such up-loaded files.
As noted, say users up-load a simple text file, and after up-loading you take the text from that file, and then display it in some kind of memo or text box in a web page. But, again, you sure it is just text in that file? And if you pull the content from that file and THEN have it render in your browser (because you assumed text), but it now might have browser code injected into that text file.
So, any point in your server side code that opens up-loaded files, pulls the content and THEN say spits out that content for display of data is a caution area.
So, the first simple line of defense?
Limit the types of files. If users are expected to upload only PDF files then ONLY allow say PDF and maybe .zip file extensions - reject anything else.
And as noted, just keep in mind any kind of post-processing code you have that runs AFTER up-loading that file. If your site is taking such up-loaded files, and is to open up the file(s), AND THEN DISPLAY that content back to the end user, then again caution is required, since when you display such content in a browser, that content in theory can have script code - and like anything else your code spits out to the browser (like a web page with HTML etc.) also means that the browser will run that script code.
I mean, a browser simple takes whatever the server sends to that browser, and renders the HTML. However, these days, browsers have MUCH more ability to also run code in that browser. So, that's why now you can say run cool games 100% in a browser, since browsers have become VERY powerful systems, and almost their own computer system in their own right. So, the ability of browsers to run code and give an experience that rivals the desktop in terms of speed and response (and even interactive games) is the result of browsers now being able to run code and do much MORE then just display some simple HTML.
So, under no case should you allow up-loading of files, and then have some software that can "run" or even pull contents of that file and spit it out back to the user in the form of browser display. And the reason is that file content may well have executable code in that file contents.
I am working on an web site which will be packed in an .exe file. So the site will only be used offline. Now i need to parse an local xml document. How can i get the file handle to a local file using html5 file api?
EDIT: I dont want to use <input...> or dragging file into browser.
I'm afraid I may be the bearer of bad news for your design: The action you are requesting expressly violates the security model as specified in the File API spec. The client implementation of FileReader() must make sure that "all files that are being read by FileReader objects have first been selected by the user." (W3C File API , 13. Security Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just arbitrarily open and read any file from a path without any user interaction. No browser manufacturer would allow unfettered access to the entire file system like that.
If your script really needs that XML file, you are going to have to instruct users on how to grant the browser access to it, as every browser will prevent your code from opening it directly without user action.
Well, technically there is indeed a way, but you're going to (hopefully) need to bypass the browser's security settings, and it is inherently unsafe, but no more so than anything else requiring specific file locations.
That said...
<html>
<head>
<script>
function foo(){
//insert desired filereading script here.
}
document.getElementById("fileFoo").click();
</script>
</head>
<body>
<input type="file" id="fileFoo" display="hidden" value="filepath.extension" onclick="foo"/>
</body>
</html>
Naturally, I've kept this vague (and slightly unorthodox) for my reasons, but provided you have the necessary control over the environment, it's completely possible.
I am experiencing the same problem these days. I need the website to display some data each time I launch the webpage. The data need to be adaptive to each launch, automatically, so I don't think #Augusto 's link could solve your question.
After trying out different ways (including writing a temporary local XLM or JSON file), I finally persuade myself that maybe "replacing" the "data" in the html file could be the most straightforward way.
I have a html template, within which there is a string like [data]. Each time when launch the webpage, [data] will be replaced by real data like [1,2,3]. So actually it is the new file that is launched.
You can go to enter link description here to see how the "replace" is done. Good luck.
I'm developing a web app that needs some sort of filesystem access. Ideally I'd want to be able to "Open..." a file into the app and then "Save" the file back to local filesystem at the location that the user opened it from.
Currently, we use a java applet to achieve this functionality, but since java is going out of style, we're needing to do this with javascript and html5.
Obviously, this can't be done because of security reasons built into browsers, so I'm trying to somewhat emulate it.
I'm using the html5 file api to successfully import/open the files, so that's half the battle. The hard part is getting the saving feature. I'm getting close using an iframe and content-disposition, but problems arise when browsers are set to automatically download the files to a downloads folder... users may get confused and be unable to locate the file they just downloaded.
So, my question is this: is there some sort of onSave event or some kind of way for the browser's "Save As..." window to return at least the filename that the user saved the file under?
Also, I've looked into the filesystem/fileWriter html5 apis, but from my understanding they're limited to only a sandboxed area of the local filesystem and only available in chrome dev releases.
Any help would be appreciated!
No, there is no way to do that with pure JavaScript. You can manage to trigger a download with data URIs or an iframe with some headers but you can't circumvent the browsers' download managers.
You can either use a Flash or Java applet to handle the saving for you, or ask the user to right click on the link and do save as, then he might be able to choose the destination.
One popular option using Flash is Downloadify.
I am taking a text file from user and then posting that file back to the browser using ajax storing the content in db and then showing the content back to user page using Jquery post response.
Now i want to something like this..
Read the text file from the user computer using javascript. Display the content and when he submits the page I will save the values.
Can't be done in pure JS for security reasons. You would need to have the user upload the file to your server, and fetch the contents back through Ajax.
If you use Flash or Java, you should be able to gain direct access to the file. If you speak Flash/Actionsript, maybe SWFUpload's source code (especially the new client-side resizing functions) can serve as an inspiration.
Update: This blog entry should help. Read and write local files with Flash Player 10
Update: To elaborate on the "upload and fetch" thing, if you do the uploading in an IFRAME, you could even have the upload script simply output the text file's contents. Because the iframe belongs to your domain, you will be able to retrieve its contents via JavaScript when the upload has finished. As long as you send a content-type: application/text it should be fairly safe from any malicious attacks.
If you're ok with Firefox 3.6 support only check out https://developer.mozilla.org/en/Using_files_from_web_applications, otherwise you should use Flash, Java or silverlight for this.
You won't be able to read a file in user's computer due to security issues.
Reading client files in javascript is possible with the new File API available in modern browsers. Check this site and its code: http://www.readfileonline.com/
However, before reading file contents in javascript, the user must explicitly select the files it allows to read. This is a security feature of the standard.