フロントエンドにおけるテスト駆動開発の実践と概説
はじめに 自動テストが叫ばれて10数年以上の時を経ていますが、今なお開発者の興味を惹くトピックの1つであります。 実際、Developers Summit 2023ではテストを主題とした講演が多く、また人気も博したと耳にします。 さて自動テストと共に話題になるトピックの1つと言えばテスト駆動開発でしょう。 ただテスト駆動開発は、設計・開発手法のため自動テストとは厳密にはジャンル違いであり、誤解を受けがちなトピックでもあります。 またテスト駆動開発を解説する書籍の多くが、Java等のオブジェクト指向言語のスタイルで書かれているためフロントエンドエンジニアのコードスタイルとは若干差異があリます。 当記事ではフロントエンドエンジニアのためにテスト駆動開発の技法の数々をTypeScript、Reactを用いて実践します。 フレームワークとしてReactを採用しましたが、記事内のコードはモダンフロン
【これで解決】SPAでセッション管理するならCookieにしよう【CakePHP4編】 | りゅうりんブログ
XSSとCSRFの違い表 ■CORS（Cross-Origin Resource Sharing） 追加のHTTPヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組み。 サーバがブラウザに指示するというところがポイント。 ブラウザ側はCORS制約を検知するとエラーの挙動をとる。なのでPostmanのようにhttpリクエストを投げるようなツールはCORS制約を受けない。あくまでCORS制約を受ける場合においてはサーバ側からのレスポンスを読み取らせないというブラウザに備わる機能。 ※深堀り！ CORS対策をブラウザがしているのであればCSRFトークンといった対策をサーバ側はする必要ない？と思ってしまうけど、そうじゃない。 先述したようにCORSはあくまでブラウザの挙動。CSRF対
JWTなどのTokenをlocalstrage(HTML5の)に保管することについて
HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。
おーい磯野ー，Local StorageにJWT保存しようぜ！
ある日，HTML5のLocal Storageを使ってはいけない がバズっていた． この記事でテーマになっていることの１つに「Local StorageにJWTを保存してはいけない」というものがある． しかし，いろいろ考えた結果「そうでもないんじゃないか」という仮定に至ったのでここに残しておく． 先の記事では，「Local StorageにJWTを保存してはいけない」の根拠として「XSSが発生した時，攻撃者がLocal Storageに保存したJWTを盗むことが出来てしまう」といったセキュリティ上の懸念事項が挙げられていた． これに対し，クッキーを用いたセッションベースの認証では，セッションIDをクッキーに保存する．クッキーにHttpOnlyフラグをつけておけば，JavaScriptからはアクセスできず，XSSが発生しても攻撃者はセッションIDを読み取ることが出来ない． 一見すると，これは
【JWT】 入門 - Qiita
JWTとは 公式サイト JSON Web Tokenの略 電子署名により、改ざん検知できる。 認証用のトークンなどで用いられる。 構成 ヘッダ、ペイロード、署名の3つから成る。 それぞれは、Base64でエンコードされている それぞれは、 . (ドット) で結合されている。
JWT認証の仕組み・脆弱性について軽くまとめ | deecode blog
JWT認証、便利だしDBに状態持たないのでRESTfulだしめちゃ便利です。 今回はトークン生成、検証と脆弱性についてまとめました。 ざっくりまとめてるので網羅してないし説明不足な部分もあります。 JWTトークン生成の仕組み まずはトークン生成から。 フロントエンド側はユーザー・パスワードを送信バックエンド側はユーザー・パスワードが正しいかを検証しユーザー情報取得DBにユーザー情報が保存されてる前提で進めますパスワードはハッシュ化などしてくださいユーザー情報からpayloadを作成ユーザーIDなどが一般的payloadはデコードが容易なのでパスワードなどの機密情報は入れないハッシュ化するアルゴリズムなどの設定値を指定したヘッダーを作成ヘッダー・payloadをBase64エンコードするデコード可能5の値をバックエンド側が保持している秘密鍵でハッシュ化・署名5の値(ヘッダー、payload)
基本から理解するJWTとJWT認証の仕組み | 豆蔵デベロッパーサイト
これは、豆蔵デベロッパーサイトアドベントカレンダー2022第8日目の記事です。 JSON Web Token(JWT)の単語を目にすることがよくあると思いますが、それと一緒に認証と認可や、RSAの署名や暗号化、そしてOpenIDConnectやOAuth2.0までと難しそうな用語とセットで説明されることも多いため、JWTって難しいなぁと思われがちです。しかし、JWT自体はシンプルで分かりやすいものです。そこで今回は素のJWTの説明からJWS、そしてJWT(JWS)を使った認証を段階的に説明していきます。 おな、この記事はJWT全体の仕組みや使い方の理解を目的としているため、以下の説明は行いません。 RSAやHMACなど暗号化やアルゴリズムの細かい説明 JWTを暗号化するJWEとJSONの暗号鍵表現のJWKについて OpenIDConnectとOAuth2.0について 記事は上記のような内容
JWT（JSON Web Token）の紹介 | NHN Cloud Meetup
はじめに TOASTクラウドメッセージングプラットフォームサービスの1つであるPushに追加されたAPNs（Apple Push Notification service）JWT認証機能について、開発中に行った技術調査の内容を共有します。この記事は「JWTの概要」と「JWTをさらに詳しく」の2部構成になっています。「JWTの概要」では、JWTの構造や作成および検証方法について説明し、「JWTをさらに詳しく」では、JWTの特徴や使用事例について紹介します。JWTを利用した機能を開発する際や、JWTを使用する開発者の方に役立つ内容になれば幸いです。 気になった点があれば、LinkedInやGitHubからご連絡お願いいたします。 https://www.linkedin.com/in/jinho-shin-7a9b3292 https://github.com/gimbimloki JWT（J
client_secret_jwt によるクライアント認証 - Authlete
client_secret_jwt によるクライアント認証 概要 client_secret_jwt はクライアント認証方式のひとつです。OpenID Connect Core 1.0, 9. Client Authentication にて定義されています。 トークンリクエストにおいて、クライアントはメッセージ認証コード (MAC; Message Authentication Code) を署名部に含む JWT 形式のアサーションを生成し、リクエストに含めます。そして認可サーバーは、そのアサーションの署名とペイロードを検証し、クライアント認証を行います。 アサーションとして送信する JWT には署名・ペイロードに関していくつかの要件が定められており、認可サーバー側ではこの検証を行う必要があります。 認可サーバーは、client_secret_jwt 方式を用いたクライアント認証の処理を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloud IoT Core | Google Cloud