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.
Related
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.
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.
Currently we are looking to develop oauth authentication for my API.
So basically our UI will be in reactjs which will show TV Grid schedule using nodejs API At backend which will return JSON. We will handle UI changes via ajax.
On ajax or on page load we will call API to display TV Grid.
So we want to secure API using oauth.
Lets say I have passed APP ID & client secret key and received the "auth_token" with callback URL and everything (like fb, google has it)
that will stored on localstorage or cookies.
If attackers get access to that token and he can call API get access to data.
How can I avoid data theft?
Is there something I am missing in oauth? please let me know.
I can't seem to find anyone with the same issue - although I might have googled using the wrong questions.
I'm building a react app with server-side rendering. There is also another server which handles the entire API.
Here's the scenario I need to get working:
Initial website request initiated from user.
UI server loads the user from another API server
UI server then pre-renders all react components including the fetched user and sends it to the user
React component in browser needs to be able to fetch updated user information (from the api server, not the UI server)
So the problem is that I need to share the same session ID between the browser and the UI server.
I imagine it would work like this.
UI server requests user from API server.
UI server remembers session id from initial call and sets the cookie
Browser uses the set cookie for all future api requests and page refreshes
Is this achievable?
I would recommend you to use JSON Web Tokens instead of cookies. You can share the token in all of your services. It is the best way to authenticate user to use different apis at the same time.
Here is detailed tutorial for Node/Express
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