I have setup FineUploader on a site and I included a check box that allows users to upload files using HTTPS if the want to.
Unfortunately if the user accesses the site using http and then tries to use ssl it errors out, I assume because of CORS issues. I assume it is a CORS issue because if I access the site using https and try to upload using ssl it works fine.
I found some documentation about enabling CORS support, but it appears that you either need to make it so only CORS requests will be made or none will be made. In my situation there will be CORS request some times and not others.
Does anyone know of a good work around for this? Should I just reload the entire page using HTTPS when the checkbox is clicked?
If you're uploading straight to Amazon s3, see the note in the official docs, "SSL is also supported, in which case your endpoint address must start with https://" in the script within your uploaderpage.html file.
request: {
endpoint: 'https://mybucket.s3.amazonaws.com',
// Note that "https://" added before bucket name, to work over https
accessKey: 'AKIAblablabla' // as per the specific IAM account
},
This will still work if uploaderpage.html is served over http (or you could populate the endpoint value dynamically if you need flexibility re endpoint).
This will help you avoid the mixed content error when uploading over https, "requested an insecure XMLHttpRequest endpoint", which happens if the page is https but you request a http endpoint.
Just to reiterate what I've mentioned in my comments (so others can easily see this)...
Perhaps you can instantiate Fine Uploader after the user selects HTTP or HTTPS as a protocol for uploads. If you must, you can enabled the CORS feature via the expected property of the cors option. Keep in mind that there are some details server-side you must address when handling CORS requests, especially if IE9 or older is involved. Please see my blog post on the CORS feature for more details.
Related
My environment is Nodejs, and I want to make request(http) to api in the internet.
But there are some problems, after using webpack, the console would show me cross
domain error. I guess it is because my api and webpack-server have diffrent in
port. What should I do to solve the problem.
The issue you are experiencing is caused by the server not properly sending a CORS header to allow the request.
If the API is one of your own, you can enable CORS on your server for one, many, or all domains that attempt to access the API. How to do this depends on your server configuration.
If the API is provided by someone else, you may need to contact them or consult their documentation on how to perform a CORS request to their services.
I tried to update a record(mongo DB) using the endpoint PUT generated by restivus in meteor. It is working with the 'localhost' address. When instead of 'localhost' used the ip address it returned the following error.
XMLHttpRequest cannot load http://192.168.2.44:3000/api/v1/posts/HBw6uWkzScivNj9Er. Method PUT is not allowed by Access-Control-Allow-Methods in preflight response.
I read their documents, but couldn't find a solution. If anybody faced the similar situation and solved the issue, please share your solution.
Thanks in advance.
You would notice that when your browser's address bar shows localhost url, the localhost request works. But if your browser address bar shows 192.168.2.44 (assuming it is your machine), the localhost url will stop working and the ip address url will work. Browsers will not allow making an XMLHttpRequest or an ajax request to a different domain name. In this case your ip address and localhost are different domains, even though they point to same computer. Still browsers will not allow it due to Cross Origin request policy.
Whenever you are making an ajax request, its best to not mention a domain at all. This will default the browser to make requests on the same domain which is loaded. Simply substitute your url with /api/v1/posts/HBw6uWkzScivNj9Er and you will ensure it always works.
I recommend reading the following MDN article for a complete understanding of Cross Origin policy.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
I'm trying to process onedrive files in client-side javascript, but first I need a way to use XMLHttpRequest to download the file. Onedrive supports cors for a lot of operations, but for downloading the file into javascript there is the following problem:
As mentioned here: onedrive rest api manual
I can send a request to:
GET https://apis.live.net/v5.0/FILE_ID/content?access_token=ACCESS_TOKEN
and it will reply with a location header redirecting the browser to the file. The problem is when I send these requests through XHR, the browser always sends the Origin header with the request. For the first request I described above, onedrive also replies with an Access-Control-Allow-Origin:* header, so the request is allowed in the browser. However, when the browser is redirected to the actual location of the file, that resource does not have the Access-Control-Allow-Origin header, so the XHR request is denied by the browser(chrome sends an Origin header set to null for the redirect request).
I've also tried getting the location but not redirecting automatically, and then sending another XHR request, this will set the origin header to the domain of my site, but the result is the same.
As I mentioned in the beginning, I need to process the data in javascript, so I'm not asking about how to download onedrive files to hard drive. I need the data to be accessible by javascript in the webpage.
I know that I can use server side programming to get the file data for me and then send it to the client, but for my application this is not an option(at least this is not what I'm asking for at the moment).
If there is no way to do this, does anyone have an idea why they would implement their api this way? To allow javascript to get the location through cors and redirect but not include a cors header for the redirected resource. Why not just deny cors in the first place? Is this a bug?
The answer, as best as I can tell, is that downloading content cannot be done purely by JavaScript in a browser. Why did they do it this way? You'd have to ask them, but I would guess either a bug, or some unspecified "security concerns". For what it's worth, they seem to think that downloading content is CORS compliant in the documentation here: https://dev.onedrive.com/misc/working-with-cors.htm:
To download files from OneDrive in a JavaScript app you cannot use the
/content API, since this responds with a 302 redirect. A 302 redirect
is explicitly prohibited when a CORS preflight is required, such as
when providing the Authorization header.
Instead, your app needs to select the #content.downloadUrl property,
which returns the same URL that /content would have redirected to.
This URL can then be requested directly using XMLHttpRequest. Because
these URLs are pre-authenticated they can be retrieved without a CORS
preflight request.
However, to the best of my knowledge, they are wrong. Just because you don't need a preflight request doesn't mean that the response is CORS-compliant. You still need an Access-Control-Allow-Origin header on the response.
For anyone wondering, this is still an issue in the new Graph API (which is essentially a proxy API to the OneDrive API, as I understand it). The same basic issue is still present - you can get a download URL from your items, but that URL points to a non-CORS-compliant resource, so it doesn't do you a whole lot of good.
I have an active issue open with Microsoft here about this issue. There has been some response to my issue (I got them to expose the download URL through the graph API), but I'm still waiting to see if they'll come up with a real solution to downloading content from JavaScript.
If I get a solution or real answer on that issue, I'll try to report back here so others in the future can have a real answer to reference.
This is not an answer, I cannot comment yet.
Last week the new API for onedrive was released. http://onedrive.github.io/index.htm
Unfortunately it will not solve the problem.
https://api.onedrive.com/v1.0/drive/root:{path and name}:/content?access_token={token}
Will still redirect to a ressource somewhere at https://X.files.1drv.com/.X.
Which will not contain any Access-Control-Allow-Origin headers. Same goes for the Url "#content.downloadUrl" in the JSON response.
I hope that microsoft will address this problem in the very near future, because the API is at the moment of very limited use, since you cannot process file contents from onedrive with html5 apps. Apart from the usual file browser.
The only solution, which I see at the moment would be a chrome app, which can process the Url without CORS. see https://developer.chrome.com/apps/angular_framework
Box does exactly the same thing for download requests. I have not found any way around this problem without involving a server because the browser will not let your program get access to the contents of the 302 redirect response. For security reasons I am not convinced of, browsers mandatorily follow redirect requests without allowing user intervention.
The way we finally worked around this was
the browser app sends the GET request to the server which forwards it to the cloud provider (box/ondrive).
server then DOES NOT follow the 302 redirect response from Box or OneDrive
The server instead returns to the browser app, the content of the location field in the 302 response header, which contains the download url
The javascript in the browser app then downloads the file using the url.
You can now just use the "#content.downloadUrl" property of the item in your GET request. Then there is no redirection.
From https://dev.onedrive.com/items/download.htm:
Returns a 302 Found response redirecting to a pre-authenticated download URL for the file. This is the same URL available through the #content.downloadUrl property on an item.
i am struggling with the following problem. I created a simple webapp that sends via JavaScript „GET“ Operations to a other server.
So the problem is my app is hosted lets say on www.webapp.com/WebContent and the webapp itselfes consumes Data services. This OData Services are hosted on another system www.sap.universityber.com/opu/… so when I want to run the app locally with the reverse proxy (apache) and disable the security settings in chrome everything works fine. But when I want to run it from a normal browser without reverse proxy and the chrome settings it says „NO DATA“, Reason -> CORS.
Can somebody in this forum tell me how such a CORS- Enablement work maybe with an example code?
Please help.
Thanks
Enabling CORS would need to be done by www.sap.universityber.com/opu/, not in your web app. If it's an open API, they may offer a JSONP alternative (JSONP isn't subject to the Same Origin Policy, it does an end-run around it, but it also needs the cooperation of the server providing the content).
In short, you have to specify in your header that you accept requests from other domains. An in-depth read https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
A brief example:
Access-Control-Allow-Origin: http://mozilla.com
Do note that this has some implications for your security.
If you own the another system (www.sap.universityber.com/opu/), then you need to set the following response headers in the response from this system for every request:
'Access-Control-Allow-Origin': "www.webapp.com/WebContent",
'Access-Control-Allow-Methods': 'GET,PUT,POST,DELETE,OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type'
I am developing a firefox addon, and I need to make https calls. I am given an SSL certificate information (Serial Number, SHA1 Fingerprint, andMD5 Fingerprint). When I try to use the Request module from my main.js I always get a status of 0. I tried the Request module with other http requests which are not secured and it works fine.
So I assume that the 0 status has to do with the SSL certificate.
Although I try to simulate the same requests using Dev-HTTP-Client google chrome plugin and it works fine and I can get proper responses from the https server.
I am not sure but I think I need to use the chrome module Cc["#mozilla.org/security/... to make this work.
If you can guide me with the proper steps to setup the SSL certificate information from inside the addon that would be great
Unfortunately there is no direct way to verify a cert manually and continue with the request. Instead you need to add an override on error yourself and retry.
Attempt to make a regular XMLHttpRequest via nsIXMLHttpRequest. There is enough code and samples around on SO and Google describing how to do it. The requests module won't do, as it hides some necessary details.
Implement nsIBadCertListener2 and stuff it into req.channel.notificationCallbacks (might want to preserve the original callbacks).
If your .notifyCertProblem() get called, that means the cert did not verify. Now it's up to you to verify the cert with your seeded fingerprint (and serial).
If your seeded infos match, add a cert override (that won't work for STS hosts, of course)
Re-spin the request after adding the override, as the first request already got canceled as soon as it hit notifyCertProblem().
Most of the stuff is neatly demonstrated in ErrorPage.jsm of Boot2Gecko (still applies to all other mozilla powered products). That's a cross reference, so click around ;)
Of course, you'll need to use the chrome module.
I should mention that it is deliberate that I'm not giving a complete copy-pasta code solution, only all required pointers, as it is my opinion that a person should be capable enough to work with what I provided, or don't touch security subsystems in the first place.