در آن زمان، توسعه دهندگان مجبور بودند انواع کدهای سفارشی را بنویسند تا برنامه های مختلف با یکدیگر ارتباط برقرار کنند. اما، این روزها، رابط های برنامه نویسی کاربردی (API ها) این کار را بسیار ساده تر می کنند. API ها همه چیزهایی را که برای تعامل با برنامه های مختلف به صورت روان و کارآمد نیاز دارید در اختیار شما قرار می دهند، معمولاً زمانی که یک برنامه از برنامه دیگر داده درخواست می کند.
در حالی که API ها مزایای متعددی را ارائه می دهند، اما خطر قابل توجهی برای امنیت برنامه شما نیز ایجاد می کنند. به همین دلیل است که یادگیری در مورد آسیب پذیری های آنها و نحوه محافظت از آنها ضروری است. در این مقاله، به دنیای شگفت انگیز کلیدهای API می پردازیم، در مورد اینکه چرا باید از کلیدهای API خود محافظت کنید، و بهترین راه های انجام این کار را هنگام استفاده از React بررسی خواهیم کرد.
کلیدهای API چیست؟
اگر اخیراً برای یک API ثبت نام کرده اید، یک کلید API دریافت خواهید کرد. کلیدهای API را به‌عنوان گذرواژه‌های مخفی در نظر بگیرید که به ارائه‌دهنده ثابت می‌کند که این شما یا برنامه‌تان هستید که در تلاش برای دسترسی به API هستید. در حالی که برخی از API ها رایگان هستند، برخی دیگر هزینه ای برای دسترسی دریافت می کنند، و از آنجایی که اکثر کلیدهای API تاریخ انقضا صفر دارند، نگران نبودن در مورد ایمنی کلیدهای خود ترسناک است.
چرا کلیدهای API باید محافظت شوند؟
محافظت از کلیدهای API برای تضمین امنیت و یکپارچگی برنامه شما بسیار مهم است. در اینجا چند دلیل وجود دارد که چرا باید از کلیدهای API خود محافظت کنید:
- برای جلوگیری از درخواست های غیرمجاز API.
اگر شخصی کلید API شما را بدست آورد، می تواند از آن برای درخواست های غیرمجاز استفاده کند، که می تواند عواقب جدی داشته باشد، به خصوص اگر API شما حاوی داده های حساس باشد. - ناامنی مالی
برخی از API ها دارای هزینه مالی هستند. و اگر شخصی به کلید API شما دسترسی پیدا کند و از درخواست‌های بودجه شما فراتر رود، ممکن است با صورت‌حساب هنگفتی مواجه شوید که می‌تواند یک تن هزینه برای شما داشته باشد و ثبات مالی شما را به خطر بیندازد. - سرقت، دستکاری یا حذف داده ها.
اگر یک شخص مخرب به کلید API شما دسترسی پیدا کند، ممکن است داده های شما را بدزدد، دستکاری کند، حذف کند یا برای اهداف خود استفاده کند.
بهترین روش برای پنهان کردن کلیدهای API در یک برنامه React
اکنون که متوجه شدید چرا کلیدهای API باید محافظت شوند، بیایید نگاهی به روش‌های پنهان کردن کلیدهای API و نحوه ادغام آنها در برنامه React بیاندازیم.
متغیرهای محیطی
متغیرهای محیطی (env) برای ذخیره اطلاعات در مورد محیطی که یک برنامه در آن اجرا می شود استفاده می شود. این به شما امکان می‌دهد تا داده‌های حساس را از کد برنامه‌تان، مانند کلیدهای API، نشانه‌ها، گذرواژه‌ها و هر داده دیگری که می‌خواهید از دید عموم پنهان نگه دارید، پنهان کنید.
یکی از محبوب ترین ها env بسته هایی که می توانید در برنامه React خود برای مخفی کردن داده های حساس استفاده کنید dotenv بسته بندی برای شروع:
- به دایرکتوری برنامه react خود بروید و دستور زیر را اجرا کنید.
npm install dotenv --save - خارج از
srcپوشه در پوشه ریشه پروژه خود، یک فایل جدید به نام ایجاد کنید.env. - در شما
.envفایل، کلید API و مقدار مربوط به آن را در قالب زیر اضافه کنید:// for CRA applications REACT_APP_API_KEY = A1234567890B0987654321C ------ correct // for Vite applications VITE_SOME_KEY = 12345GATGAT34562CDRSCEEG3T ------ correct - ذخیره کنید
.envرا فایل کنید و از اشتراک گذاری آن به صورت عمومی یا سپردن آن به کنترل نسخه خودداری کنید. - اکنون می توانید از
envبرای دسترسی به متغیرهای محیطی در برنامه React خود شی کنید.// for CRA applications 'X-RapidAPI-Key':process.env.REACT_APP_API_KEY // for Vite applications 'X-RapidAPI-Key':import.meta.env.VITE_SOME_KEY - برنامه خود را مجدداً راه اندازی کنید تا تغییرات اعمال شوند.
با این حال، اجرای پروژه خود بر روی رایانه محلی خود تنها آغاز کار است. در برخی مواقع، ممکن است لازم باشد کد خود را در GitHub آپلود کنید، که به طور بالقوه می تواند شما را در معرض دید قرار دهد .env فایل. پس آن وقت چه باید کرد؟ می توانید استفاده از .gitignore فایل برای مخفی کردن آن
این .gitignore فایل
این .gitignore file یک فایل متنی است که به Git دستور می‌دهد تا فایل‌هایی را که هنوز به مخزن اضافه نشده‌اند، هنگام فشار دادن به مخزن نادیده بگیرد. برای انجام این کار، را اضافه کنید .env به .gitignore قبل از اینکه به مرحله بندی commit های خود بروید و کد خود را به GitHub فشار دهید، فایل را ثبت کنید.
// .gitignore
# dependencies
/node_modules
/.pnp
.pnp.js
# api keys
.env
به خاطر داشته باشید که در هر زمان تصمیم به میزبانی پروژه های خود با استفاده از هر پلتفرم میزبانی، مانند Vercel یا Netlify، باید متغیرهای محیطی خود را در تنظیمات پروژه خود ارائه دهید و بلافاصله پس از آن، برنامه خود را مجدداً برای مشاهده تغییرات اجرا کنید.
سرور پروکسی پشتیبان
در حالی که متغیرهای محیطی می توانند راهی عالی برای محافظت از کلیدهای API شما باشند، به یاد داشته باشید که هنوز هم می توان آنها را در معرض خطر قرار داد. اگر مهاجم کدهای همراه شما را در مرورگر بازرسی کند، کلیدهای شما همچنان می توانند دزدیده شوند. بنابراین، پس چه کاری می توانید انجام دهید؟ از یک سرور پروکسی بک‌اند استفاده کنید.
یک سرور پروکسی بک‌اند به عنوان یک واسطه بین برنامه مشتری و برنامه سرور شما عمل می‌کند. به جای دسترسی مستقیم به API از قسمت جلویی، قسمت جلویی درخواستی را به سرور پروکسی بک‌اند ارسال می‌کند. سپس سرور پروکسی کلید API را بازیابی می کند و درخواست را به API ارسال می کند. پس از دریافت پاسخ، کلید API را قبل از بازگرداندن پاسخ به قسمت جلویی حذف می کند. به این ترتیب، کلید API شما هرگز در کد جلویی شما ظاهر نمی شود و هیچ کس نمی تواند با بررسی کد شما، کلید API شما را بدزدد. عالی! حالا بیایید نگاهی بیندازیم که چگونه می توانیم در مورد این موضوع پیش برویم:
- بسته های لازم را نصب کنید
برای شروع باید چند بسته مانند بیان، CORS، Axios، و Nodemon. برای انجام این کار، به دایرکتوری حاوی پروژه React خود بروید و دستور زیر را اجرا کنید:npm install express cors axios nodemon - یک فایل سرور back-end ایجاد کنید.
در دایرکتوری ریشه پروژه شما، خارج از شماsrcپوشه، یک فایل جاوا اسکریپت ایجاد کنید که شامل تمام درخواست های شما به API باشد. - وابستگی ها را راه اندازی کنید و یک نقطه پایانی تنظیم کنید.
در فایل سرور باطن خود، وابستگی های نصب شده را مقداردهی اولیه کنید و یک نقطه پایانی را تنظیم کنید که a را ایجاد کندGETبه API شخص ثالث درخواست کنید و داده های پاسخ را در پورت شنیده شده برگردانید. در اینجا یک قطعه کد نمونه است:// defining the server port const port = 5000 // initializing installed dependencies const express = require('express') require('dotenv').config() const axios = require('axios') const app = express() const cors = require('cors') app.use(cors()) // listening for port 5000 app.listen(5000, ()=> console.log(`Server is running on ${port}` )) // API request app.get('/', (req,res)=>{ const options = { method: 'GET', url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/adminDivisions', headers: { 'X-RapidAPI-Key':process.env.REACT_APP_API_KEY, 'X-RapidAPI-Host': 'wft-geo-db.p.rapidapi.com' } }; axios.request(options).then(function (response) { res.json(response.data); }).catch(function (error) { console.error(error); }); } - یک تگ اسکریپت در خود اضافه کنید
package.jsonفایلی که سرور پروکسی بک‌اند را اجرا می‌کند. - سرور بک‌اند را با اجرای دستور زیر شروع کنید و سپس در این مورد، به آن بروید
localhost:5000.npm run start:backend - یک درخواست به سرور باطن (
http://localhost:5000/) از قسمت جلو به جای مستقیم به نقطه پایانی API. در اینجا یک تصویر است:import axios from "axios"; import {useState, useEffect} from "react" function App() { const [data, setData] = useState(null) useEffect(()=>{ const options = { method: 'GET', url: "http://localhost:5000", } axios.request(options) .then(function (response) { setData(response.data.data) }) .catch(function (error) { console.error(error); }) }, []) console.log(data) return ( <main className="App"> <h1>How to Create a Backend Proxy Server for Your API Keys</h1> {data && data.map((result)=>( <section key ={result.id}> <h4>Name:{result.name}</h4> <p>Population:{result.population}</p> <p>Region:{result.region}</p> <p>Latitude:{result.latitude}</p> <p>Longitude:{result.longitude}</p> </section> ))} </main> ) } export default App;
خوب، شما آن را دارید! با دنبال کردن این مراحل، می‌توانید کلیدهای API خود را با استفاده از یک سرور پروکسی بک‌اند در برنامه React خود مخفی کنید.
خدمات مدیریت کلید
با وجود اینکه متغیرهای محیطی و سرور پروکسی بک‌اند به شما امکان می‌دهند کلیدهای API خود را بصورت آنلاین مخفی کنید، هنوز کاملاً ایمن نیستید. ممکن است دوستان یا دشمنانی در اطراف خود داشته باشید که می توانند به رایانه شما دسترسی داشته باشند و کلید API شما را بدزدند. به همین دلیل رمزگذاری داده ها ضروری است.
با ارائه‌دهنده خدمات مدیریت کلید، می‌توانید کلیدهای API خود را رمزگذاری، استفاده و مدیریت کنید. خدمات مدیریت کلیدی زیادی وجود دارد که می‌توانید آنها را در برنامه React خود ادغام کنید، اما برای ساده نگه داشتن همه چیز، فقط به چند مورد اشاره می‌کنم:
- مدیر اسرار AWS
این مدیر اسرار AWS یک سرویس مدیریت مخفی است که توسط وب سرویس آمازون ارائه می شود. این به شما امکان می دهد اسرار اطلاعاتی مانند اعتبار پایگاه داده، کلیدهای API و سایر اطلاعات حساس را به صورت برنامه نویسی از طریق تماس های API به سرویس مدیر مخفی AWS ذخیره و بازیابی کنید. منابع زیادی وجود دارد که می تواند شما را در کمترین زمان شروع کند. - Google Cloud Secret Manager
این Google Cloud Secret Manager یک سرویس مدیریت کلید است که توسط Google Cloud Platform ارائه و به طور کامل مدیریت می شود. قادر به ذخیره، مدیریت و دسترسی به داده های حساس مانند کلیدهای API، گذرواژه ها و گواهی ها است. بهترین بخش این است که به طور یکپارچه با ویژگی‌های Google back-end-as-a-service ادغام می‌شود و آن را به انتخابی عالی برای هر توسعه‌دهنده‌ای که به دنبال راه‌حلی آسان است تبدیل می‌کند. - خرک کلید لاجوردی
این خرک کلید لاجوردی یک سرویس مبتنی بر ابر ارائه شده توسط Microsoft Azure است که به شما امکان می‌دهد انواع اسرار، از جمله رمزهای عبور، کلیدهای API، رشته‌های اتصال پایگاه داده و سایر داده‌های حساس را که نمی‌خواهید مستقیماً در کد برنامه خود آشکار کنید، به‌طور یکپارچه ذخیره و مدیریت کنید. .
خدمات مدیریت کلید بیشتری در دسترس است، و شما می توانید با هر یک از موارد ذکر شده در بالا استفاده کنید. اما اگر می خواهید با سرویسی بروید که ذکر نشده است، کاملاً خوب است.
نکاتی برای تضمین امنیت کلیدهای API شما
شما همه چیز لازم را برای ایمن نگه داشتن کلیدهای API و داده های خود دارید. بنابراین، اگر پروژه‌های موجودی دارید که در آنها به طور تصادفی کلیدهای API خود را در معرض دید قرار داده‌اید، نگران نباشید. من نکات مفیدی را برای کمک به شناسایی و رفع نقص های موجود در پایگاه کد برنامه React خود گردآوری کرده ام:
- پایگاه کد موجود خود را بررسی کنید و هر کلید API سخت کدگذاری شده ای را که باید پنهان شود شناسایی کنید.
- استفاده از متغیرهای محیطی با
.gitignoreبرای ذخیره ایمن کلیدهای API خود. این به جلوگیری از قرار گرفتن تصادفی کلیدهای شما کمک می کند و مدیریت آسان تر در محیط های مختلف را امکان پذیر می کند. - برای افزودن یک لایه امنیتی اضافی، استفاده از یک سرور پروکسی بک‌اند را برای محافظت از کلیدهای API خود در نظر بگیرید، و برای نیازهای امنیتی پیشرفته، یک ابزار مدیریت کلید این کار را انجام می‌دهد.
نتیجه
عالی! اکنون می توانید مانند یک حرفه ای از کلیدهای API خود در React محافظت کنید و مطمئن باشید که داده های برنامه شما ایمن و ایمن هستند. چه از متغیرهای محیطی، چه از یک سرور پروکسی بک‌اند یا یک ابزار مدیریت کلید استفاده کنید، آنها کلیدهای API شما را از چشمان کنجکاو در امان نگه می‌دارند.
مطالعه بیشتر در SmashingMag
(gg, yk, il)
