2

GitHub Pagesを使用して、下記のようなことを実現したいと考えています。

【 実現したいこと 】
 1. アンケートフォーム(html/css/javascript)をGitHub Pagesで公開する(実装済み)
 2. 回答は、Google Sheets APIを通して、限定公開スプレッドシートに保存する
 3. セキュリティを考慮し、Google Sheets APIのClientIDとAPIkeyは隠す

項目3を実現するにあたって、Environment secretsという機能に注目しております。
(Setting->Environments->Environment secretsから登録できる環境固有の変数、と認識しています)
この変数を読み込めるようにするには、GitHub Actionsを登録しなければいけないのは理解しています。
ただ、Actionsにはどのように記載すれば良いのかが分からず...。

【 質問したいこと 】
 Environment secretsにindex.html内のjavascriptからアクセスするため、
  a. GitHub Actionsはどのように記載すれば良いですか?
  b. javascriptからはどうやってアクセスすれば良いですか?

以上、2点をお伺いしたいです。よろしくお願いします。


項目aは、envは下記のように記載する(ここが間違っていたら指摘してください)ことを想定しています。

env:
 CLIENT_ID: ${{ secrets.MY_CLIENT_ID }}
 API_KEY:   ${{ secrets.MY_API_KEY }}

1 件の回答 1

3

大前提としてAPIのkeyはサーバサイドで利用することを想定されており、残念ながらフロントエンドだけで対応することは難しいです。

GitHub Actions はソフトウェアを開発するうえで実行されるビルド、デプロイ、テスト、リリースの手動で行っている作業を自動化するためのツールです。

githubで公開してしまうとまずい情報ですがリリース時には利用したい情報を暗号化できます。
そしてリリース時には暗号化されている情報を複合化してリリースできるというものです。

ただし、ここで重要になってくるのはリリース時には複合化された状態でリリースされます。
つまりはjavascriptに直接暗号化した情報を載せてしまっても公開されているJSファイルにはそのまま秘密情報は載ってしまいます。
なので今回の要件では使えません。

先に述べた通りフロントエンド(html+JS+CSS)だけの要件で秘密鍵を扱うことは難しく、残念ながら要件を再検討されたほうがいいかと思います。

解決方法としては
・サーバサイドを利用して実装をする(サーバに秘密鍵を用意して、サーバと通信しながらサーバからgoogleAPIを利用する形)
・googleフォームをおとなしく使う
※若干抜け道ですがGoogleフォームのデザインを自分なりに修正される方もいらっしゃいます。もちろん自己責任でお願いします。

7
  • ご回答いただき、ありがとうございます。 素人質問で恐縮ですが、例えば、Reactアプリの秘密鍵をどのように扱えば良いか、こちらで議論されていますが、同じようなことはできないということなのでしょうか? Commented 2021年9月30日 2:59
  • その最もVoteされた回答でも同じことが書いてありますね。簡約「Reactは完全なフロントサイドアプリなので、本当に秘密にしたい場合はサーバサイドを使いましょう。」
    – keitaro_so
    Commented 2021年9月30日 3:12
  • そこは重々承知しています。その上で記載されていることを実際にできればと思ったのですが...。 Commented 2021年9月30日 3:18
  • 秘密鍵をGithubには公開したくないけど、フロントのソースコードには載せていいということですか?
    – keitaro_so
    Commented 2021年9月30日 3:20
  • 1
    うーん個人的にはフロントに公開するもgithubに載せるもセキュリティリスクが同じですね。玄関の鍵を閉めたところで、窓の鍵が開けっ放しの状態です。
    – keitaro_so
    Commented 2021年9月30日 3:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。