Sending a POST request to API with localhost - javascript

I am sending an image to an API using my localhost address but for some reason it doesn't identify the image. It works fine if I use links on google. The code looks something like this:
unirest.post(requestString)
.header("X-RapidAPI-Key", API_KEY)
.field("urls", "http://localhost:4000/uploads/1570544614486-test.jpg")
.field("album", ALBUM_NAME)
.field("albumkey", ALBUM_KEY)
.field("entryid", entryId)
.end(result => {
console.log(result.body);
});
I believe this will work once on a domain but I need it to work now for testing. How can I make this work using my localhost?

You haven't exactly specified what API you're reaching out to, so your mileage may vary with different APIs.
However, based on your error message, I've determined you're trying to leverage the Lambda Face Recognition and Face Detection API via RapidAPI. This (linked) docs for this web service clearly show that the urls parameter you're attempting to use with your localhost URL above is actually meant to hold a comma-separated set of URLs to publicly-accessible image files. The remote API can't possibly resolve localhost in this context, because (a) it can't possibly have any idea what IP localhost should refer to, and (b) it's highly likely that your localhost here doesn't respond to HTTP requests from the broader Internet.
Instead, modify your request to use the files parameter (type binary) to upload the raw binary data for your image(s).

Related

Axios GET request returning ECONNRESET for some URLs

I am working on an application that uses an express server to reach out to an API to fetch data. In our organisation outbound traffic requires a proxy which I have supplier to axios like below (not the real one):
let response = await axios.get(endpointUrl, {
proxy: {
host: "123.45.678.90",
port: 0000,
},
})
Passing various URLs into the axios get function returns varied results, with the following URLs returning a result:
https://www.boredapi.com/api/activity
https://api.ipify.org?format=json
https://jsonplaceholder.typicode.com/todos/1
Whereas the following URLs are returning an ECONNRESET error almost instantly:
https://api.publicapis.org/entries
https://randomuser.me/api/
https://reqres.in/api/users
I can't see any pattern between the URLs that are/are not working so wondered if a fresh set of eyes could spot the trait in them? It's important to note that all these URLs return successfully in the browser, just through this axios call being the problem.
To add to the mystery, the URLs that do work work on my machine, do work on a machine outside our organisation - so potentially a clue there?
Any help/guidance of course would be appreciated, thank you.
This error simply means that the other party closed the connection in a way that was probably not normal (or perhaps in a hurry).
For example, a socket connection may be closed by the other party abruptly for various reasons or you may have lost your wifi signal while running your application. You will then see this error/exception on your end.
What could also be the case: at random times, the other side is overloaded and simply kills the connection as a result. If that's the case, depends on what you're connecting to exactly…
Solution - This is happening because you are not listening to/handling the 'error' event. To fix this, you need to implement a listener that can handle such errors.
If the URL that work on your machine also work outside your organization and the other don't, it is most likely a problem with your proxy.
Some proxies might have configurations that makes them remove headers or change the request in a way that the target does not receive it as intended.
I also encountered a problem with axios and proxies once. I had to switch libs to make it work. To be sure, I would recommand using a lib like "request" (deprecated) juste to make sure it is not a problem with axios. There are multiple open issues on the axios repository for proxy issues.
ECONNRESET is likely occurring either because the proxy runs into some sort of error and drops the connection or the target host finds something wrong with the incoming connection and decides to immediately drop it.
That target host may either be finding a problem because of the proxy or it may be expecting something in the request that it finds is missing.
Since you have evidence that all the requests work fine when running from a different location (not through your proxy) and I can confirm that your code works fine from my location (also not running through your proxy), it definitely seems like the evidence points at your proxy as causing some problem in some requests.
One way to debug proxy issues like this is to run a request through the proxy that ends up going to some server you can debug on and see exactly what the proxy has done to the incoming request, compared to a request to that same host that doesn't go through the proxy. That will hopefully highlight some difference that you can then test to see if that's causing the problem and then eventually work on the configuration of the proxy to correct.

Include header when chunks are fetched with code splitting

