I created an API in Spring for my react app. When I was ready to publish site I noticed that the app can not call the api. I went to the api link and noticed it said this site is not secure. I did create a self assigned certificate so that https would work but its giving me this issue now. Until I click trust the react app will not fetch the data. Once I click trust once it works but other people using my site wont know that. How can I fix my API so that it is trusted?
The problem is that you're creating an SSL Certificate build by yourself. Browsers only accept trusted certificates signed by companies.
You will need to buy a certificate and use it on your app. Here's a source of signed certificates: https://www.getssl.com/
I did never used the free options, but some people say it works fine too: https://www.sslforfree.com/
For better understanding of that I strongly recommend you the following video: https://www.youtube.com/watch?v=uNdYea6OCuA
Hope it helps you bro.
Related
I'm asking for some help, maybe I'm missunderstanding some concepts and finally I dont know how to solve this requirement:
I have a create-react-app application deployed using Netlify.
Also my backend is deployed on AWS ECS.
I'm using AWS route 53 for routing frontend and backend to myapp.mydomain.com and api.mydomain.com respectively.
A client has a specific network config so only *.mydomain.com requests are allowed for his organization.
The problem resides on frontend because it uses many libraries, for example:
Checking network tab on browser I noticed thw following:
I'm using a giphy library, so it makes requests to api.giphy.com.
I'm using some google stuff like analytics and fonts, so I assume it will make requests to some google domain.
And so on...
As I understand this kind of fetches will be blocked by client network "firewall".
Adding more rules to said firewall is not an option (That was my first proposal to client but they only allows *.mydomain.com and no more)
So my plan B was implement a proxy ... but I dont have any idea of how to implement such solution.
It's possible to "catch" third party fetches, redirect them to my backend like api.mydomain.com/forward, so my backend would make real fetch and returns response given by said fetch to frontend?
The result desired should be, for example again, all fetches made to api.giphy.com should be redirected to api.mydomain.com/forward/giphy and same for all third-party fetches
I Googled a lot and now I'm very confused, any help is welcome!! Thanks devs!
I have a React app on 127.0.0.1:3000 / 192.168.0.104:3000 and a Laravel api on 127.0.0.1:8000.
My problem is, I can fetch the data on my computer (127.0.0.1), but it seems that the React app can't correctly get the data from the database when I access the React app from my phone on LAN (192.168.0.103).(I can see the React app)
Can someone help me to solve this problem or tell me what may cause this? Thank you.
I suspect you have a CORS policy error. I'm not familiar with Laravel cause you know, PHP, but a quick google search would probably tell you how to allow a foreign domain to have access to your api.
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
To verify you have a cors policy error, you'd have to open dev tools and take a look at the errors. However, I'm unsure if that's possible on a mobile browser. I never tried, so it could be possible. Again another google search would answer that for you.
I just solved this problem by myself. It is because that the client can not find the Laravel API on LAN. In Img A the port 8000 is not open on the machine, so the client can't access the API.
Img A
My solution is that host the API and APP on the different machine and make sure that the client can access both the APP and API.
Img B
I have a problem with the Firebase API Restriction settings.
I want to add HTTP restrictions to secure the data but when I add restrictions, it is not working. What am I doing wrong here?
■Website deployed with Github Pages (ex.https://username.github.io/project-name/) It is a React app deployed following this description: https://github.com/gitname/react-gh-pages
■I am using Firebase Authentication. https://firebase.google.com/docs/reference/rest/auth#section-create-email-password
■To secure the API key(although I know Firebase API is no problem, just in case), I wanted to set like below in Google Cloud⇒API & Services⇒Credentials
application restrictions: HTTP referrers
website restrictions: https://username.github.io/project-name/* (used /* since there are many paths in the website)
(When I leave no.2 empty and accept all websites, it works so probably this setting is wrong...)
I'm deploying a side-project at the moment that I've built on React+Nodejs.
I deployed the React part using Vercel, what a great service. I then deployed my Node backend to AWS ECS that is currently active and accessible.
The problem is, Vercel configures HTTPS by default so I need to enable HTTPS on my backend as well to allow for communication. Otherwise, I get a "Blocked mixed content" error on the frontend.
I've tried obtaining a certificate from ACM but Vercel has it so that I can't add a CAA record for Amazon (it removes the "." at the end). I currently have a support ticket with Vercel to try and resolve this.
If there's an alternate way to resolve this issue, or if I'm not even on the right track, let me know. Thanks.
Edit: This is the page I followed for ACM: https://docs.aws.amazon.com/acm/latest/userguide/setup-caa.html
The trailing dot is actually not required. As you can see here, Vercel is also using multiple CAA record without any issues. You can search for more examples online.
I've picked up Angular and am now developing two separate applications, the frontend, Angular app, and the backend, the Laravel app.
As of now my backend app is just an API endpoint that handles requests, database interaction, logic, validation, etc.
However, what stops someone from requesting /api/users/1 and getting that data?
Right now there is nothing in place that prevents this from occurring.
What's the best way to prevent this from occurring and verify the request is sent through the application and not through something like http://hurl.it from some random user?
You should first evaluate what routes need to be protected, and who should have access. Sometimes it might be fine to leave them open to the public.
Once you've figured that out you have a few options. I personally lean towards the oAuth 2.0 protocol. Some people find it to be over kill. Then there is also WSSE, I personally feel like today there is far better resources explaining the use of oAuth and would probably be easier to follow.
You can google around for oAuth server libraries for laravel. One such is: https://github.com/lucadegasperi/oauth2-server-laravel
You will also probably want to enable CORS if your angular app is on a different domain from your api. IE: api.example.com (holds api). And example.com is where your app lives.
For CORS laravel also has some packages, one such being: https://github.com/barryvdh/laravel-cors