I have a service that shares html to multiple client web sites. I need to know The URL of where the request is coming from.
The client will add a custom script to their website and the script will load Firebase SDK and call one of my callable firebase functions.
exports.testFunction = functions.https.onCall(async (data, context) => {
//How do you access the requesting URL?
console.log(context.rawRequest.originalUrl) "/"
console.log(context.rawRequest.url) "/"
})
Thank you,
HTTP requests to callable functions don't really come "from" a URL. They come from anywhere on the internet. It could be a web site, Android or iOS app, or someone who simply knows the protocol to call the function.
If you're building a web app and you want to pass along the URL of the page making the request, you'll have to add that data into the object that the client passes to the function, which shows up in data.
Related
How can i write a function to call an API, from web server to API within the server itself.
I do not want the browser to know that he is calling an API or and information about the API, even the link.
The API call(POST method) should be executed on the server.
Using Nextjs with axios.
I also want the function to be a component.
If you want to fetch data before loading the page (when the actural page load request happens), use server side rendering.
In Next.js you can use getServerSideProps for doing this. By doing this, you get to keep the api call inside the component, and the sever will fetch the data before rendering your component. Attaching a sample of code that you can refer for this.
export async function getServerSideProps(context) {
return {
props: {}, // will be passed to the page component as props
}
}
For more info, please visit the nextjs official documents. Attaching a link for the above example.
https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props
My goal is to get the image from Twilio api to store it somewhere else because Twilio deletes media after 4h.
(See here)
I'm using node and I have read https://www.twilio.com/docs/sms/api/media-resource#fetch-a-media-resource
...and it says that to do a request to this URL without the "json" extension should return the media with its original MIME type
https://api.twilio.com/2010-041/Accounts/{AccountSid}/Messages/{MessageSid}/Media/{Sid}.json
However, i need auth, so I need to use
const client = require('twilio')(accountSid, authToken);
How can I fetch the image? Any sample code to achieve it? In the docs seem to do it without auth.
UPDATE ----------------------------------------
After accessing the MediaUrl0 on the browser, twilio redirects me to the following URL:
https://s3-external-1.amazonaws.com/media.twiliocdn.com/{AccountSid}/{?}
I was thinking of building my own URL but i dont know how to get the {?}
You do not need authentication to retrieve media for an incoming sms . They are all hosted (as of now on Aws S3) and accessible publicly through a (hard to guess) url.
you can access them using any http client
Okay, so atm i have a frontend application built with Nuxt JS using Axios to do requests to my REST API(separate).
If a user does a search on the website the API URL is visible in XMLHttprequests so everyone could use the API if they want to.
What is the best way of making it so that only users that search through my website gets access to the API and people that just directly to the URL gets denied. I suppose using some sort of token system, but what is the best way to do it? JWT? (Users never log in so there is no "authentication")
Thanks!
IMO, you CANNOT block other illegal clients accessing your
backend as you describe that the official client and other illegal have the same knowledge about your backend.
But you can make it harder for illegal clients to accessing your backend through some approach such as POST all requests, special keys in header, 30-minutes-changed token in header and server-side API throttling by client IP.
If the security of the search API is really important, authenticate it by login; if not, just let it go since it is not in your critical path. Let's focus on other important things.
I'm in the same "boat" and my current setup is actually in VueJs but before even come to StackOverflow I developed a way to actually, the frontend calls the server and then the server calls the API, so in the browser, you will only see calls to the server layer that, the only constraint is that the call must come from the same hostname.
backend is handled with expressJs and frontend with VueJs
// protect /api calls to only be originated from 'process.env.API_ALLOW_HOST'
app.use(api.allowOnlySameDomainRequests());
...
const allowHostname = process.env.API_ALLOW_HOST ||'localhost';
exports.api = {
...
allowOnlySameDomainRequests: (req, res, next) => {
if(req.url.startsWith('/api') && req.hostname === allowHostname) {
// an /api call, only if request is the same
return next();
} else if (!req.url.startsWith('/api')) {
// not an /api call
return next();
}
return res.redirect('/error?code=401');
},
...
};
In our case, we use Oauth2 (Google sign through passportJs) to log in the user, I always have a user id that was given by the OAuth2 successful redirect and that user id is passed to the API in a header, together with the apikey... in the server I check for that userid permissions and I allow or not the action to be executed.
But even I was trying to find something better. I've seen several javascript frontend apps using calls to their backend but they use Bearer tokens.
As a curious user, you would see the paths to all the API and how they are composed, but in my case, you only see calls to the expressJs backend, and only there I forward to the real API... I don't know if that's just "more work", but seemed a bit more "secure" to approach the problem this way.
I have a simple Web API 2 controller that handles file uploads. It looks like this:
[MyCustomAuthenticationFilter]
[Authorize]
public class FileController : ApiController
{
private IFileRepository _FileRepository;
public FileController(IFileRepository fileRepository)
{
_FileRepository = fileRepository;
}
public async Task<FileInfo> Post()
{
var stream = await Request.Content.ReadAsStreamAsync();
var info = await _FileRepository.CreateFileAsync(stream);
return new FileInfo(info);
}
}
It takes a streamed upload from the client, hands it off to a repository object (which talks to an Azure Storage Blob container), and then returns some data about the uploaded file. Simple enough, and it works great.
Except, the authentication filter is not applied until the client has finished uploading the file. Authentication is a simple challenge/response system using a token, so this means a client could easily upload several hundred megabytes of data (potentially over a slow cellular data connection) before finding out that their token has expired and they need to refresh it and try again. I'd like to be able to examine the request header and validate (or reject) it as early as possible, but that doesn't seem to be doable with the standard filters. I also tried creating a simple IHttpModule and hooking into the BeginRequest event, but that apparently does not fire until after the upload completes, either.
How can I hook into the pipeline such that I can validate the Authorization headers for a request before the client upload completes?
Edit to add:
Obviously Authenticating early doesn't do me any good if I can't also Authorize, based on the route in Web API. My service has a few anonymous methods, so I can't just blanket reject un-authenticated users. Given the architecture of IIS and ASP.net, maybe that means this just isn't possible.
You'll most likely need to make this request into a 2 stage request. One authentication request prior to the file upload request. That's a lot of baggage and the end point can't process a request until it finishes receiving it. Try a separate authorization request before uploading the file. If your request passes then you can send the file upload. Is this an okay solution?
I'm launching a Google Hangout from my webapp. I want to pass some data from my webapp to the Hangout window, and then back to my webapp. I am currently able to pass data back to my server with an AJAX post from the Hangout window, however, I then have to send this to the launching browser from my server.
Is there a direct line of communication from my launching app to the Google Hangouts app? I'm pretty new to webdev, so this might be an obvious question.
Well the thing you are trying to achieve here to get and post data from your hangout app and web application server, and you are already posting the data from hangout app to your webserver.You can write a route in your application the one running on your web server to return the data you are trying to fetch and again in your hangout app can make a ajax get action to get the required data in form of JSON or any required format, and grap the result in success callback of ajax.
example call:-
$.ajax({
type : "GET",
url:'/your_route_on_web_application/to_return_the_requested_data',
data : { any_data_you_want_to_pass: random_data},
dataType : 'json',
success : function(data) {
// do anything you want to with the received data
}
});