個人的に「Webサービスの公開前チェックリスト」を作っていたのですが、けっこう育ってきたので公開します。このリストは、過去に自分がミスしたときや、情報収集する中で「明日は我が身…」と思ったときなどに個人的にメモしてきたものをまとめた内容になります。 セキュリティ 認証に関わるCookieの属性 HttpOnly属性が設定されていること XSSの緩和策 SameSite属性がLaxもしくはStrictになっていること 主にCSRF対策のため。Laxの場合、GETリクエストで更新処理を行っているエンドポイントがないか合わせて確認 Secure属性が設定されていること HTTPS通信でのみCookieが送られるように Domain属性が適切に設定されていること サブドメインにもCookieが送られる設定の場合、他のサブドメインのサイトに脆弱性があるとそこからインシデントに繋がるリスクを理解してお

PESPAというアーキテクチャについて、みなさんご存じでしょうか？ これはWebにおける次世代のアーキテクチャを表しており、MPAやPEMPA、そしてSPAの欠点を解決し、シンプルかつプログレッシブエンハンスメントなアーキテクチャとなっている素晴らしいアーキテクチャのひとつとなっています。 そう、Remixフレームワークが採用しているアーキテクチャです。 このPESPAという概念について、Kent C.Doddsさんが、2022年の10月21日に投稿し話題を呼びました。 日本ではあまりまだ浸透していない概念ということもあり、本当に素晴らしいアーキテクチャと思想を兼ね備えていることから、今回その記事を翻訳しました。 みなさんがこれから開発していくアプリケーションに、ぜひこのアーキテクチャを採用していただきたいと願っております。 この記事は、あくまで翻訳であり、意訳の部分も含まれているため間違

この記事は？ それぞれが専門にしている領域に関わらず、Webエンジニアリングの基礎知識として知っておきたいと思う事を対話形式でまとめていく。知識はインプットだけではなく、技術面接や現場では、専門用語の正しい理解をもとにした使用が必要なので、専門がなんであれ理解できるようなシンプルな回答を目指したものになっています。解答の正しさはこれまでの実務と各分野の専門書をベースに確認してはいますが、著者は各技術の全領域の専門家ではなく100%の正しさを保証して提供しているものではないので、そこはご認識いただき、出てきたキーワードの理解が怪しい場合各自でも調べ直すくらいの温度感を期待しています。なお、本記事で書いている私の回答が間違っている箇所があったりした場合、気軽にコメント欄などで指摘いただけるとありがたいです。 Webエンジニアリングの基礎 この記事でカバーしている領域は、以下のような領域です。W

Intro Public Suffix List (PSL) は、現在の Web プラットフォームの一端を支えている非常に重要な要素だ。 実はこれが、少数のボランティアにより GitHub でメンテナンスされた、単なるテキストリストであることは、あまり知られていないかもしれない。 最近、このリストへの追加リクエストがあとを絶たず、問題になっている。 そもそも PSL とは何であり、今どのような問題が起こっているのかについて解説する。 Public Suffix List とは何か PSL を解説するには、まず関連する用語について整理する。 Top Level Domain (TLD) 例えば、このブログのドメインは blog.jxck.io であり、これは筆者が取得したドメイン jxck.io のサブドメインだ。 jxck.io は、 .io という TLD のサブドメインを販売しているレ

HTTPといえばHTML/CSS/JavaScriptや画像などの小さめの限りがあるデータを手に入れるためによく使われている印象がある。REST APIのようなHTTPを使ったAPIでも限りのあるデータがリクエストとレスポンスになる印象が強い。

