82767


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は下記のように記載する（ここが間違っていたら指摘してください）ことを想定しています。

[code]

    env:
     CLIENT_ID: ${{ secrets.MY_CLIENT_ID }}
     API_KEY:   ${{ secrets.MY_API_KEY }}
    
[/code]


CC BY-SA 4.0
2021-09-29T10:14:31.627
82756
2021-09-30T01:46:04.320
2021-09-29T11:23:46.500
40585
40585
question
javascript github github-pages github-actions
GitHub PagesでAPIキーを隠蔽したい


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

[GitHub Actions](https://github.co.jp/features/actions)
はソフトウェアを開発するうえで実行されるビルド、デプロイ、テスト、リリースの手動で行っている作業を自動化するためのツールです。

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

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

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

解決方法としては  
・サーバサイドを利用して実装をする（サーバに秘密鍵を用意して、サーバと通信しながらサーバからgoogleAPIを利用する形）  
・googleフォームをおとなしく使う  
※若干抜け道ですが[Googleフォームのデザインを自分なりに修正](https://medium.com/@yonemoto/google%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%82%92%E8%87%AA%E7%94%B1%E3%81%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95-f91a617b402b)される方もいらっしゃいます。もちろん自己責任でお願いします。


CC BY-SA 4.0
2021-09-30T01:46:04.320
82767
2021-09-30T01:46:04.320
22665
82756
answer