I've used code splitting to seprate restricted parts of my app into different chunks. This is working great so far, now I would like to ensure that the files themselves don't get served unless authenticated. I was thinking of using ngx_http_auth_request_module
http://nginx.org/en/docs/http/ngx_http_auth_request_module.html#auth_request
Which allows to send a sub-request before serving certain files. How can I ensure that certain headers are always send as part of the HTTP request when React wants to fetch the necessary chunks?
I have trouble understanding why you would need to prevent unauthenticated malicious users to have access to your static chunks.
Dynamic imports and code splitting are mainly used to reduce the bundle size for large applications as users won't necessarily need everything.
In order to secure your app you need to prevent users from seeing or tampering with data they do not have access to. This means the security lies with the API your app is talking to.
What I do:
Reject unauthenticated requests to the API
Keep a token client-side on authentication
Pass and check the token on all requests
Burn the token when obsolete and redirect to login
Notify, redirect users when they do not have access to some data or better not displaying content they do not have access to
I'm sure you already did what I wrote above, what I want to emphasize is that chunks are basically empty UI filled with data from the secured API.
Let's say I have bad intentions and I bypass client-side routing in order to have access to the restricted chunk. It will be an empty UI with secured API routes, I won't be able to do anything with it.
In case you have a very specific need, you might need to write a webpack plugin.
about the ensure request
One of webpack 's properties is that it can fetch only necessary chunks when loading pages.You can just use like require.ensurn to query chunks when necessary,so there is no need to ensure the certain headers.
ngx_http_auth_request_module
Ngx_http_auth_request_module and sub-request are always used to fetch web file in server.It's always used as backend authentication module.Here is the data flow direction in nginx.
When you download file, the download request will be passed to the server, then server return the override Http Request to Nginx,then Nginx will find the exact file.
The ngx_http_auth_request_module allows to send request to back server(like php .tomcat), and based on the request to pass or not, if pass, you will be able to fetch file in the back server.
nginx-----load speed
The nginx always fetch static file, like index.html.If have to validate the permission for every js/css everytime,then fetch it throw,thd loading speed for page will be very slow.
about how to authenticate
Since you have separated app.Here is a little suggestions.You can get the authenticated request by only import restricted parts in the authenticated file.And the webpack will automatically handle the rest.
fetch data from the server in the non-restricted part with information to authenticate like this:
http://.../api/auth?info=...
based on the infos in server to authenticate, and pass other infos like type back to the frontend
based on the type information to view .
if (this.props.type === "restrict"){
<restrict component/>
} else {
<non-restrict component/>
}

getJSON function get data from url on localhost only

I use below function to get the Continent Code from the api which works fine on localhost but fail in live environment which is website
$.getJSON('//www.geoplugin.net/json.gp?jsoncallback=?', function (data) {
// console.log(JSON.stringify(data, null, 2));
console.log(JSON.stringify(data.geoplugin_continentCode));
});
Warning which i see in Console is
Loading failed for the with source
“https://www.geoplugin.net/json.gp?jsoncallback=jQuery16407901144106031991_1537089290623&_=1537089292750”.
I am not sure why it fails on website https://www.example.com
could SSL version some problem as i am not sure as i tried it on fiddle & it works fine http://jsfiddle.net/om8ahkp3/
UPDATE
Since problem was due to crossdomain issue which as this api used a different url for ssl version. i was not able to use this ssl version as it was not free.
So ended up using another api which had free option also limited to 50k request on monthly basis.
$.ajax({
url: 'https://api.ipgeolocation.io/ipgeo?fields=is_eu& excludes=ip&apiKey=YOURKEY',
dataType: 'json',
success: function (json) {
console.log("json.is_eu " + json.is_eu);
}
});
What is the whole problem?
You want to access to a third site (crossDomain). So, That site decides that you can access to it, or not. When a site provides a service (similar geo service that you have used it), it determines which part of it's services are free.
In your case, if your source site's protocol is http (like as localhost) and dest site (service provider site) is http too, you can access to this geo service with your above code (because this third site allows this now). But if you want to access to this service from a https site (I think you are trying this now) the geoPlugin don't allow you easily or free!
In this cases, the destination sites, provide another urls and define user levels (to getting money for special services.).
In act, if your dest site was for yourself too(which it is not in this case), you could add needed access to specific referer sites, but now...
I look at its site to be sure. You must use this url in this case:
https://ssl.geoplugin.net/json.gp?k=yourAPICode
But this is not all of things! What is k in above url? This site writes:
"For SSL access, an API Key is required to offset certificate prices and costs €12 per year."
I don't know, but if you need it, you should search for free plugins (if exists) or buy it.

facebook graph api node.js invalid appsecret_proof