Webフルスタックエンジニアになるためのチェックリスト Zennでの投稿にあたって この記事は、2020/03/22に自分のgithubリポジトリで公開していた内容を、Zennのgithubリポジトリ連携機能を用いて一般公開したものです。 投稿にあたって、Zennの記事連携フォーマットに準拠する以外の修正は加えておりませんので、一部Zennというプラットフォームの方針や雰囲気に合わない内容などあるかもしれません。あらかじめご了承ください。 はじめに 日本のWeb開発業界で「フルスタックエンジニア」になるために必要な知識を、個人的経験からまとめました。 フルスタックエンジニアの定義ですが、ここでは、 企業で開発リーダー/テックリードとして、Webブラウザアプリケーションを前提としたサービスの立ち上げからリリース、運用まで面倒を見られる。 というロールと仮定し、前提条件としては、どちらかという

なにこれ クロスプラットフォームアプリを開発する手段はいくつかありますが、とっつきやすそうなIonicについて調査しました。実装方法というよりは、全体像と、React Native・Flutterとの比較についてまとめています。 📝私はWeb開発の経験はありますが、Ionicの経験があるわけではなく、これからやってみようという段階です。 そのため本記事はあくまでも調査結果をまとめたもので、実際の開発の経験に基づくものではありません。 Ionic概要 クロスプラットフォームアプリをWebの技術（HTML/CSS/JS）を使って作るためのフレームワークです。 iOS・Android・Electron・Web(PWA)などの複数の環境で動作させ、ネイティブ機能にアクセスするためのCapacitorと、 WebComponentベースのネイティブ風なUI Componentから構成されます。 U

Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、 Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、 3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る

Pornhubをご存知だろうか。 答えは当然Yesだろう。 ところがその本当の実態について我々は理解しているだろうか。 WikipediaのPornhubページには興味深い事柄が書いてある。 YouTubeに次ぐ世界第2位の動画共有サイト 360度動画を提供しており、PlayStation VRで視聴できる 上下運動で発電できるリストバンドを発明した 宇宙空間でポルノを撮影すると発表した VPNHubというVPNサービスを開始した これらのいくつかを恥ずかしながら私は知らなかった。 この恥ずかしさがモチベーションとなり、私はPornhubのポルノ以外のことを調べた。 出てくるものはアダルトコンテンツばかりだったが、 以下の3つのページに出会うことができた。 Pornhub Insights :: Digging deep into the data Interview with a Por

「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン・アクセシビリティ Figmaチームが本国から来日！　Figma Tokyo Meetup レポート – Yahoo! JAPAN Tech Blog 私も参加していましたが、日本でのFigmaの盛り上がりを改めて感じました。 どんなふうに見えてるの？　色覚に配慮したUI設計事例 #UI – Yahoo! JAPAN Tech Blog Yahoo!ファイナンスの例などを挙げ、色覚に配慮したUI設計について書かれています。 コーディング CSSフレームワークBulmaについて – 一休.com Developers Blog CSSフレームワークの比較など。以前はBootstrapユーザ

