Memulai Next.js + Strapi: Keamanan dahulu

Mengapa khawatir tentang Keamanan?

Sebelum mulai melihat tentang Jenis-Konten Strapi, sebelum melihat file Next.js dan struktur rute, ada baiknya membahas tentang Keamanan.

Kekhawatiran yang biasanya tidak ditindaklanjuti dengan perhatian pada tim tertentu, dan dapat menyebabkan biaya yang sangat tinggi, ketika sebuah proyek dimasukkan ke dalam produksi.

Artikel ini adalah artikel pengantar lain untuk tumpukan Next.js + Strapi, kami juga akan membahas TypeScript, Data Fetch, Layouts, CI / CD dan Deploy, tetapi pertama-tama kami akan membahas keamanan.

Di bawah ini kami akan membahas, kesalahan keamanan paling umum di aplikasi web dan cara mengurangi atau memperbaikinya di aplikasi Strapi + Next.js kami:

XSS / CRSF:
XSS atau Cross Site Scripting, adalah teknik jahat untuk memasukkan kode ke dalam aplikasi kami dan menghindari keamanan untuk membajak data atau memanipulasi sesi pengguna misalnya.

CRSF atau pemalsuan permintaan lintas situs, adalah ketika seseorang menggunakan teknik jahat untuk melewati permintaan baik melalui Postman atau browser untuk mencapai database kita, menghapus data pengguna misalnya, mencuri data sesi (seperti kartu kredit, alamat, dll.) Di antara hal-hal lain.

Klik Pembajakan:
Tahukah Anda saat Anda membuka halaman yang cenderung mengelabui pengguna agar mengetik data dan pada akhirnya mereka mengirim data tersebut ke orang yang ingin mereka gunakan dengan maksud jahat? Atau bahwa mereka mungkin memiliki malware atau exploit dan menginstalnya di komputer pengguna?

Kerentanan umum di Rest APIS:

  • DOS & DDOS (Denial of Service): Saat peretas ingin menghapus API, aplikasi, atau situs web, dia dapat mengaktifkan permintaan massal untuk API atau titik akhir tersebut.
    Pengungkapan Informasi Sensitif: Saat kami mengekspos data sensitif pengguna, terutama tanpa enkripsi di API kami. Id, email, alamat, informasi pembayaran, dll.

  • Serangan MIM (Man in the Middle): Ketika seorang peretas mencoba mencegat komunikasi klien dan server, dengan tujuan mencuri data.

  • Injeksi SQL: Injeksi kode yang mengubah perilaku yang diharapkan dari API dan Database. Melalui suntikan, peretas dapat mencuri informasi, merusak API, mengubah operasinya.

  • Referensi Objek Langsung Tidak Aman: Saat Anda mengekspos API dengan titik akhir seperti / user / id / 30 , dan pengguna mencoba mengakses ID yang tidak bersaing dengannya, dan berhasil, Anda mengekspos
    Referensi Langsung untuk objek yang tidak aman.

Kerentanan umum di GraphQL APIS:

  • / graphql? kueri = {__ skema {jenis {nama, bidang {nama}}}}:
    Jika API GraphQL Anda bersifat publik, hanya dengan kueri seperti ini, pengguna yang menggunakannya, dapat melihat seluruh skema API Anda

  • Kueri Berbahaya: Peretas dapat memasang kueri berbahaya, baik untuk mencuri data, merusak database Anda, atau menjatuhkan API / server Anda

  • Brute-Force: Untuk menghindari masalah dengan peretas yang mencoba memecahkan data di API GraphQL Anda, Anda dapat menggunakan plugin seperti GraphQL Rate Limit , yang akan membatasi berapa kali bidang rentan kueri Anda dapat dieksekusi dalam interval waktu.

Bagaimana cara menghindari semua ini?

