質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

Q&A

0回答

1495閲覧

chrome extensionにおけるユーザデータのセキュアな保存方法

ocha123

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Chrome extension

Chrome拡張機能

1グッド

1クリップ

投稿2020/12/12 09:10

編集2020/12/12 16:34

前提・実現したいこと

現在,API_KEY(secret key)を必要とするREST APIを内部で利用するGoogle chrome 拡張機能の開発をしています.
各ユーザのAPIを用いるためのAPI_KEYの安全な保存方法についてアドバイスをいただければと思います.

外部サイトにてユーザが各自取得してきたAPI_KEYを拡張機能のOptionsでユーザに入力させてchrome.storage.sync.set({apikey: API_KEY}, function() {});にて保存する方法を考えました.
しかし,https://developer.chrome.com/docs/extensions/reference/storage/によると,

Confidential user information should not be stored! The storage area isn't encrypted.

とあり,APIの秘密鍵を保存するには適さないと考えられます.
このような場合,どのようにAPI_KEYを保存するのが適切でしょうか.

また,仮に上記の方法で保存した場合,(chromeの脆弱性を除いて)chrome.storage.syncによって同期されるアカウント保持者以外の第三者が保存されたデータを取得する方法が存在するということなのでしょうか.それとも万が一データを取得された場合に,暗号化されていないため安全性が担保されないという話なのでしょうか.

ソースコード例

saveボタンを押すと,入力欄に入力されたAPI_KEYの値をchrome.storage.sync.setにより保存する例

options.html

javascript

1<!DOCTYPE html> 2<html> 3<head> 4 <title>Options Page</title> 5<meta http-equiv="content-type" charset="utf-8"> 6</head> 7<body> 8<input type="password" id="apikey"><button id="save">Save API_KEY</button> 9 <script src="options.js"></script> 10</body> 11</html>

options.js

javascript

1function check_apikey(){ 2 chrome.storage.sync.get(null, function (items) { 3 var api_key = items.apikey;//ここでchrome.storage.syncで保存したAPI_KEYを取得 4 var api_url = "https://api.hoge.com/foo"; 5 var params = { 6 auth_key: api_key, 7 text: "APIで送信するテキストデータ", 8 }; 9 var data = new URLSearchParams(); 10 Object.keys(params).forEach((key) => data.append(key, params[key])); 11 fetch(api_url, { 12 method: "POST", 13 headers: { 14 "Content-Type": "application/x-www-form-urlencoded; utf-8", 15 }, 16 body: data, 17 }).then((res) => { 18 alert("resはAPIからのレスポンス"+res) 19 } 20} 21 22function save_apikey() { 23 chrome.storage.sync.set( 24 { 25 apikey: document.querySelector("#apikey").value, 26 }, 27 function () { 28 check_apikey(); 29 } 30 ); 31} 32document.querySelector("#save").addEventListener("click", save_apikey);

調べたこと

https://www.anupshinde.com/posts/salesforce-rest-api-chrome-extension/ではユーザにソースコードをダウンロードさせ,直接ソースコードを書き換えてもらう手法が提案されています.しかし,将来的に開発中の拡張機能はChromeWebStoreに公開したいと考えているのでこの方法はあまり現実的ではありません.
それに,(この分野に明るくないので的外れな考えかもしれませんが)ソースコードにcredentialsを直接書き込むのはセキュリティ的にいかがなものだろうかと疑問が残ります.

補足情報(FW/ツールのバージョンなど)

Google chrome Version 87.0 (Official Build) (64-bit)

追記

https://www.reddit.com/r/javascript/comments/8txe2q/how_to_securely_store_an_api_token_in_a_chrome/によると,

What you should not store inside the local storage are e.g. passwords. For that you should simply use the credential management API that lets chrome store any credentials in its password storage for you.

とのことですが,多くの方の見解を伺いたいです.よろしくお願いします.

A_kirisaki👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問