this is my first post so please go easy on me!
I am a beginning developer working with javascript and node.js. I am trying to make a basic request from a node js file to facebook's graph API. I have signed up for their developer service using my facebook account, and I have installed the node package for FB found here (https://www.npmjs.com/package/fb). It looks official enough.
Everything seems to be working, except I am getting a response to my GET request with a message saying my appsecret_proof is invalid.
Here is the code I am using (be advised the sensitive info is just keyboard mashing).
let https = require("https");
var FB = require('fb');
FB.options({
version: 'v2.11',
appId: 484592542348233,
appSecret: '389fa3ha3fukzf83a3r8a3f3aa3a3'
});
FB.setAccessToken('f8af89a3f98a3f89a3f87af8afnafmdasfasedfaskjefzev8zv9z390fz39fznabacbkcbalanaa3fla398fa3lfa3flka3flina3fk3anflka3fnalifn3laifnka3fnaelfafi3eifafnaifla3nfia3nfa3ifla');
console.log(FB.options());
FB.api('/me',
'GET',
{
"fields": "id,name"
},
function (res) {
if(!res || res.error) {
console.log(!res ? 'error occurred' : res.error);
return;
}
console.log(res);
console.log(res.id);
console.log(res.name);
}
);
The error I am getting reads:
{ message: 'Invalid appsecret_proof provided in the API argument',
type: 'GraphMethodException',
code: 100,
fbtrace_id: 'H3pDC0OPZdK' }
I have reset my appSecret and accessToken on the developer page and tried them immediately after resetting them. I get the same error, so I don't think that stale credentials are the issue. My
console.log(FB.options())
returns an appropriate looking object that also contains a long hash for appSecretProof as expected. I have also tried this code with a number of version numbers in the options (v2.4, v2.5, v2.11, and without any version key). Facebook's documentation on this strikes me as somewhat unclear. I think I should be using v2.5 of the SDK (which the node package is meant to mimic) and making requests to v2.11 of the graph API, but ??? In any case, that wouldn't seem to explain the issue I'm having. I get a perfectly good response that says my appSecretProof is invalid when I don't specify any version number at all.
The node package for fb should be generating this appSecretProof for me, and it looks like it is doing that. My other info and syntax all seem correct according to the package documentation. What am I missing here? Thank you all so much in advance.
looks like you have required the appsecret_proof for 2 factor authorization in the advance setting in your app.
Access tokens are portable. It's possible to take an access token generated on a client by Facebook's SDK, send it to a server and then make calls from that server on behalf of the client. An access token can also be stolen by malicious software on a person's computer or a man in the middle attack. Then that access token can be used from an entirely different system that's not the client and not your server, generating spam or stealing data.
You can prevent this by adding the appsecret_proof parameter to every API call from a server and enabling the setting to require proof on all calls. This prevents bad guys from making API calls with your access tokens from their servers. If you're using the official PHP SDK, the appsecret_proof parameter is automatically added.
Please refer the below url to generate the valid appsecret_proof,and add it to each api call
https://developers.facebook.com/docs/graph-api/securing-requests
I had to deal with the same issue while working with passport-facebook-token,
I finally released that the problem had nothing to have with the logic of my codebase or the app configuration.
I had this error just because I was adding intentionally an authorization Header to the request. so if you are using postman or some other http client just make sure that the request does not contain any authorization Header.

Google Maps JavaScript API RefererNotAllowedMapError

