API KEYやAccess Tokenなど周りに公開したくない情報を隠す方法

[kobakazu0429]

@kure-kosen/all-member
現在はjavascriptで開発しています。
毎回api keyやtokenは書き換えてからcomitしています。
開発時にはなおす必要が、comit時には書き換える必要があるので非効率です。
javascriptだけでなく、ほかの言語でも使える方法があればそちらも知りたいです。

[euglena1215]

dotenvがオススメ！！！
https://qiita.com/ueokande/items/80048f886082fea5b776

だいたいの言語にdotenvはあるので「言語名 dotenv」で検索すればヒットするはず。

https://github.com/kure-kosen/cho_kure_web/blob/feature/dev/.env.sample
こんな感じで使ってます

[kobakazu0429]

@euglena1215
回答ありがとうございます。
Bash on Ubuntu on WindowsにNode.jsの実行環境を作りました。
そして、30歳からのプログラミング-Node.jsでの環境変数の使い方のdotenvを参考に使えるようにはなりました。

でもhtmlへの書き方？がわかりません。

[euglena1215]

@kobakazu10
html or javascriptに環境変数を埋め込みたいって話かな？
そもそもhtmlは実行した側にソースが表示されるものなので隠すことは仕組み上無理だと思う。
javascriptもDeveloper toolを使えば値は参照できちゃうし。

一般的にはサーバ側でapi keyやtokenを使って必要な情報を取得してきて、クライアント側には取得したデータのみ渡すって流れがベターだと思う。

[kobakazu0429]

@euglena1215

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.XYZ({
        url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=s1a2m3p4l5e6'
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

こんな感じのコード(JS)がHTMLに直接書いてあるとします。
そのときs1a2m3p4l5e6の部分をgithubに乗せるときはなどにしたいのですが、無理なんですかね？
直接サイトでdev toolとか使えば見られるかもですけど

[euglena1215]

@kobakazu10
https://teratail.com/questions/48603
この記事を見た感じdev toolで見えるのはしょうがないから
リファラーチェックとかtoken以外の方法で他の人が使えないようにしようって書いてあるね。
だからtoken以外の方法で他の人が使えないようになっているのであればgithubに載せるのはセーフなのかなって思う。
あと、dotenvを使えばいいよって言ったけどdev toolのconsoleでenvの変数参照すれば普通に値わかるじゃんw

サーバサイドばっかりやっててその辺完全に忘れてた、ありがとう！

[chanyou0311]

この辺解決したかな？

[kobakazu0429]

@euglena1215
jsなどのapi tokenは見られても仕方がないってことですよね。
了解しました。
他の言語の時はdotenvを使いたいと思います。
ありがとうございました。