長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
POSTリクエストを冪等処理可能にするIdempotency-Keyヘッダの提案仕様 - ASnoKaze blog
はじめに HTTPリクエストには冪等なものと非冪等なものがあります。 仕様上、GETやOPTIONSは冪等であり、同じリクエストであれば何度行っても問題ありません。そのため通信上エラーが起こっても自動的にリトライすることが出来ます。 一方で、POSTリクエストは冪等ではありません。同じリクエストでも複数回行うと、結果が変わってしまいます。投稿や課金APIであれば2重に処理されてしまいます。 POSTリクエスト中にタイムアウトが発生した時に、サーバに処理される前にタイムアウトしたのか、サーバが処理したあとにレスポンスを返そうとしたところでタイムアウトしたのかクライアントは区別できません。そのため、POSTリクエストを一概にリトライすることは出来ません。 そこで、リトライにより複数回同じPOSTリクエストを受け取っても、同じものと識別できるように識別子をHTTPリクエストに付加できるようにする
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
SameSite属性とCSRFとHSTS - Cookieの基礎知識からブラウザごとのエッジケースまでおさらいする - Flatt Security Blog
こんにちは、 @okazu_dm です。 この記事は、CookieのSameSite属性についての解説と、その中でも例外的な挙動についての解説記事です。 サードパーティCookieやCSRF対策の文脈でCookieのSameSite属性に関してはご存知の方も多いと思います。本記事でCookieの基礎から最近のブラウザ上でのSameSite属性の扱いについて触れつつ、最終的にHSTS(HTTP Strict Transport Security)のような注意点を含めて振り返るのに役立てていただければと思います。 前提条件 Cookieについて Cookieの属性について SameSite属性について SameSite属性に関する落とし穴 SameSite属性を指定しなかった場合の挙動 SameSite: Strictでも攻撃が成功するケース 例1: スキームだけ違うケース 例2: サブドメイ
開発イテレーション偏重 - 兼雑記
開発イテレーションを早くすれば、かなりの問題が勝手に解決される、と信じています。なんか最近、他の要素を軽視しすぎていたり、特にイテレーション速度に影響しなさそうなことすらしている気がしていて、信仰とかのレベルかもしれない、という気がしてきたので、ちょっと書いてみようかなと。主に C++ の話です。 仕事とかしてると良い判断力が求められたりしますが、判断というのは結構難しいですよね。アプローチ A と B で悩んだ時に、手が速ければ両方できたりします。開発イテレーションを無限に速くすると、必要とされる判断力はゼロに漸近していきます。やったね。 2手で変更の正当性を高速に確認できるようにする make (かその他のビルドコマンド)てやったらビルドができて、 make check (かその他のテストスクリプト)てやったら遅くないテストが全部走る、という体勢が好きです。試すためにはあっちのディレク
This article lists the most important security headers you can use to protect your website. Use it to understand web-based security features, learn how to implement them on your website, and as a reference for when you need a reminder. Security headers recommended for websites that handle sensitive user data: Content Security Policy (CSP) Trusted Types Security headers recommended for all websites
User-Agent Client Hints
This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups. 1. Introduction This section is non-normative. Today, user agents general
固定のヘッダーがアンカー先コンテンツを隠してしまう問題
固定のヘッダーがアンカー先コンテンツを隠してしまう、これはしばしば問題になることがあります。 この問題にはいくつかの解決策があるので、ここでは5つの解決策を紹介します。実装サイトの参考としてリンクも記載しておきますが、記事を書いた当時のものなので現在の実装とは異なる可能性があることにご注意ください。 1. JavaScript JavaScriptでの実装は説明が不要なのでここでは省略します。画像の高さだったり、考えることもあるのであえてこの方法を使うメリットが思いつかないのであれば、この方法で実装する必要はないはずです。 2. 空の Element を利用する 実際のリンク先にIDを付与するのではなく空の別の要素を置いておいて、それを絶対配置で飛ばしておく方法になります。
ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。
HTML Boilerplates
Start your web project by generating and downloading your custom HTML Boilerplate.
第三回目のノータブルコードで取り上げるのは、分散バージョン管理システムGitのヘッダファイル「banned.h」です。 banned.h とは何か？ これは何かと言うと、その名前の通り「危ない関数の利用を禁止する」ためのヘッダです。実際にコードを見てみましょう。 #ifndef BANNED_H #define BANNED_H /* * This header lists functions that have been banned from our code base, * because they're too easy to misuse (and even if used correctly, * complicate audits). Including this header turns them into compile-time * errors. */ #define
GitHub - Immediate-Mode-UI/Nuklear: A single-header ANSI C immediate mode cross-platform GUI library
This is a minimal-state, immediate-mode graphical user interface toolkit written in ANSI C and licensed under public domain. It was designed as a simple embeddable user interface for application and does not have any dependencies, a default render backend or OS window/input handling but instead provides a highly modular, library-based approach, with simple input state for input and draw commands d
ALBの無効なリクエストヘッダ削除(Drop Invalid Header Fields)設定を試してみた | DevelopersIO
AWSチームのすずきです。 Application Load Balancers (ALB)、 ロードバランサー属性の設定として「Drop Invalid Header Fields」が追加され、 無効なHTTPリクエストヘッダをALBで削除可能になりました。 その動作を確認する機会がありましたので、紹介させていただきます。 AWS Documentation Application Load Balancers: load-balancer-attributes routing.http.drop_invalid_header_fields.enabled Indicates whether HTTP headers with invalid header fields are removed by the load balancer (true) or routed to target
本記事は リクルートライフスタイル Advent Calendar 2019 1日目の記事です。 CETチーム の寺下です。 本日は 2019 年 12 月 1 日ですが、12 月といえば Advent Calendar ですね。 リクルートライフスタイルも Advent Calendar をやっていきます。 さて、初日となる本日は Istio 検証で得られた知見について書いていきます。 我々のチームでは 2015 年頃から基盤開発に Kubernetes を利用しており、 最近では Observability や Traffic Management のために Kubernetes 上に Istio の導入も行っています。 Istio は Kubernetes 上のトラフィック管理やテレメトリを行ってくれる Service Mesh であり、 例えば Istio の Traffic Ma
Improving user privacy and developer experience with User-Agent Client Hints | Privacy & Security | Chrome for Developers
Client Hints enable developers to actively request information about the user's device or conditions, rather than needing to parse it out of the User-Agent (UA) string. Providing this alternative route is the first step to eventually reducing User-Agent string granularity. Learn how to update your existing functionality that relies on parsing the User-Agent string to make use of User-Agent Client
（2022年11月25日追記） 私の本が株式会社インプレス R&Dさんより出版されました。この記事の内容も含まれています。イラストは鍋料理さんの作品です。猫のモデルはなんとうちのコです！ 感想を書いていただけるととても嬉しいです！ （2022年8月3日追記）この記事の内容はこちらの本でも読めます。無料公開している「3章 モックアップを作ろう」に相当します。本の方がより詳しく説明しています。 はじめに 現在、とあるAPIを販売するWEBサービスをReactで作成中です。先週は環境構築を行いましたが、今週はモックの作成を進めました。TailwindCSSのUIコンポーネントを公開しているページがたくさんあるので、気に入ったデザインを選んでコードをコピペすると画面モックがサクサク作れてとても楽しいです。 コピペする前にこれを読もう コードをコピペすればきれいなデザインは再現できますが、セマンティ
Firebaseでサービスを公開するときに、最低限必要なセキュリティーのポイントをまとめています。 Firebaseは、現在もすごい勢いで開発が進んでいるので、セキュリティーに関するポイントやノウハウも日々更新されます。最新のドキュメントや、変更点を調べることをおすすめします。この記事を含め、ネットの記事は古い可能性があります。2022年前後でも、App Check導入、Cross service Rulesの導入、AuthenticationのIdentity Platform導入、Workload Identity連携の導入など、日々更新されています。 公式のFirebaseのセキュリティチェックリストは必ず目を通しましょう。 GCPインフラ Firebaseで使うGoogle Accountは個人のアカウントを使わないでGoogle Workspace/Cloud Identityの
GitHub - cnlohr/mini-rv32ima: A tiny C header-only risc-v emulator.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
アンカーリンク〜様々な状況に対応できるJavascript記述方法〜 | デザインやWEBに関する情報を発信する【まるログ】
アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1：ページ内リンク（ページ内アンカーリンクを押した際の挙動） $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
Server-Timing API W3Cによって策定されている各種Timing APIは、Webのパフォーマンスを計測するためのAPIです。そのうちServer-Timing APIは、サーバー側の処理に要した時間を示します。 Google Chromeではバージョン65より、レスポンスヘッダに付与したServer Timing APIの値がDeveloper ToolsのNetworkタブで表示されるようになりました。この機能により、サーバー側における処理時間を簡潔に確認することができるようになっています。 Server-Timingを使ってみる Node.jsでHello World!を表示するだけのコードをもとにして、Server-Timingを試してみましょう。 以下のコードでは、Server-Timingレスポンスヘッダに適当な値をセットしています。 const http =
Ajaxにおけるクロスドメインの問題を回避する方法 こんにちは！ぐち（@bloguchi）です。 先日ローカルでWeb開発をしていて、localhost内から外部のドメインが提供しているWebAPIを実行しようとしたときに直面した問題について、今更ながら備忘録としてご紹介します。 クロスドメインリクエスト(XDP) 冒頭で軽くご説明した通り、あるドメインで読み込まれたHTMLページ(foo.com)から、Javascriptなどブラウザ上で動作するプログラミング言語によって、異なるドメイン(bar.com)のサービスに接続するとブラウザがエラーや警告を表示することがあります。 これが今回ご紹介したいクロスドメインの問題です。 何が問題なのか 通常HTMLというのは、ブラウザ上で表示され画面上に用意されたフォームやサービスをJavascriptなどのプログラミング言語によって実行します。この
HTTP ガイド リソースと URI ウェブ上のリソースの識別 データ URL MIME タイプ入門 よくある MIME タイプ www 付きと www なしの URL の選択 HTTP ガイド HTTP の基本 HTTP の概要 HTTP の進化 HTTP メッセージ 典型的な HTTP セッション HTTP/1.x のコネクション管理 プロトコルのアップグレードの仕組み HTTP セキュリティ Content Security Policy (CSP) HTTP Strict Transport Security (HSTS) X-Content-Type-Options X-Frame-Options X-XSS-Protection Mozilla web security guidelines Mozilla Observatory HTTP アクセス制御 (CORS) HTTP
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
CSS Flexboxでヘッダを実装する最近のテクニックのまとめ
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
Security headers quick reference | Articles | web.dev
幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator
ノータブルコード3 - 危険なバグを仕組みで予防する - 2020-02-12 - ククログ
Istio で実現する A/B テスト基盤 | Recruit Tech Blog
ReactとTailwindCSSでモックを作るのは楽しいぞ
Firebaseでサービスを公開するときに気を付けるセキュリティポイント
Server Timing APIでサーバーの処理時間を可視化する - Qiita
Ajaxにおけるクロスドメインの問題を回避する方法 | ぶろぐち
Access-Control-Allow-Origin - HTTP | MDN