このコードに、以下の内容を追加する。これは、http://sub.localhost:8081/のコード。実行してサーバを起動し、http://localhost:8080/にアクセスする。セットされるので、動作確認のためにリロードしてリクエストヘッダを確認してみる。本記事とは無関係なフィールドについては省略している。検証の準備が整ったので、表示されているリンクでhttp://sub.localhost:8081/に移動する。検証は全て、http://sub.localhost:8081/からhttp://localhost:8080/にリクエストを送ることで行う。ドメインが異なるためcross-siteになる。そのため、Strictは常に送信されない。タグ」という文字をクリックしてaタグによるリクエストを発行し、そのリクエストヘッダを調べる。none=valueメソッドはGETなのでsafeである。Navigationである。そのため、NoneだけでなくLaxも送信される。次はformタグによるリクエスト。メソッドはGETかPOSTかを選べるが、それによって結果が変わる。メソッドでのリクエストを行う」をクリックしたときのリクエストヘッダ。Navigationなので、LaxとNoneが送信される。メソッドでのリクエストを行う」をクリックしたときのリクエストヘッダ。Navigationではあるのだが、リクエストメソッドがPOSTなのでsafeではない。そのためNoneのみが送信される。prerender次はprerenderによるリクエストを試す。headタグのなかに、以下のコードを追記する。crossorigin="use-credentials">prerenderとは、リソースを先読みするための機能。ブラウザは、hrefで指定されたリソースを予め読み込んでおく。することで、リンクを踏むなどして実際にそのリソースに移動するときに、瞬時にそのページを表示することができる。そのため、実際に表示するページに対するリクエストの他に、先読みするページに対するリクエストも発生する。今回の例では、http://localhost:8080/?prerenderを先読みしている。クエリをつけたのは、prerenderによるリクエストであることを分かりやすくするためであり、それ以上の意味はない。この機能を使うことはできない。開発者ツールで当該リクエストを確認することはできないため、http://localhost:8080/側のコードを書き換えて、リクエストの内容がログに表示されるようにした。具体的には、以下のコードを書く。req.headers.cookie);この状態でサーバを起動し直してhttp://sub.localhost:8081/にアクセスすると、ログに以下の内容が表示された。Navigationであるということが分かった。Navigationなのか。先読みをしているだけなので、アドレスバーには依然としてhttp://sub.localhost:8081/が表示されている。prerenderに関するドキュメントには、prerenderを実行すると新しくページを作り、そこに対象のリソースをレンダリングすると書かれている。そのページは非表示であり、ユーザーには見えない。先読みしたページに移動しようとすると、非表示ページにレンダリングしていた内容が、現在見ているページにスワップされる。Navigationになるのだと思う。内容を表示させている。打ち込んで表示しているのと何も変わらない。開発者ツールで確認できないのも、同じ理由だと思われる。今見ているページのなかでリクエストが発生しているのではなく、新しくページを作ってそこでリクエストしている。今見ているページのNetworkタブには表示されない。次は、iframe内でformタグによる送信を行う。この手法を使うと、ユーザーに気付かれることなくフォームからの送信を行える。今回のサンプルでは、以下のような仕組みになっている。http://sub.localhost:8081/からhttp://sub.localhost:8081/iframeへのリンクを用意する。http://sub.localhost:8081/iframeにはiframeでフォームが埋め込まれており、フォームを読み込むと同時に送信するようにしてある。iframe内でフォームの送信を行っているので、画面遷移は行われない。スタイルの設定によってiframe自体を非表示にしている。そのため、フォームによる送信が行われたことにユーザーが気付く可能性は低い。以下がそのコードだが、かなり長いので、上記の説明が理解できていれば無理して読む必要はない。リクエストを送りました。つのリクエストが発生する。none=valueどちらもNoneしか送信されていない。Navigationではないためである。タグ次は、imgタグによるリクエスト。srcでパスを指定すれば、それに対するリクエストが当然発生する。サブドメイン側のコードを以下のようにして再実行してから、http://sub.localhost:8081/にアクセスする。Navigationではないので、Noneのみが送信される。使ったリクエスト最後は、fetchによるリクエストを検証する。http://sub.localhost:8081/にscriptタグを埋め込み、そのなかでfetchを実行する。Navigationではないので、メソッドを問わず、Noneしか送信されない。属性の動作一覧ここまで検証してきた内容を、表にまとめる。cross-siteの検証結果しか書いてこなかったが、same-siteでも同じ検証を行っているので、その結果も記載しておく。常に送信されるので、特に覚えることはないのだが。以下が、Laxが送信されるかどうかの早見表である。×そして既に書いたことの繰り返しになるが、Strictは、same-siteの場合にのみ常に送信される。cross-siteの場合は常に送信されない。全て、Noneとして扱われる。6265bisに書かれている内容であり、今回検証した各ブラウザの挙動もそれに沿ったものだった。SameSite属性について独自の変更を加えている。通信でしか使えなくなる、ということである。従来の仕様よりもセキュリティを厳しくしていると言える。この挙動についても、実際に検証してみた。secureの項目を有効にすることで、試すことができる。自己署名証明書を用意、秘密鍵(server.key)と証明書(server.crt)を作成した。res.end();}).listen(8081);Noneの取り扱いや、SameSiteに無効な値を指定したケース(invalid)、SameSiteを設定しなかったケース(noSpecify)などについて、検証していく。リロードして、そのリクエストヘッダを確認してみる。送信されるはずだが、noSecureNoneだけが送信されていない。なってしまうということ。そのため、Noneを指定する場合は必ずSecure属性も設定しなければならない。次に、「別ドメインのサイト(sub.localhost:8081)に移動する」をクリックして、https://sub.localhost:8081/に移動する。すると、imgタグによるリクエストが発生する。Navigationではないcross-siteのリクエスト」である。タグ」をクリックして、https://localhost:8080/遷移する。Navigationである、cross-siteのリクエスト」である。Cookie(invalid)は、Laxになること、そしてNoneを指定する場合はSecure属性が必須であることを、確認できた。受け渡ししておらず、SameSite属性を何も設定していないのなら、影響はほとんどないかもしれない。仕組みを悪用した攻撃に対する非常に本質的な対策になるため、SameSite属性は積極的に使っていきたい機能である。いえよく理解せずに使ってしまうと、ユーザービリティを損ねることになってしまう。Strictにしてしまうのが最も強固である。使っている場合、他のドメインからリンクで遷移してきたときにログインしていないと見做されてしまう。最初の検証で確認したように、他のドメインからaタグで遷移した場合、Strictは送信しない。そのためセッショントークンをStrictで保存していた場合、リクエストにセッショントークンが含まれず、ログイン状態ではないと見做されてしまう。同一ドメイン内で遷移し直したりページをリロードしたりすれば、そのリクエストはsame-siteとなるので、セッショントークンは送信されログイン状態になる。これはさすがに使い勝手が悪い。分けて管理することを提案している(8.8.2)。ひとつには、GETなどによるリソースの取得のみを許可する。一方には、それに加えて、リソースの操作も許可する。前者にはLaxを指定し、後者にはStrictを指定する。accessは送信されるためログイン状態が維持される。投稿やパスワードの変更といったものについては、同一ドメイン内からリクエストした場合にのみ許可されるため、安全性が高まる。ついて検証するSPAのCSRF対策について調べる機会があったので、まとめておく。...2016-12-01ES2015で書かれたNode.jsをデーモン化する最新版のNode.jsでは、ES2015の機能のほとんどがサポートされて...2016-11-06ReactのサーバーサイドレンダリングReactでは、サーバーサイドレンダリングを行うことが出来る。クリックイベントのテスト前回の記事はこちら。はてなブログPro30歳無職から独学でプログラミングを開始した人間の記録。月別アーカイブスポンサーリンクはてなブログをはじめよう!numb_86さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。