Di Strapi:

  • Memahami file Konfigurasi Strapi & keamanannya: Strapi memiliki banyak dokumentasi yang menunjukkan kepada kita bagaimana menjamin keamanan CMS :
    Ini memiliki konfigurasi untuk XSS, P3P, Hsts, X-Frame-Options (Clickjacking), CORS (sangat berguna untuk menentukan domain mana yang dapat mengakses aplikasi Anda, header mana yang dapat diekspos),
    IP (Dapat mengkonfigurasi IPS mana yang melihat atau tidak aplikasi Anda)

  • Injeksi Kredensial: Gunakan file .env, untuk menghindari memasukkan kredensial di tengah kode Anda

  • Validasi: Anda dapat membuat middleware untuk memvalidasi bahwa data aplikasi Anda sudah ada dan tidak akan diduplikasi, atau Anda juga dapat menggunakan lib seperti Joi , untuk memvalidasi bidang API Anda, tetapi Strapi sudah memiliki beberapa validasi asli yang dapat Anda tentukan di Model API, hanya jika Anda menggunakan MongoDB

  • Peran & Izin: Idealnya, Anda harus membuat dokumentasi untuk API Anda tentang izin dan titik akhir mana yang akan Anda aktifkan sehingga Anda tidak membuat kesalahan dengan mengizinkan semuanya dan menawarkan risiko pada data API Anda

  • Kebijakan: Anda dapat menyetel kebijakan API Anda langsung di kode Strapi melalui ./config/policies untuk Kebijakan global dan ./api/**/config/policies untuk titik akhir lokal. Ini adalah lapisan keamanan tambahan untuk aplikasi Strapi Anda. Untuk mengatur kebijakan dengan GraphQL, dokumentasi Strapi memiliki halaman yang didedikasikan untuk itu.

  • Kebocoran Data: Anda dapat meneruskan parameter private: true, dalam parameter dalam model API Anda, untuk menghapus nilai yang sedang diakses oleh siapa pun. Klik di sini untuk mempelajari lebih lanjut

  • JWT: Anda dapat meminta pengguna untuk mengakses titik akhir sensitif aplikasi Anda untuk masuk dan menggunakan JWT .

  • Paparan Informasi Sensitif: Strapi memungkinkan untuk mengedit pengontrol , yang informasinya dapat diakses dalam panggilan titik akhir. Anda dapat menghapus kolom dan parameter tertentu dari hasil.

Di GraphQL:

  • DOS (Denial of Service): Anda perlu membatasi permintaan Anda. Seorang peretas jahat, jika menemukan API GraphQL-nya, dapat memasang serangkaian kueri yang dapat membebani server Anda. Ini adalah artikel bagus di blog Apollo yang mengajarkan beberapa kasus kueri berbahaya dan cara menghindarinya.

  • Mengatur Kebijakan untuk Kueri: Anda harus menyesuaikan Skema API GraphQL Anda, mengatur kebijakan yang diinginkan untuk mengontrol siapa atau bagaimana mengakses apa di API Anda

  • Akses tidak sah: Anda perlu menonaktifkan GraphQL Playground, yang sudah dinonaktifkan di Strapi versi produksi (Anda dapat menonaktifkannya untuk lingkungan lain di sini), maka titik akhir GraphQL Anda tidak dikelola oleh rute tetapi oleh middleware.