おはようございます、ritou です。 qiita.com これの初日です。 なんの話か 皆さんは今まで、こんな記事を目にしたことがありませんか？ Cookie vs JWT 認証に JWT を利用するのってどうなの？ JWT をセッション管理に使うべきではない！ リンク貼るのは省略しますが、年に何度か見かける記事です。 個人的にこの話題の原点は最近 IDaaS(Identity as a Service) として注目を集めている Auth0 が Cookie vs Token とか言う比較記事を書いたことだと思っていますが、今探したところ記事は削除されたのか最近の記事にリダイレクトされてるようなのでもうよくわからん。 なのでそれはおいといて、この話題を扱う記事は クライアントでのセッション管理 : HTTP Cookie vs WebStorage(LocalStorage / Sess

こんにちは！もう新卒エンジニアとは言えなくなった西尾です！（社会人2年目） 最近、世界的に流行っているWebスキミングについて調べていたのですが、意外と日本語の情報が少なかったので、今回はWebスキミングについて調べた内容をブログにまとめてみました。 Webスキミングとは Webスキミング（Web skimming）とは、その名の通り Web版のスキミング です。具体的には、ECサイトなどの決済画面に不正なスクリプトを埋め込み、ユーザがフォームに入力したクレジットカード情報を窃取する攻撃です。 一般的には「フォームジャッキング」とも呼ばれている攻撃ですが、個人的には「Webスキミング」の方が直感的に分かりやすいかなぁと思ってます。 Webスキミング自体は数年前から発生していたようですが、昨年イギリスの大手航空会社が大きな被害を受けたことがきっかけで有名になり、最近は世界中でスキミング被害が

セキュリティ・キャンプ全国大会 2019 開発と運用トラックで提供した講義の資料の一部です。誤りに気がついたら、ぜひ @y0n3uchy あるいは @lmt_swallow にお知らせください。

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな

目次 はじめに HTMLレンダリング HTMLレンダリング ：ブラウザでHTMLを受け取り画面表示 HTMLレンダリング ：JavaScriptでレンダリングして画面表示 HTMLレンダリング ：WEBページの初期表示の各段階 サーバーサイド側の処理 サーバーサイド側：Node.jsという実行環境＆開発環境 クライアントサイトレンダリング クライアントサイトレンダリング：リアルDOMと仮想DOM サーバーサイドレンダリング おまけ：参考にしたリンクなど はじめに Web開発で「フロントエンドはモダンな感じでやりましょう。jQueryではなしに。」ということになったのですが、その時の僕は「モダンな感じ」なるものが示す「最新の技術動向」に疎くて話についていけませんでした、。 反省し、WEBフロントエンドとサーバーサイドあたりの技術動向のアウトラインをざっくりと整理してみることにしました。 よく

当ブログでもCSSのさまざまなテクニックについて記事にしていますが、今回は表面的なものではなく、CSSの本質的なパフォーマンスに関することを紹介します。 パフォーマンスを意識すると、実装も変わってくると思います。 Things nobody ever taught me about CSS. by Charlie Gerard 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの用語 CSSのパフォーマンス CSSの記述の順番 リソース はじめに この記事は私がこれまで一緒に働いたことのある人を批判するものではありません。個人的にCSSについて調べて、学んだことのリストです。 多くのデベロッパーがCSSについてあまり気にかけていないという事実は目新しいことではありません。ネット上や、友人・同僚と話すことでそのことに

CSSのセレクタがいまいち、という人にお勧めです！ セレクタの使い方が分かりやすくまとめられたPDFのチートシートを紹介します。 このチートシートは通常のチートシートだけでなく、ゲーム版もあり、CSSのセレクタをどれくらい知っているか確認することもできます。

Webサイトやスマホアプリのデザイナー・制作者、そしてクライアントにも役立つUI要素のデザインのチェック項目を紹介します。 ページに必要な要素、UIコンポーネントに必要な要素、あると便利な要素がまとめられています。デザインを始める時、そして最終的な成果物をチェックする時に、デザインに必要な要素が欠けていないか確認することができます。 Pages: Login このページに必要な要素 ロゴ 完全なロゴ、もしくはシンボルマークのどちらか。 タイトル ユーザーに何をさせたいかに関するコンテキスト。 アカウントの識別 ユーザーの一意の識別子。 パスワード 自分のアカウントにアクセスを許可するための安全なプライベートコード。 パスワードのリセット ユーザーは自分のパスワードを忘れてしまうかもしれません。 登録するためのリンク ユーザーがアカウントを持っていない場合は、このページにアクセスします。 オ

昨今、アプリケーションをつくるのに、様々な手段があります。「フルサーバーレス」はその一つで、マネージドサービスを駆使し効率的にアプリケーション開発を行うことができます。とはいえ、「アプリ開発」とひとことでいっても、必要な作業は多岐に渡ります。本セッションでは、Amazon EC2 に Play Framework + Scala で Webアプリ を構築する流れを比較対象の例にとり、サーバーレスで開発する場合の「考え方」を話します。言語や実装パターンの話よりも、典型的なWebアプリの開発手法がサーバーレスにおいても適用できるのか、またはまったく考え方を変えなければいけないのか、という議論が焦点です。