I created a ReactJS movie website with TMDb movie API and my website fetches data from TMDb server which requires an API key. I have created an .env file and put my API key there and then I added that .env file to my .gitignore file, but now I want to publish my website on github pages without publicly exposing my API key, please help me by suggesting solution to this particular problem.
I have found many questions regarding how to hide my API key, but here, what I am asking is that, how to publish my page with my API key not being publicly accessible.
Depending on your usecase, you could use GitHub actions and GitHub secrets to achieve this.
The action could fetch data from the API, making it available during the build. This would almost be like cache warming, fetching upstream data and storing a static version closer to the client. Depending on your usecase, I think something like that would work.
Github Pages are supposed to be public for community/free tier.
Remove the API key from the code, where ever it is. Store API key as a variable in Github Secrets.
https://docs.github.com/en/actions/security-guides/encrypted-secrets
And then, reference it during pipeline build with ${{ secrets.API_KEY }}
Update your .env file with this key.
Add .env to .gitignore
Related
I have a website that needs a JSON file to display a sort of timetable that's hosted on GitHub pages. People who do not know what javascript or GitHub are need to be able to change that JSON file each week.
To solve this I've created a website that reads data from a google sheet they can edit, and turns it into a js object at the click of a button. I now just need to get this object from the website into the JSON file on the first GitHub repo, but I have no clue how to do this. I know you can use the GitHub API somehow, but how??
P.s. I know making the token built into the website is a security risk which is why I plan to only put tokens in the google sheet, which requires the user to authenticate a google account before being accessed.
I'm working on a school project using vanilla HTML, CSS, and JS. When compete, we're expected to have the repo working via GitHub Pages. It's above and beyond the scope of the assignment, but I wanted to connect to a Firebase Firestore database.
The question is, how do I hide the API key/information, using only vanilla HTML, CSS, and JS (no frameworks), and have a working GitHub Pages demo for the instructor to mark?
I've looked at a number of websites and YouTube videos, but every tutorial I've come across is either using a framework or some stack of packages that would go against the 'rules' of the assignment. I can use a .env file, but to my understanding, because the repo is public the key would be public.
Any advice would be greatly appreciated.
The answer is .env files (sort of).
If you're building a frontend project and you're connecting the front end directly to your database, your credentials will be visible.
The correct way to handle keys is to put them in your backend API. Of course, when I asked this question, I wasn't "there yet".
Your backend API can have a public endpoint that listens to incoming requests. You don't need to include your database credentials in the request coming from your frontend app. It hits your backend api at its public endoint where your backend code then handles the incoming request. On your backend you have the connection to your database with the necessary credentials. This is how you are supposed to build it.
For beginners, you might want to try Google Firebase. With Firebase you can create Firebase Functions. With these, you can create a simplified API endpoint to target with your front-end requests. It triggers the Firebase Function to run, and inside this function, you can store your private keys/credentials. Because your Firebase Functions run on your own secure backend, the client never sees the keys.
If you're learning or familiar with Vue3, here's a good article to check out: https://www.bezkoder.com/vue-3-firebase/#more-9260
I have created an opensource project that I have been working on slowly for a couple of weeks. I started looking into APIs that could be used and was interested in using WikiArt Api but was not sure how to go about using the API keys which are supposed to remain secret.
My initial thought was to create a config file and have the keys in there but then they would still be publicly available.
These two questions:
how to opensource a project that uses API keys
How to protect Google API Keys in an open source project github
suggested creating Secret ENV Variables and storing the keys in an encrypted format.
My question is how do I then access or include that hidden key within my HTML and also in my JavaScript code. It needs to be included here:
<link rel="prefetch" href="https://www.wikiart.org/en/Api/2/login?accessCode=[]&secretCode=[]"/>
and possibly a few other places in my HTML or JavaScript.
I'm not 100% sure a prefetch link was the right place to include this, but since the API will be grabbing image data, that was my first thought of where to initialize it. Is this the wrong approach?
As a secondary question, the documentation for the wikiart API isn't very good and it doesn't give any example code.
Can anyone explain a little bit better by what it means in the following
Create session when your application starts:
https://www.wikiart.org/en/Api/2/login?accessCode=[accessCode]&secretCode=[secretcode]
Add session key to your request url, e.g. &authSessionKey=sessionKey
How does it mean to create a session? I'm only familiar with php sessions, not API sessions. Is this done in the HTML or JavaScript?
This is the first time I've ever tried to use any APIs, after watching a few of Traversy Medias Tutorial so if anyone could give some code examples it would be greatly appreciated, his tutorial on fetch() API only grabs a text file, not an external url.
If you're using GitHub Pages, then that provides hosting for static sites only. In other words, a GitHub Pages site hosts only HTML and JavaScript and doesn't provide any backend (server-side) support.
As for how to securely use secrets in a static site, you cannot. Since all of the content in a static site is sent to the browser with no server-side components, there is no place you can put a secret that isn't sent to the client. In order to securely use secrets, you need some sort of backend server to hold them so that clients cannot see them.
If you need to hold secret API keys or other secrets, you need to create a non-static site and therefore to host it somewhere other than GitHub Pages.
I am currently hosting a website on GitHub. I want to be able to use the Google Sheets API to read data from a google spreadsheet in node js. Is it a security risk to push code with the API key? Is there a way to hide it on GitHub but still be able to use it?
Use this module https://www.npmjs.com/package/dotenv
Set you API key in a .env file something like this
API=sds1sdf13s21f23sd1fs1d3f21
and access it via process.env.API
and add the .env file to the .gitignore
We have a team Dropbox account here at my work and we all have our own company Dropbox accounts with username/emails like *.domain.com. I've been assigned the task to create a nice web interface to a certain selection of assets that are stored in one of our designer's Dropbox folder.
The task is to build a Node JS app and use the Dropbox API to read these files to build a nice interface to the files in that designer's Dropbox folder and do some other cool stuff. It's not sufficient to use the public viewing or sharing of that particular folder which Dropbox allows. We need something custom and it needs to really use the API for full control.
The thing that is confusing for me why I just can't seem to get started, is setting up the API access from Node JS to give me access to that designer's folder. I don't mean what code I need, but just the step by step of what is involved. I just can't seem to wrap my head around having app that will access that one particular company user's Dropbox folder.
I was starting to use node-dbox SDK to access Dropbox API from NodeJS and was messing around with their example to auth in the README, but the flow doesn't seem right to me? The API seems based around allowing access to the app, having to go to an external app etc. But that doesn't seem right in this case? I know which specific user's Dropbox I want access too, and I just want to app to access it... It's all trusted as it's within the company.
What are the steps involved in doing this? I'm really stumped!
You'll need to have the target user authorize your app once via OAuth. At the end of that OAuth process, you'll receive an access token that you can use to access that user's Dropbox. You only need to do this once, and then you can just hardcode that access token in your app.