Kita perlu membuat middleware baru, yang akan memeriksa apakah titik akhir yang kita inginkan adalah / graphql dan jika pengguna yang diautentikasi adalah yang kita inginkan:

 module.exports = strapi => { return { initialize() { strapi.app.use(async (ctx, next) => { const handleErrors = (ctx, err = undefined, type) => { if (ctx.request.graphql === null) { return (ctx.request.graphql = strapi.errors[type](err)); } return ctx[type](err); }; // check if it's a graphql request if (ctx.request.url === '/graphql' && ctx.request.method === 'POST') { if (ctx.request && ctx.request.header && ctx.request.header.authorization) { try { // get token data const { id } = await strapi.plugins[ 'users-permissions' ].services.jwt.getToken(ctx); if (id === undefined) { throw new Error('Invalid token: Token did not contain required fields'); } // check if the id match to the user you want if (id !== 'my-user-id') { return handleErrors(ctx, 'You are not authorized to access to the GraphQL API', 'unauthorized'); } } catch (err) { return handleErrors(ctx, err, 'unauthorized'); } } else { // if no authenticated, return an error return handleErrors(ctx, 'You need to be authenticated to request GraphQL API', 'unauthorized'); } } await next(); }); } }; };

Untuk diautentikasi, Anda perlu mengirim JWT di header. Lihat di sini di dokumentasi otentikasi Strapi bagaimana melakukannya.

Di Next.js:

  • Bidang validasi: Validasi bidang formulir tidak hanya digunakan untuk memandu pengguna Anda, tetapi juga untuk menjamin integritas informasi yang dikirim dari klien ke server. Ini mencegah serangkaian kode berbahaya masuk ke Layanan kami. Pengguna masih dapat mencoba memanipulasi data dengan mengedit HTML di DevTools, tetapi itu adalah masalah lain.

  • CRSF: Meneruskan parameter Content-Type: application / JSON, dalam permintaan kami, memaksa aplikasi kami untuk tidak menggunakan permintaan sederhana, dan melindungi dari serangan

  • XSS: Panduan ini sangat berguna dan menunjukkan beberapa aturan yang sebaiknya diikuti saat mengembangkan aplikasi front-end kami agar tidak pusing lagi setelah itu terkait masalah keamanan dan XSS. Plugin Next.js ini juga membantu menerapkan Perlindungan XSS, membantu browser membersihkan area rentan aplikasi Anda.

  • Security Headers & ClickJacking: Menggunakan X-Frame-Options: DENY atau SAMEORIGIN, Anda mencegah pihak ketiga untuk dapat menjalankan aplikasi Next.js Anda dalam sebuah bingkai.
    Plugin next-secure-headers membantu Anda melakukannya. Selain mengimplementasikan FrameGuard, itu juga mengimplementasikan XSS Protection, contentSecurityPolicy , nosniff , noopen , forceHTTPSRedirect , referrerPolicy , expectCT .

  • JWT & Rolling Tokens: Anda dapat menerapkan JWT, untuk otentikasi Aplikasi Anda untuk menjamin integritas API Anda dan akses ke sana, ini adalah tutorial bagus yang mengajarkan hal ini

Lebih:
NextAuth.js: Sebuah plugin untuk membantu Anda dengan keamanan dalam otentikasi aplikasi Next.js Anda

SSL:

Satu langkah sebelum kami mempublikasikan situs kami untuk produksi adalah menyetel domain dan server kami ke protokol HTTPS. HTTPS melindungi permintaan kami agar tidak menjadi target serangan Man In the Middle dan juga penting untuk SEO karena memengaruhi peringkat Google.

Beberapa cara mendapatkan sertifikat SSL gratis untuk situs web Anda adalah dengan menggunakan layanan:

Caching APIS:

Meskipun tidak hanya menyangkut keamanan tetapi juga dengan kinerja, cache APIS dapat direkomendasikan sehingga situs Anda dapat berfungsi bahkan di lingkungan offline, tetapi ketika datang ke data dinamis, itu akhirnya tidak direkomendasikan, hanya untuk data yang tidak. terus berubah. Ini adalah topik yang membutuhkan artikel hanya untuknya, tetapi jika Anda merasa tertarik untuk mengetahuinya lebih lanjut, saya sarankan membaca artikel berikut:

Peta Jalan Keamanan Strapi:

Tim Strapi sedang merencanakan beberapa fitur yang dapat membantu rilis mendatang tentang masalah keamanan:

Ini adalah tautan Papan Produk . Di dalamnya, kami melihat bahwa tim Strapi merencanakan fitur-fitur seperti 2FA (Two-factor authentication), Rolling Token (JWT), SSO (Google, Twitter, Facebook, GitHub), antara lain yang sudah diuji: sebagai Permissions and Rules per pengguna dan Izin di tingkat lapangan.

Alat pemeriksaan:

Ada beberapa situs dan alat di web yang menguji seberapa aman aplikasi kita. Di bawah ini beberapa di antaranya:

  • Sentry : Sentry adalah alat untuk memantau kesalahan aplikasi web. Ini mendukung beberapa teknologi dan platform. Dapat dengan mudah diintegrasikan dengan GraphQL , Strapi atau Next.js. Ini memiliki versi gratis untuk pengembang.

  • Sqreen: Sqreen adalah platform pemantauan keamanan webapps. Ini dapat membawa data real-time dari potensi eksploitasi, melindungi Anda dari serangan dan aktivitas berbahaya.
    Strapi mendukung Sqreen.

Pertama: buat akun percobaan Sqreen
Kedua: atur organisasi Anda di dasbor Sqreen
Ketiga: Siapkan Sqreen di Strapi

Di Next.js Anda juga dapat menggunakan Sqreen, tetapi konfigurasinya sedikit lebih rumit

Pertama : buat akun percobaan Sqreen
Kedua: atur organisasi Anda di dasbor Sqreen
Ketiga: konfigurasikan Next.js untuk menggunakan Custom-Server
Konfigurasi Sqreen untuk Node.js

  • LGTM : LGTM adalah alat sumber terbuka yang digunakan oleh pemain utama di pasar, seperti Google, Microsoft, Nasa, dan Dell, yang memeriksa kerentanan dalam kode Anda melalui repositori di Github atau BitBucket.
    Ia memiliki alat peninjau kode otomatis dan sangat kuat, ia memiliki peringatan untuk memperingatkan Anda tentang masalah dalam kode dan juga perbandingan dan riwayat.

  • SonarCloud : SonarQube adalah alat yang sangat kuat yang tidak hanya memeriksa bug dan kerentanan dalam kode Anda, tetapi juga beberapa parameter seperti Pemeliharaan kode, Cakupan Uji, Codesmell, Duplikasi kode, ini menganalisis kode Anda dan dapat menghentikan P / R atau M / R di Github, GitLab, Azure DevOps atau BitBucket jika tidak mencapai kualitas kode yang diharapkan. SonarCloud juga memiliki plugin untuk IDES yang memeriksa secara real-time

  • Mozilla Observatory: Alat Mozilla yang akan membantu memberikan Wawasan tentang keamanan situs web Anda.

  • Alat SSL DigiCert: Ini akan memeriksa data sertifikat SSL Anda, menunjukkan kemungkinan kerentanan, Rantai Sertifikat dan Konfigurasi Server.

  • Qualys SSL Labs: Alat yang sedikit lebih lengkap dibandingkan dengan DigiCert.

  • Alat Uji Pena: Kerentanan Situs Web: Situs web yang memiliki pemeriksaan SQL Injection, XSS, Penyertaan file, Eksekusi perintah jarak jauh, namun berbayar.

  • Sucuri SiteChecker: Sucuri terkenal di dunia keamanan web. Mendeteksi apakah situs Anda masuk daftar hitam di Google, jika memiliki tautan yang tidak aman, di antara parameter keamanan lainnya

Baiklah teman-teman, terima kasih jika Anda sampai di sini dan memiliki kesabaran, maksudnya adalah memberi Anda gambaran umum tentang cara mengurangi dan menyelesaikan berbagai masalah keamanan dan kerentanan di aplikasi web dengan Next.js dan Strapi, sebelum kami mulai menggunakan Stack, menjadi bahwa konsep yang disebutkan di sini dapat digunakan dan diverifikasi dalam aplikasi web apa pun tidak hanya dengan Node.js dan JavaScript / TypeScript tetapi dengan bahasa lain dan yang menggunakan Rest API atau GraphQL Apis. Ini adalah subjek yang sangat luas yang dapat menghasilkan beberapa artikel, tetapi saya mencoba meringkas yang satu ini.

Referensi:

May 16, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *