Pertanyaan Sudut 6, haruskah saya memasukkan variabel lingkungan rahasia dalam file environment.ts?


Ada dua sub-pertanyaan:

  1. Haruskah saya menempatkan variabel lingkungan rahasia dalam file environment.ts?

  2. Itu process variabel shim hilang. Jika saya menggunakannya, tsc akan melemparkan kesalahan: Cannot find name 'process'.

Inilah hal saya:

Tentang Q1: Saya tidak berpikir meletakkan variabel lingkungan rahasia di file environment.ts sudah benar. Karena file-file ini akan menjadi dorongan untuk manajemen kode sumber, seperti GitHub, gitlab, bitbucket. Itu tidak aman. Jadi saya pikir variabel lingkungan rahasia harus dilalui process.env, suka process.env.ACCESS_TOKEN, atau, jika menggunakan docker-compose, harus meletakkan variabel lingkungan rahasia di .env file dan tambahkan file ini ke .gitignore mengajukan.

Tentang Q2: Jika saya menggunakan Heroku untuk mengatur variabel lingkungan saya, itu tergantung pada process variabel. Sekarang, angular6 menyingkirkan shim process, Bagaimana saya bisa bekerja dengan Heroku? Juga, menggunakan docker-compose melewati variabel lingkungan melalui .env file tergantung pada process terlalu.

Dan jika digunakan .env file untuk docker-compose, ada pertanyaan baru yang keluar: Cara melewatkan variabel dalam file .env ke file angular6 environment.ts

perbarui 1:

Ini kasusnya:

Pertama, tidak ada back-end

Saya menggunakan github api atau api terbuka lainnya, dan ada variabel lingkungan bernama access_token, Jika saya memasukkan ini environment.ts file dan tekan kode sumber front-end saya ke Github, Github akan mendeteksi informasi rahasia dan memberi saya peringatan, kata mereka, Anda tidak boleh memasukkan token akses github dalam kode sumber Anda dan mendorongnya untuk repo, sehingga mereka akan mencabut token akses saya.

Jadi saya ingin menggunakannya process.env.ACCESS_TOKEN, tetapi process variabel shim hilang Angular6, Bagaimana saya bisa memecahkan masalah ini? Haruskah saya tambahkan environment.ts file ke .gitignore file atau apa?

perbarui 2

Ini ada kasus lain:

lanjutkan dengan pembaruan 1. Sekarang, saya menambahkan docker-compose dan Dockerfile untuk menjalankan aplikasi front-end saya dalam wadah docker. Berikut adalah alur kerja:

  1. Tulis Dockerfile, jalankan npm run build perintah dan salin ./build direktori ke direktori file statis nginx dari kontainer buruh pelabuhan. itu ./build direktori berisi index.html, bundle.js file dan sebagainya.

  2. taruh access_token dan variabel lingkungan rahasia lainnya ke dalam .env mengajukan.

  3. menjalankan docker-compose up untuk menjalankan aplikasi saya dalam wadah buruh pelabuhan.

Saya pikir alur kerja ini padat. Tidak perlu layanan back-end, variabel lingkungan rahasia di .env dan .gitignore mengandung .env file, sehingga tidak akan didorong ke Github repo.

Tapi, pokok kuncinya adalah process shim hilang. Saya tidak bisa mendapatkan variabel lingkungan process.

perbarui 3

Saya pikir pertanyaan saya fokus fase pengembangan aplikasi front-end. Saya terus menggunakan kasus di atas untuk menjelaskan.

Untuk produksi siap, alur kerja adalah:

  1. Buatlah layanan back-end untuk github oauth, ketika alur kerja oauth selesai. Layanan kirim balik access_token ke front-end.

  2. login front-end dengan sukses, dapatkan access_token dari layanan back-end dan simpan di localStorage atau cookie. Tidak perlu mendapatkan access_tokendari process.env

Tetapi untuk tahap pengembangan, Front-end dan pengembangan back-end dipisahkan untuk situasi umum. Jadi, Front-end tidak harus bergantung pada layanan back-end.

Dan saya tidak ingin membangun keseluruhan sistem besar untuk permulaan.

Jadi saya pikir pertanyaannya adalah:

Di mana menyimpan variabel lingkungan rahasia dan bagaimana cara masuk Angular6 kode aplikasi front-end? Ada beberapa situasi yang perlu dipertimbangkan:

  • Bekerja dengan PaaS Heroku config vars
  • dockerlize (docker-compose, Dockerfile), .env mengajukan.
  • Tanpa layanan back-end.
  • tambahkan file variabel lingkungan ke .gitignore, jangan dorong ke SCM (Github, gitlab, dan sebagainya)

5
2017-07-24 03:07


asal


Jawaban:


TL; DR

Anda seharusnya tidak memperlakukan environment.ts sebagai sesuatu yang mirip dengan process.env. Namanya mirip tetapi kelakuannya sama sekali tidak. Jika kita berbicara tentang browser, variabel lingkungan adalah item sessionStorage / localStorage Anda (localStorage bertindak lebih seperti variabel yang ditambahkan ke profil bash Anda; cookie dan indexedDB berperilaku dengan cara yang sama). Itu environment.ts dibangun di dalam aplikasi sehingga hanya sebagian dari kode.

Itu sebabnya tidak aman untuk menyimpan rahasia ke lingkungan. Dengan cara apa pun. Gunakan rahasia pada backend di bawah beberapa lapisan layanan atau di salah satu penyimpanan yang disebutkan di atas.

Versi panjang

Tidak ada yang namanya rahasia dalam aplikasi sisi klien. Karena kode Anda di browser akan bisa mendapatkan variabel-variabel itu, semua orang akan bisa mendapatkan variabel-variabel tersebut dalam runtime.

Itu berarti, semua pustaka yang Anda gunakan secara eksplisit atau implisit, ekstensi peramban pengguna dan siapa saja yang dapat mengendus trafik pengguna / Anda - semua mereka akan mendapatkan rahasia Anda dengan mudah.

Tidak masalah bagaimana Anda melewatinya. Melalui process.env atau environment.ts, semua akan berakhir di file main.js yang dihasilkan di mana mereka sangat tidak rahasia lagi bahwa diskusi yang lebih kuat sebenarnya tidak berguna.

Jawaban untuk bagian yang diperbarui 1:

Jika access_token adalah token (atau pengguna sintetis) Anda, maka Anda memiliki dua opsi:

  1. Tulis layanan backend yang mendorong kode atas nama pengguna Github ini. Itu berarti token akan disimpan dalam variabel lingkungan di sisi backend, yang merupakan cara yang sangat tepat dalam melakukan sesuatu
  2. Minta pengguna Anda untuk memasukkan token untuk setiap push atau minta sekali dan simpan di localStorage. Ini masuk akal hanya jika setiap pengguna memiliki tokennya sendiri

Jawaban untuk bagian yang diperbarui 2:

Anda dapat membangun docker di sekitar frontend Anda, jalankan dalam klaster kubernetes di dalam mesin virtual yang di-host di server paling aman di dunia, itu tidak akan membuat token Anda aman jika Anda menempatkannya sebagai variabel lingkungan sudut karena apa yang publik tidak bisa dirahasiakan.

Anda tampaknya tidak memahami titik utama: GitHub memberi Anda kesalahan dan tidak memungkinkan untuk mendorong kode, Anda harus sudah bersyukur bahwa itu menemukan masalah dalam arsitektur Anda. Jika Anda ingin memecahkan masalah, gunakan solusi di atas. Jika Anda hanya ingin mem-bypass validasi GitHub dan Anda tidak peduli dengan keamanan maka hanya membagi string token Anda menjadi dua bagian dan menyimpannya terpisah dan GitHub tidak akan dapat menemukannya.

Jawaban untuk bagian yang diperbarui 3:

Anda dapat melakukan permintaan Oauth2 GitHub langsung dari frontend Anda. Setiap pengguna Anda harus memiliki akun di sana dan itu akan menyelesaikan semua masalah Anda. Itu sebenarnya sama dengan apa yang diusulkan sebagai solusi # 2.

Jika Anda pergi dengan solusi # 1 dengan backend, untuk tujuan pengembangan hanya pra-mengatur cookie atau gunakan localStorage.setItem('your-token-here'). Ini lebih dari cukup untuk tujuan pengembangan.


8
2017-07-24 03:26