Heap Technology

<h2>SPA(React)のログイン処理の脆弱性について</h2>
railsでログイン処理を作ったときに勉強になったことがあったので書き記したいと思います。
<a href="https://github.com/heartcombo/devise">devise</a>と<a href="https://github.com/lynndylanhurley/devise_token_auth">devise_token_auth</a>を使った時のことです。 
ログイン時にリクエストが成功した際は<code> access-token,client,uid</code>の3つのheader情報をreact側に返すようにしていました。
そして、その情報をreact側でcookieに保存していました。（webstorageよりcookieの方が安全と聞いていたため） 
その時は、react側であらゆるAPIに対してのリクエストをこんな感じで書いていました。
<pre><code>export const client = axios.create({
 baseURL: 〇〇
});
</code></pre>
<pre><code>import Cookies from &quot;js-cookie&quot;

client.get(&quot;/auth/sessions&quot;, { headers: {
 &quot;access-token&quot;: Cookies.get(&quot;_access_token&quot;),
 &quot;client&quot;: Cookies.get(&quot;_client&quot;),
 &quot;uid&quot;: Cookies.get(&quot;_uid&quot;)
 }})
</code></pre>
しかし、この方法ではセキュリティ的に安全とは言えませんでした。 
なぜなら、cookieではhttponly属性と言うものがありこれを使うことによりjavascriptを使った攻撃を弾くことができます。（cookieを取得できないようにできる）
ですが、javascriptでcookieファイルを作り出して、httponly属性を付与すると取得ができないファイルと化してしまうため、必然的にhttponly属性の付与が不可能でした。 
(根本的にhttponly属性はサーバー側に付与してもらうのが普通のようです。) 
<a href="https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript">https://stackoverflow.com/questions/14691654/set-a-cookie-to-httponly-via-javascript</a>
つまり、フロント側で生成したcookieはhttponlyを付けていないcookieとなるため、webstorageと全く一緒でセキュリティ的リスクがあります。 
あとは単純にユーザがブラウザの開発者コンソールから見た時に「このアプリのtoken、httponly付けてないじゃん、、」と思われ、不安を煽ってしまうのもデメリットだと思います。
そのため、apiからhttpolnyを付与したcookieファイルをgetしてcredetialsオプションを付けてあげる必要があります。
<pre><code>export const client = axios.create({
 withCredentials: true,
 baseURL: 〇〇
});
</code></pre>
そしてrails側(API側)でも<code>credentials</code>をオンにすることでクロスドメインでcookieのやりとりをできるようにします。 
そうすることによってAPIからhttponly属性を付与したcookieをreactに共有することができました。 
ログイン処理のセキュリティリスクは出来るだけ排除したいので気をつけながら開発しましょう！

SPA(React)でログインを実装する時にフロント側のCookieにtokenを保存してはいけない

<h2>railsApiが大量のバリデーションエラー文を吐いた..</h2>
railsを使ったバリデーション結果をreact(フロント側で)表示した時に起こったトラブルです。
<pre><code> validates :email, presence: true
 validates :email, format: { with: /\A[a-zA-Z]+\z/}
</code></pre>
例えばこんなバリデーションをmodleに書いてるとして、フロント側(今回はReact)で空白の文字を入れると 
&quot;〇〇を入力してください&quot;,&quot;〇〇は不正な値です&quot;と2つのバリデーションエラー文が返ってきます。
基本的に空白の文字の際に出力したいエラー文は&quot;〇〇を入力してください&quot;くらいなので 
これは少し過剰なわけです。
before
<pre><code> validates :email, presence: true
 validates :email, format: { with: /\A[a-zA-Z]+\z/}
</code></pre>
after
<pre><code> validates :email, presence: true
 validates :email, format: { with: /\A[a-zA-Z]+\z/}, allow_blank: true
</code></pre>
こんな風に <code>allow_blank: true</code>を追加してあげるだけで空白時はバリデーションが実行されなくなります。 
補足としては、空でないことを判定する<code>presence: true</code>は空白時にも実行してあげたほうがいいので、 
<code>presence: true</code>には<code>allow_blank: true</code>を追加しないほうがいいですね。
<h2>終わりに</h2>
Railsのバリデーション結果を表示したい時は必須の設定なので、ぜひ覚えてみましょう！

#Rails

SPA(React)でログインを実装する時にフロント側のCookieにtokenを保存してはいけない

railsで空白をpostした時に全てのバリデーション結果が出力された時の解決法