We're trying to develop an geoplacement app for one of our clients, and we want first to test it in out own domain.
We have signed for Google Maps JavaScript API, and we have a valid browser key and our domain, www.grupocamaleon.com, has been authorized to use that key.
But we can't make even the easiest example to run without error.
We have, in our domain and with our key, the following demo:
(1) http://www.grupocamaleon.com/boceto/aerial-simple.html
But it doesn't work, and Firebug console says:
"Google Maps API error: Google Maps API error: RefererNotAllowedMapError (link to Google documentation on RefererNotAllowedMapError) Your site URL to be authorized: (1)"
My credential page is missing the possibility of adding referrers to accept, so solutions involving adding referrers are not possible right now.
My credential Page:
Why do we get that error? How can we fix it?
I know this is an old question that already has several answers, but I had this same problem and for me the issue was that I followed the example provided on console.developers.google.com and entered my domains in the format *.domain.tld/*. This didn't work at all, and I tried adding all kinds of variations to this like domain.tld, domain.tld/*, *.domain.tld etc.
What solved it for me was adding the actual protocol too; http://domain.tld/* is the only one I need for it to work on my site. I guess I'll need to add https://domain.tld/* if I were to switch to HTTPS.
Update: Google have finally updated the placeholder to include http now:
Come on Google, you guys are smarter than the API Credential page lets on. (I know because I have two sons working there.)
The list of "referrers" is far pickier than it lets on. (Of course, it should be more forgiving.) Here are some rules that took me hours to discover:
The order in the list is important. Moving your URL up in the list may make it work.
"http://" prefix is required.
Even "localhost" needs it: "http://localhost/foo/bar.html"
A trailing * as a wildcard seems to work as if it is a string compare.
Even with "http://localhost/foo/bar.html", "http://localhost/foo/bar.html?arg=1" will not work. (Will a wildcard help?)
For both prod dev, have (at least) two rows: "http://localhost/foo/bar.html" and "http://my.site.com/foo/bar.html"
A port number (8085? 4000?) does not seem to be necessary.
There are probably other rules, but this is a tedious guessing game.
Wildcards (asterisks) ARE NOT allowed in the subdomain part.
WRONG: *.example.com/*
RIGHT: example.com/*
Forget what Google says on the placeholder, it is not allowed.
According to the documentation, 'RefererNotAllowedMapError' means
The current URL loading the Google Maps JavaScript API has not been
added to the list of allowed referrers. Please check the referrer
settings of your API key on the Google Developers Console.
I have the Google Maps Embed API set up for my own personal/work use and thus far have not specified any HTTP referrers. I register no errors. Your settings must be making Google think the URL you're visiting is not registered or allowed.
Just remind that if you just change it, it may take up to 5 minutes for settings to take effect.
I tried many referrer variations and waiting 5 minutes as well until I realized the example Google populates in the form field is flawed. They show:
*.example.com/*
However that only works if you have subdomain. or www. in front of your domain name. The following worked for me immediately (omitting the leading period from Google's example):
*example.com/*
According the google docs
this happened because the url on which you are using the Google Maps API, it not registered in list of allowed referrers
EDIT :
From Google Docs
All subdomains of a specified domain are also authorized.
If http://example.com is authorized, then http://www.example.com is also authorized. The reverse is not true: if http://www.example.com is authorized, http://example.com is not necessarily authorized
So,Please configure http://testdomain.com domain, then your http://www.testdomain.com will start work.
Check you have the correct APIS enabled as well.
I tried all of the above, asterisks, domain tlds, forward slashes, backslashes and everything, even in the end only entering one url as a last hope.
All of this did not work and finally I realised that Google also requires that you specify now which API's you want to use (see screenshot)
I did not have ones I needed enabled (for me that was Maps JavaScript API)
Once I enabled it, all worked fine using:
http://www.example.com/*
I hope that helps someone! :)
The Problem
Google suggests the format *.example.com/*This format does not work.
The Solution
Check the browser console for the Google Maps JavaScript API error: RefererNotAllowedMapError
Underneath the error it should have: "Your site URL to be authorized: https://example.com/".Use that url for the referrer and add a wildcard * to the end of it (https://example.com/*, in this case).
I found that even your HTTP Referreres are valid enough, wrong set of API Restrictions causes Google Maps JavaScript API error: RefererNotAllowedMapError.
For example:
You are using Javascript API for the key.
Add http://localhost/* to Application Restrictions / HTTP Referrences
Choose Maps Embed API instead of Maps Javascript API
This causes RefererNotAllowedMapError
There are lots of supposed solutions accross several years, and some don’t work any longer and some never did, thus my up-to-date take working per end of July 2018.
Setup:
Google Maps JavaScript API has to work properly with…
multiple domains calling the API: example.com and example.net
arbitrary subdomains: user22656.example.com, etc.
both secure and standard HTTP protocols: http://www.example.com/ and https://example.net/
indefinite path structure (i.e. a large number of different URL paths)
Solution:
Actually using the pattern from the placeholder: <https (or) http>://*.example.com/*.
Not omitting the protocol, but adding two entries per domain (one per protocol).
An additional entry for subdomains (with a *. leading the hostname).
I had the feeling that the RefererNotAllowedMapError error still appeared using the proper configuration (and having waited ample time). I deleted the credential key, repeated the request (now getting InvalidKeyMapError), created new credentials (using the exact same setup), and it worked ever since.
Adding mere protocol and domain seemed not to have included subdomains.
For one of the domains, the working configuration looks like this:
(As text:)
Accept requests from these HTTP referrers (web sites)
https://*.example.com/*
https://example.com/*
http://*.example.com/*
http://example.com/*
None of these fixes were working for me until I found out that RefererNotAllowedMapError can be caused by not having a billing account linked to the project. So make sure to activate your free trial or whatever.
This is another sh1tty Google product with a terrible implemenation.
The problem I have found with this is that if you restrict an API key by IP address, it wont work... BUT far be it from Google to make this point clear... It wasn't until troubleshooting and researching I found:
API keys with an IP addresses restriction can only be used with web
services that are intended for use from the server side (such as the
Geocoding API and other Web Service APIs). Most of these web services
have equivalent services within the Maps JavaScript API (for example,
see the Geocoding Service). To use the Maps JavaScript API client side
services, you will need to create a separate API key which can be
secured with an HTTP referrers restriction (see Restricting an API
key).
https://developers.google.com/maps/documentation/javascript/error-messages
FFS Google... Pretty important piece of information that would be good to clarify on setup...
Accept requests from these HTTP referrers (web sites)
Write localhost directory path
I experienced the same error:
This link talks about how to set up API key restrictions: https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions
In my case, the problem was that I was using this restriction:
HTTP referrers (web sites) Accept requests from these HTTP referrers
(web sites) (Optional) Use *'s for wildcards. If you leave this blank,
requests will be accepted from any referrer. Be sure to add referrers
before using this key in production.
https://*.example.net/*
This means that URLs such as https://www.example.net or https://m.example.net or https://www.example.net/San-salvador/ would work. However, URLs such as https://example.net or https://example.net or https://example.net/San-salvador/ would not work. I simply needed to add a second referrer:
https://example.net/*
That fixed the problem for me.
I add 2 website domains, set "*" in subdomain is not working but specific subdomain "WWW" and non-subdomain have been worked for my websites using the same Google Map API key.
dont' use "*" in subdomain
Hope it help.
That your billing is enabled
That your website has been added to Google Console
That your website is added to the referrers in your app.
(do a wildcard for both www and none www)
http://www.example.com/* and http://example.com/*
That Javascript Maps is enabled and you are using the correct credentials
That the website has been added to your DNS to enable your Google Console above.
Smile after it works!
Enable billing for Google project fixed the problem.
you show a screenshot of your api credentials page, but you have to click on "Browser key 1" and go from there to add referrers.
For deeper nested pages
If you have a project in a folder for example or nested pages
http://yourdomain.com/your-folder/your-page you can enter this in
http://yourdomain.com/*/*
The important part being /*/*/* depending how far you need to go
It seems that the * will not match / or get into deeper paths..
This will give your full domain access, well unless you have deeper nesting than that..
I struggled to make this work as well, but here are some pointers:
The URLs set as referrers include http, e.g. http://example.com/*
Google Maps JavaScript API was enabled
Billing was set-up on this account
Once all of this above was resolved, the maps displayed as expected.
http://www.example.com/* has worked for me after days and days of trying.
I got mine working finally by using this tip from Google:
(https://support.google.com/webmasters/answer/35179)
Here are our definitions of domain and site. These definitions are specific to Search Console verification:
http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site
I was attempting to use the Places API (Autocomplete) and had to also enable the Maps Javascript API from within Google Cloud Console before the Places API would work.
Removing the restrictions (to None) worked for me.
In my experience
http://www.example.com
worked fine
But, https required /* at the end
Chrome's Javascript console suggested I declare the entire page address in my HTTP referrer list, in this instance http://mywebsite.com/map.htm Even though the exact address is http://www.mywebsite.com/map.htm - I already had wildcard styles listed as suggested by others but this was the only way it would work for me.
This worked for me. There are 2 major categories of restrictions under api key settings:
Application restrictions
API restrictions
Application restrictions:
At the bottom in the Referrer section add your website url
" http://www.grupocamaleon.com/boceto/aerial-simple.html " .There are example rules on the right hand side of the section based on various requirements.
API restrictions:
Under API restrictions you have to explicitly select 'Maps Javascript API' from the dropdown list since our unique key will only be used for calling the Google maps API(probably) and save it as you can see in the below snap. I hope this works for you.....worked for me
Check your Script:
Also the issue may arise due to improper key feeding inside the script tag. It should be something like:
<script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
type="text/javascript"></script>
If you are working on localhost then do not include http or https in the url.
Use "localhost" without protocols. I struggled for days and found it working.
Something no one else seems to have mentioned in here that may be important is also this:
Http referrers are case sensitive.
So say you have someone access https://www.example.com/webpage, and someone wrote a link to that page as https://www.example.com/Webpage, you need BOTH entries, otherwise one of them is not going to work (unless you URL-rewrite to remove caps, or replace /Webpage with /*, but in our case, we want to limit down to folders under a certain domain, so this is a pain in the butt).
I feel like this is a bit stupid. Yes, URLs can be case sensitive, but not to the point where you would restrict a folder if its in caps, but not if it's lowercase, right?

Categories