API設計でトークンの保存場所

Question

API設計のベストプラクティスについて詳しい方の意見が聞きたいです。

現在、PHPにてステートレスAPIの設計を行っております。
ウェブの記事なんかを見ると、トークンの保存にブラウザのlocalStorageを使う記事をよく見ます。

疑問に思っていることは
・localStorageにトークンを保持しておくのはXSSに対して脆弱ではないか？
・サーバーサイド側でhttp onlyなCookieとしてトークンを保存する場合セキュリティは高められるが、ステートフルになるのではないか？
と言うことです。

この場合のトークンの保存にはどう言う設計が正しいのでしょうか？
また理解が乏しいため、見当違いのことを言っていたらすみません。

わかりやすく教えていただけると助かります。

Comments

[m.ts10806]

localStorageに保持することがなぜXSSに対して脆弱という疑問がでたのでしょうか？出典明示願います

[doroid]

以下の記事でlocalStorageとxssについて見ました。
今はまだ色んな記事を見て勉強しているので完全に理解はできていません。

https://stackoverflow.com/questions/13931863/localstorage-and-xss

[m.ts10806]

質問本文に追記しておいてもらえると（こちらのコメント欄はデフォルト非表示です）

[doroid]

ご回答ありがとうございます。
localStorageはXSSに対して脆弱性があると思い込んでいましたが、何が危険でどう言う脆弱があるのかはっきりしていませんでした。
「localStorageに保持することがなぜXSSに対して脆弱という疑問がでたのでしょうか？」と言われたことで改めて何が問題なのか調べ直して見ようと思います。
ありがとうございました。

Answer 1

・localStorageにトークンを保持しておくのはXSSに対して脆弱ではないか？

・サーバーサイド側でhttp onlyなCookieとしてトークンを保存する場合セキュリティは高められるが、ステートフルになるのではないか？

どちらもそのとおりです。

この場合のトークンの保存にはどう言う設計が正しいのでしょうか？

何を優先したいかによります。どのような理由でステートレスで実装しようとしているのでしょうか。

Comments

[doroid]

ご回答、ありがとうございます。
優先したいことはステートレスな設計でブラウザまたはアプリからのAPIリクエストを
考えています。
アプリはブラウザからのリクエストではないため、ステートレスな設計にしようと考えてます。

[maisumakun]

ステートレスにしたいのであれば、ブラウザで運用した場合にJavaScriptから読み取り可能となるのは仕方ありません。

[doroid]

そう言うことなんですね。
その辺を踏まえ、再度設計を見直したいと思います。
ありがとうございます。