I want to upload a video directly to Vimeo via API without having to upload it to my backend server. In Amazon S3, I would generated a signature on the backend and use it on the frontend form. However, in Vimeo, it looks like I need to provide the API token in the header to upload a video.
In this case, how do I upload a video directly to Vimeo on the client side without compromising security? I assume it's not safe to reveal the API token on the client side and there's no setting in Vimeo that lets me restrict the origin URL for file uploading.
Vimeo has a tutorial for uploading videos from your own frontend with HTTP requests.
Related
I have built my frontend on React JS and Backend on Fast API (Python). I do a google oAuth login after which I lazy load the pages on the browser. What I am concerned about is that once someone succeeds google oAuth then they can perform other operations and inspect the requests to see how the backend API is working. (I am parsing an APIKey into the Authorization header of the request body).
My concern is that if someone logs in through google oAuth and inspects the networking tab:
They can view all the content and then be able to make API calls on their own and do any malicious operations. Is there a way to encrypt the Authorization header so that the user could not get access to my backend API?
I would like users to be able to upload images to a section of my site. I would like to store these images with imgur.
Basically, I would like it to work like this:
User enters website
Clicks "Upload Image"
a modal pops up with a submit button and a "select image" button
the user selects the image and submits it
the react app first converts the image to base64
it then sends a request directly to imgur to upload the image
it then stores the response image id and then sends a request to the backend server that includes the imgur id of the image
To display the image, the react app just takes the image is and constructs a imgur url
But that would require me to store the authorization header and the API key directly in the application where everybody has access to it. So is it possible to do this securely or do I need to first send the image to the server and handle the upload there?
With AWS I am billed by milisecond so that would mean I'd have to pay to wait for an imgur request.
In order to allow the client to upload to Imgur on your behalf you would need to expose your Client-ID (but not your client secret). If you expose the Client-ID, anyone with that info would be able to upload anonymously on behalf of your app (as well as execute all the other anonymous methods listed here). And unfortunately there's no way to keep the Client-ID on the client side securely and at the same time have it be accessible for a client to make a request.
So yes, unfortunately you'll need to upload the image to your API to avoid exposing anything.
I'm trying to do this.
I need to push data from NodeJS (backend) to Angular (frontend) without any explicit request from Angular to NodeJS.
I was thinking of making an API request to Angular from NodeJS and Angular would listen to the API request via a Service and fetch data accordingly.
I'm not sure whether this is the right approach or is it possible in the first place, could someone guide me in the right direction?
Edit:
I'm trying to implement this for multiple Social Media Integrations in a One Page MEAN App. On button clicks, users get redirected to respective Social media authentication pages, after successful authorization, I'm able to fetch the accessTokens in the backend. I'm confused about how to send the data to frontend without passing the accessTokens in URL parameters.
Is there any other approach to implement it in a MEAN app?
I think you can use socket module for pushing data from Nodejs to angular.
The socket module provides emit and on methods with the help of this you can broadcast data or send in the request also generate your own event please check this for more information
you should use tokens as like JWT (passport JWT strategy) and pass it to the client and store it in a cookie / local storage. you can use these tokens to protect api's and/or socket.io connects. after that you do whatever communication you want. the client needs to open the connection to the server (via pull or websockets) or you need to use some form of push service. The reason is, that for many clients they are behind address translation and cannot be reached directly.
My scenario with expected outcome:
User logs into a web portal.
The web portal presents content which is allowed to be accessed by the user.
The user selects a piece of content, which directs their browser to the m3u8 file for that content.
Each piece of content has an encryption key. The m3u8 file includes a URL for the key for that video, which is a REST endpoint with a query string (e.g. https://www.mymediaserver.com/api/key/100
The REST API will deliver the key in raw form to the requester if and only if a bearer token is provided along with the request. The key used to process the token is the same as the key used for the frontend API (e.g. that lists video content available). In other words, the same Authorization header that the user agent provides with API requests to populate the frontend can also be used for key retrieval. (This is not ideal, but it's a start and this project is more proof-of-concept at this stage.)
The video player would include the Authorization header with the request, and thus receive the key and be able to play the content.
Here are my questions:
The intended use case is simply to play the video within the browser. I could use a <video> tag, or even just redirect the browser to the file to begin playing the content full-screen on its own, and the user would use the Back button after playback.
I haven't yet started building all of this out because I'm not sure how the video playback engine actually requests the key. Is there a way to modify the HTTP request used to get the key, such that I can add the Authorization header?
Or, perhaps, does the video player automatically add the appropriate existing Authorization header?
Theories I've had:
I could dynamically generate the m3u8 file, adding the bearer token as a query string parameter. But, I'd then have to figure out how to get my REST endpoint to read the bearer token from the query string instead of from the headers. This would be an extra step.
I could generate my own one-time-use key retrieval strings and combine it with the above idea, but I then have to add the extra infrastructure to store the keys, expire them upon use, etc.
The summary question:
How do I implement bearer tokens when setting up a REST-style endpoint which will provide decryption keys for HLS video packages?
Notes:
The backend API is a C# ASP.NET Web API project.
The frontend for video selection is Angular.
I only plan to support iOS for now for this project.
I am aware that particularly crafty users may be able to figure out how to retrieve the keys. I'm trying to prevent casual downloading of video content from the server. (I fully realize you can't prevent copying, but you can prevent casual, easy copying.)
This is currently just a proof-of-concept idea for an internal video hosting platform that would make it at least challenging to retrieve video content for playback outside of the web site and without authentication.
I'm in the process of building a REST API for a mobile application I'm working on. Like Instagram, I'm considering locking down some of the endpoints such that they would only be accessible from my mobile app (like their photo upload endpoints).
Has anyone have any insight as to how they locked down certain endpoints to only their app? I imagine a possible solution was the use of a shared secret to sign these specific requests and have it verified server-side before processing the upload.
It looks like they
Check the request header for User-Agent == "Instagram"
Check that there is a valid authentication cookie set
Sign the body of their requests with some sort of hash.
I'm not sure how the hash is created.
Check this out for some of the documentation, but it looks like the authentication section has been blanked out.
https://github.com/mislav/instagram/wiki