サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
長い記事なので先に結論を書きます。 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 なページとのコミュニ
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
はじめに HTTPリクエストには冪等なものと非冪等なものがあります。 仕様上、GETやOPTIONSは冪等であり、同じリクエストであれば何度行っても問題ありません。そのため通信上エラーが起こっても自動的にリトライすることが出来ます。 一方で、POSTリクエストは冪等ではありません。同じリクエストでも複数回行うと、結果が変わってしまいます。投稿や課金APIであれば2重に処理されてしまいます。 POSTリクエスト中にタイムアウトが発生した時に、サーバに処理される前にタイムアウトしたのか、サーバが処理したあとにレスポンスを返そうとしたところでタイムアウトしたのかクライアントは区別できません。そのため、POSTリクエストを一概にリトライすることは出来ません。 そこで、リトライにより複数回同じPOSTリクエストを受け取っても、同じものと識別できるように識別子をHTTPリクエストに付加できるようにする
【セキュリティチームブログリレー2回目】 こんにちは。エンジニアリンググループの山本です。 セキュリティチームは、エンジニアリンググループ全体のセキュリティを向上させるためのバーチャルチームなのですが、各プロダクト開発チームのサービスをチェックして、協力しながら全体のセキュリティを向上させていくのがミッションです。 そのお仕事の一環として「この部分、セキュリティヘッダが足りないから入れてください！」というやりとりを日常的に行なっています。 今日はこの「セキュリティヘッダ」というものが一体何なのか、今さら人に聞けないアレコレを取りまとめてみたいと思います。 セキュリティヘッダ警察の日常の図(もちろん冗談です) セキュリティヘッダ そもそもセキュリティヘッダとは？ 比較的安全なセキュリティヘッダ X-Content-Type-Options X-XSS-Protection Strict-Tr
Chrome 113 で、 DevTools の Network ペインで HTTP ヘッダを好きなように編集して、いろんな状態をお試しできるようになっている。 What's New in DevTools (Chrome 113) - Chrome Developers で紹介されている。 GitHub から example.com を fetch してみる GitHub の CSP ヘッダを上書き example.com の CORS のヘッダを上書き 途中で指定したフォルダの中身は何？ 上書きをやめるには？ 感想 GitHub から example.com を fetch してみる 試しに、 CSP で外部への通信がそれなりに制限されている GitHub から、 example.com への fetch を成功させてみる (外部サイトへの通信は、認証情報や秘密の情報の漏洩などに気をつ
スクロールした時にヘッダの高さが縮んで上部に固定表示させるWebページを見たことがあると思います。今まではJavaScriptを使用する必要がありましたが、CSSのposition: sticky;を一工夫して使用することで簡単に実装できます。 高さを縮ませるのはヘッダに限らず、パネルやバナーなど他の要素でも簡単に実装でき、汎用性にも優れていると思います。 Shrinking Header on Scroll Without JavaScript by Håvard Brynjulfsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 デモページのデザインがシンプルなので、一見見落とすかもしれませんが、ページをスクロールするとヘッダの高さが縮んで上部に固定表示されます。 デモページ 仕組みは、簡単です。 ヘッダは外側と内側の2
CSS Flexboxで、Webサイトのヘッダを実装する最近のテクニックを紹介します。 ロゴやナビゲーションの配置、各要素間のスペースの与え方、使用可能なスペースに検索フォームを広げて配置など、Flexboxを効果的に使用した実装方法です。 Building Website Headers with CSS Flexbox by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ヘッダの構造を確認 Flexboxの動作 ヘッダの実装バリエーション Flexboxでヘッダを構築するための便利なテクニック Flexboxで実装したヘッダのテンプレート 終わりに はじめに 私が初めてHTMLとCSSの基礎を学んだとき、Webサイトのヘッダを実装することは非常に難しい作業の1つでした。2014年頃のこ
テーブルのヘッダを上部に固定するのは、position: sticky;で簡単に実装できます。ヘッダだけでなく、テーブルの左端のセルも固定させたい場合は、どう実装すればよいでしょうか？ JavaScriptがないと実装できないように思うかもしれませんが、position: sticky;を効果的に使用することで実装できます。テーブルのヘッダと左端のセルの両方を固定させるCSSのテクニックを紹介します。 A table with both a sticky header and a sticky first column 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 tableのセル、thやtdをposition: sticky;させることはこの記事で解説しました。テーブルのヘッダを上部にくっつけて固定させるのは簡単です（デモペ
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
【悲報】 五輪公式Twitterアカウントのヘッダーがこっそり「2022年北京大会」に差し替え 1 名前：potato ★：2021/02/09(火) 21:21:20.41 ID:H2ObGRRx9 【悲報】東京五輪 中止確定か！？ 公式ヘッダーがこっそり北京に挿げ替えられた模様 http://blog.livedoor.jp/rbkyn844/archives/9754354.html 五輪公式アカウント @Olympics https://twitter.com/Olympics 3: ニューノーマルの名無しさん 2021/02/09(火) 21:22:11.74 ID:0YF7z9Gh0 あああああああああああ（確信） 8: ニューノーマルの名無しさん 2021/02/09(火) 21:23:02.09 ID:NggULVJL0 はいおわり 13: ニューノーマルの名無しさん 20
Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。 これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。 Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up. by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Scroll-Driven Animationsでスクロール方向を検出する transition-delayプロパティを使ったテクニック ヘッダをスクロール時に表示
新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css headers.css -GitHub テンプレートは、以下に基づいて実装されています。 シンプルな実装 レスポンシブに完全対応 簡単に編集できるようにSassを使用 アクセシブル オープンソースのプロジェクトで、商用でも無料で利用できます。 2020年9月現在、17種類のヘッダがあり、今後さらに増やす予定とのことです。
HTTP ヘッダインジェクション （HTTP Header Injection）は、ユーザーから受け取ったデータを Web アプリケーション側で適切にチェックせずに、HTTP レスポンスヘッダに反映させてしまうことで発生する脆弱性・攻撃手法です。 改行コードが起因となることから、CRLF インジェクション（CRLF Injection）とも呼ばれています。 本記事では HTTP ヘッダインジェクションの概要と発生する仕組み、対策方法について、主に Web 開発者に向けてわかりやすく解説していきます。 HTTP ヘッダインジェクションとはなにかHTTP ヘッダインジェクションは、ユーザーがフォームや URL で入力するリクエストパラメーターやクエリパラメーターを、想定しないデータに改変して送信することで、HTTP レスポンスヘッダに新たなヘッダ要素を追加したり、レスポンスボディに任意の文字列
CDNのキャッシュを制御する「CDN-Cache-Control」を新しく定義する提案仕様「The CDN-Cache-Control HTTP Response Header Field」が出ているので、簡単に紹介する。 2021/10/16 追記: 最新仕様では「Targeted HTTP Response Header Fields for Cache Control」と呼ばれる はじめに HTTPではキャッシュを制御するのにCache-Controlヘッダを使用しますが、クライアントとは別にCDNに対して個別にキャッシュの制御を行いたい場合もあります。 その用途のために使用する「CDN-Cache-Control」を新しく定義しようというのが「The CDN-Cache-Control HTTP Response Header Field」です。 この仕様は、Akamai, Fas
現在のWebでは、セキュリティ上レスポンスヘッダで色々なものを指定します。Webデベロッパーは個別に指定しなければなりません。 そこで、セキュリティ関連のヘッダを推奨デフォルト値に設定できるようにする「Baseline ヘッダ (Opt-into Better Defaults)」が、GoogleのMike West氏によって提案されています。 まだたたき台であり、これからW3CのWebAppSec WGで議論されている予定になっています。 Baseline ヘッダ 次のようにレスポンスヘッダを指定します。 Baseline: Security=2022これは、次のヘッダを送信するのと同様です。 Content-Security-Policy: script-src 'self'; object-src 'none'; base-uri 'none'; require-trusted-ty
固定のヘッダーがアンカー先コンテンツを隠してしまう、これはしばしば問題になることがあります。 この問題にはいくつかの解決策があるので、ここでは5つの解決策を紹介します。実装サイトの参考としてリンクも記載しておきますが、記事を書いた当時のものなので現在の実装とは異なる可能性があることにご注意ください。 1. JavaScript JavaScriptでの実装は説明が不要なのでここでは省略します。画像の高さだったり、考えることもあるのであえてこの方法を使うメリットが思いつかないのであれば、この方法で実装する必要はないはずです。 2. 空の Element を利用する 実際のリンク先にIDを付与するのではなく空の別の要素を置いておいて、それを絶対配置で飛ばしておく方法になります。
普段**"HTTPヘッダ"**と呼んでるものについて、仕様上は "header fields" と呼ぶらしかったり、自分でも整理できていなかった。 今後もHTTP関連の仕様を読んでいく上でも理解しておきたかったので、この記事では、下記の用語について整理していく HTTP field header/trailer field field line HTTP セマンティクス まず、参照するドキュメントについて簡単に補足します。今回触れる用語は、HTTPセマンティクスの仕様である「HTTP Semantics(ドラフト版)」で定義されています。 HTTPセマンティクスとは、HTTPメッセージ(HTTPメソッドや、レスポンスコード、フィールド)の意味の定義です。 各HTTP/1.1~HTTP/3の仕様ではこのHTTPメッセージをどのように送るか(例えば、HTTP/2ではストリーム上のフレームで送信
こんにちは。私ははてなブログの「Under Shirt」というテーマを使っていますが、今回はヘッダ画像を変更してみました。 他の「Minimalism」や「Brooklyn」等でも同じように設定ができます。 フォントも変えてみましたが、一番の変更点は横幅いっぱいに大きく広げたこと！ 縦幅も少しだけ大きくしてみました。 before after このような感じです♪ 簡単にできますので、ご紹介したいと思います。 ヘッダ画像の作成 はてなフォトライフでアップロード はてなブログでの設定 既存のヘッダー画像の消去 タイトル下の設定 さいごに ヘッダ画像の作成 ヘッダ画像を作成するといっても、今使っているヘッダを画像をそのまま使って大丈夫です。 使うのはCanvaというサイトです。無料で使うことができます。 https://www.canva.com/ サイトで右上にある「デザインを作成」をクリッ
この記事はRuby Advent Calendar 2022の第20日の記事です。前日の記事は@ydahさんによる「RuboCopのバージョンを最新に保つ技術」でした。 2022年11月22日に、Ruby cgi gemのHTTPヘッダインジェクション脆弱性CVE-2021-33621が発表がされました。 CVE-2021-33621: HTTP response splitting in CGI RubyのCGIライブラリにHTTPレスポンス分割脆弱性があり、秘密情報が漏洩する - HackerOne CGI::Cookieクラスにおけるセキュリティ上好ましくない仕様および実装 - HackerOne 私はHackerOneを通じてこの脆弱性を報告しました。この記事では、当該脆弱性の概要と発見の経緯などについて報告します。 概要 脆弱性発見の経緯 影響を受けるアプリケーション 影響 対策
タイトルと ↓ のスクショで出落ちという感じ……。 https://aws.amazon.com を開いたときの様子 CDNだったり、Varnishのようなキャッシュ系のミドルウェアの調査やデバッグをしているときは、ブラウザのDevToolsを使って、Cache-Control レスポンスヘッダだったり X-Cache レスポンスヘッダのようなレスポンスヘッダの様子をめちゃくちゃ睨みつけることになると思う。こういう仕事をしているときには、リロードしては新しいリクエストを選択し直して睨みつける、というような操作を繰り返すことになりがち。 ところが、ネットワークタブのリクエスト一覧表示の表みたいなやつには任意のレスポンスヘッダを表示することができるので、こうすると1クリックの手間が省けて嬉しいねという話。 やり方はこれだけ！ ネットワークタブのリクエスト一覧表のヘッダー部分を右クリックし、コン
NICからの割り込みを適切なCPUに振り分けられるようなHintをIPヘッダオプションとして定義する「Multiple Core Performance Hint Option」という提案が提出されています。（特許としても申請中とのこと） ざっくり眺めて見ようかと思います。ここらへん詳しいわけではないので、間違いがあればご指摘ください。 背景 10Gbpsなどのトラフィックを処理する場合、NICからの割り込みを一つのCPUコアで処理しきれないことがあります。 NICからの割り込みを複数のCPUコアで分散する仕組みとして、Linuxでは「Receive Side Scaling (RSS)」、「Receive Packet Steering (RPS)」、「Receive Flow Steering (RFS)」などの仕組みがあります。 このとき、同じ通信フローの処理は同じコアで処理するのが
AWS Lambdaで突如としてHTTPヘッダが消失し、それにより悩まされることとなった日の経験を共有します。この問題がどのように生じ解決に至ったのか、また、私たちが学んだ教訓について述べていきます。 対象のLambda関数 今回問題が起きたLambda関数では、ランタイムにNode.jsを利用していました。Lambda関数の中には、外部のAPIサーバに対するリクエスト処理が含まれます。 環境情報は以下の通りです。 ランタイム: Node.js 18 (18.18.2) リクエストライブラリ: ky v1.0.1 エラーの発生 ある時、APIサーバからのレスポンスが"415 Unsupported Media Type"というエラーで返ってくるようになりました。エラーメッセージは以下のようなものです。 問題が起きる前は一度も発生していないエラーでしたが、一度発生した後は、全てのリクエストが
こんにちは。私ははてなブログの「Under Shirt」というテーマを使っていますが、今回はヘッダ画像を変更してみました。 他の「Minimalism」や「Brooklyn」等でも同じように設定ができます。 フォントも変えてみましたが、一番の変更点は横幅いっぱいに大きく広げたこと！ 縦幅も少しだけ大きくしてみました。 before after このような感じです♪ 簡単にできますので、ご紹介したいと思います。 ヘッダ画像の作成 はてなフォトライフでアップロード はてなブログでの設定 既存のヘッダー画像の消去 タイトル下の設定 さいごに ヘッダ画像の作成 ヘッダ画像を作成するといっても、今使っているヘッダを画像をそのまま使って大丈夫です。 使うのはCanvaというサイトです。無料で使うことができます。 https://www.canva.com/ サイトで右上にある「デザインを作成」をクリッ
[アップデート] Amazon CloudFront がオリジン Cache-Control ヘッダーの stale-while-revalidate と stale-if-error をサポートしました | DevelopersIO[アップデート] Amazon CloudFront がオリジン Cache-Control ヘッダーの stale-while-revalidate と stale-if-error をサポートしました いわさです。 CloudFront ではオリジンの Cache-Control で個々のオブジェクトに対するキャッシュの挙動を制御することが可能です。 本日のアップデートでstale-while-revalidateとstale-if-errorを CloudFront でも利用出来るようになりました。 それぞれの仕様は以下で確認出来ます。 stale-while-revalidateディレクティブは、キャッシュの有効期間が切れた後も一定期間は古いキャッシュを利用することが出来ます。 その間にバックグラウンドで非同期でオリジンレスポンスを取得してキャッシュを最新化することが出来る仕組みで
![[アップデート] Amazon CloudFront がオリジン Cache-Control ヘッダーの stale-while-revalidate と stale-if-error をサポートしました | DevelopersIO](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f17d6fdb640a27970efada177996eba4546025db8%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fdevio2023-media.developers.io%252Fwp-content%252Fuploads%252F2022%252F08%252Famazon-cloudfront.png&f=jpg&w=240)
CloudFrontのS3 Originにはhostヘッダーを転送してはいけない - KAYAC Engineers' BlogSREチームの長田です。 CloudFrontでstaticなファイルを配信しようとした時に少々ハマったのでそのメモです。 TL;DR CloudFront distributionのS3 Originは、Managed Policyの Managed-AllViewer を使うと機能しない。 何をしたのか statcなファイルを配信する要件があり、その対応としてCloudFront distributionのOriginにS3を設定しました。 CloudFrontのOrigin Access Identity(OAI)を作成し、S3 bucket policyにはこのOAIからのAPIリクエストのみを受け付けるよう設定しました。 docs.aws.amazon.com いざ配信用URLにHTTPリクエストすると以下のようなエラーになってしまいました。 <Error> <Code>Sign
はじめに こんにちは、株式会社iimonでフロントエンドエンジニアをしている木村です。 本記事はアドベントカレンダー14日目の記事になります！ cssって奥が深いですよね。勉強した気になっても自分の思い通りに一発でなってくれたことがありません。そんな中で、以前いつにも増して詰まった実装がありました。 「スクロールバーを縦と横に常時表示する」というものです。 入社して１ヶ月経たないぐらいに取り組んだこの実装、あまり理解できずに実装していた部分も大きいです。入社して半年と少し経った今なら、もっとちがう方法で、ちゃんと理解して実装できるんじゃないかとこの記事を書いてみました。 まだまだ勉強中のため、間違い等ありましたらご指摘お願い致します！ やりたいこと 固定の要素の中に大きな要素を入れて、ヘッダーは固定しつつ縦横にスクロールを常時つけたい 横のスクロールをした時はヘッダーも一緒にスクロールする
はてなブログでは、はてなにログインした状態でブログを開くと、記事を新しく書いたり、ブログを管理することができるヘッダメニューを表示しております。 2013年より現在のデザインで表示しておりましたが、今回ヘッダメニューを見た目にも大きくリニューアルする事になりました。 旧ヘッダメニュー 新ヘッダメニュー リリース日：2024年2月1日（木） 主な変更点としては縦幅を長くし、また常にメニュー上に表示されていたいくつかの項目を右から展開されるエリア内に格納しています。 はてなブログトップページ、はてなブログ管理画面のヘッダメニューはリリースと同時に新しくなりますが、ブログ表示画面に関しては1ヶ月程度新しいヘッダーメニューを適用して確認ができる期間を設けます。デザインの設定によって表示に影響を与える可能性があるので、ご自身のブログにて表示崩れが起こらないかをご確認ください。確認期間中は、新しいヘッ
こんにちは！kintone フロントエンドリアーキテクチャプロジェクト (フロリア) で、エンジニアとして活動している @nissy_dev です。 以前投稿したチーム紹介記事の中で、コンポーネント単位での共通ヘッダー部分の React 化に取り組んでいることを紹介しました。それから約半年の期間を経て、React 化した共通ヘッダーを全ページへ適用することができました。kintone の７月版のアップデート情報にも記載されています。 今回は、このリリースの流れや技術的な詳細について紹介したいと思います。技術的な内容については、昨年の 12 月にマイクロフロントエンドに挑戦しているという記事を公開しているので、マイクロフロントエンドを実際に適用してみた感想などにも触れたいと思います。 目次 React 化した共通ヘッダーの全ページへの適用 リリースの詳細な流れ Closure Tools に
2022/7/24: Plack::Middleware::ReverseProxyが、X-Forwarded-Forをサポートしていますよ、と教えていただいたので、記載を修正しました。 @karupanerura++ Scalatra 3.0.0-M1がリリースされた。Scala3対応だ、めでたい。 github.com 最近Scalatraへあまり貢献できていなかったので、いくつかのコンパイル時の警告を消すPRを出した。コードを見直す中で、ふとX-Forwarded-ForヘッダからクライアントのIPアドレスを取得する箇所が目にとまった。 /** * The remote address the client is connected from. * This takes the load balancing header X-Forwarded-For into account *
Private Relayをはじめ、Proxyを通してクライアントのIPアドレスをサーバに対して隠す技術が登場しています。 ところで、Webサービスはクライアントの位置情報によって出力する情報を変えたり、最適化を行う場合があります。JavaScriptのGeolocation APIから取得することもあるでしょうが、APIアクセスなどJavaScriptが利用できない場合もあるでしょう。その場合、IPアドレスから位置情報を類推する手段(GeoIPなど)があります。 IPアドレスから位置情報をある程度推測する手法は、IPアドレスが隠されると機能しなくなります。 Private Relayではユーザが望む場合は、Webサーバに対して大体の位置情報を提供するという観点について、IETF 111の発表で触れています。 (https://datatracker.ietf.org/meeting/11
フロントエンドエンジニアの嶌田です。アクセシビリティ推進グループに所属し、社内のプロダクトのアクセシビリティを高めるために日々奮闘しています。 LIFULL HOME'S は不動産・住宅情報の総合サービスです。住宅や住み替えに関する多くの情報を取り扱っており、サービス全体の規模はかなり大きいといえます。 レスポンシブデザインに対応したヘッダ・フッタの制作については以前に公開した記事で取り上げました。2022年5月から10月にかけて行われた今回のプロジェクトは、このヘッダ・フッタを LIFULL HOME'S サービス全体に展開することで、四散しているヘッダ・フッタを統合・刷新することを目的としたものです。 www.lifull.blog ヘッダ・フッタの統合・刷新により、サービス全体のアクセシビリティが向上し、キーボードやスクリーンリーダーのユーザーにとって利用しやすくなりました。改善の内
項目 内容 記事の種類 はてなブログの始め方、はてなブログの画像の使い方 SEO施策 関係なし SXO施策 関係なし 難しさ かんたん 重要さ 重要 次のような方にオススメ！ はてなブログのヘッダー画像を変えたい はてなブログのヘッダー画像の設定したい はてなブログのヘッダー画像の設定方法を知りたい ぴっぴ（@hiyoko_no_pippi）です！ ぴっぴもはてなブログのヘッダー画像の設定が分かりませんでした💦 そんなぴっぴでしたが、今はヘッダー画像の設定は完璧です！ ということで今回の「ぴっぴのはてなブログでアフィリエイト」は、はてなブログのヘッダー画像の設定方法について書きました。 こちらの記事をお読み頂くと、はてなで解説したブログにヘッダー画像を設置できるようになります。 なので最後までお読みいただて、素敵なブログ作りにお役立てください。 注意 ところで今回の記事ではヘッダー画像作
キャッシュのキーとしてURLが使われます。このときURLのクエリパラメータも含めて考慮されます。 特定のクエリパラメータは、分析や別様とでアクセスログに残すために使われたりしますが、提供するリソースが変わらない場合があります。そのケースであれば、クエリパラメータが付いてたとしても、キャッシュがあればキャッシュを使ってもらいたいものです (ここでキャッシュは、HTTPキャッシュ及び、prefetchやprerenderを指します)。 そのため、クエリパラメータが付いている場合の扱いを改善する No-Vary-Search レスポンスヘッダ が、Chromeの方中心に議論されています。 github.com 例 No-Vary-Search レスポンスヘッダの例として次のものが上げられている クエリパラメータのキーの順序を考慮しない No-Vary-Search: key-order特定のクエ
こちらはエムスリー Advent Calendar 2023の15日目の記事です。 デジスマチームの田口です。 去年のアドベントカレンダーでイベント駆動アーキテクチャの記事を書きましたが、ありがたいことにデジスマ診療のサービスとしての成長も著しく、開発も一層活発になっています。 去年と比較してどれくらいスケールしたかはCTOでありデジスマPdMでもある山崎さんがpmconf 2023で発表した資料にもあるので、興味がある方は是非ご覧ください。 speakerdeck.com 本記事では去年の記事でも少し触れた「冪等性」について、デジスマチームでの考え方・実装についてまとめます。 なぜ冪等性が重要か Idempotency-Key ヘッダ デジスマでの実装 おわりに We are hiring!! なぜ冪等性が重要か デジスマ診療（以降デジスマ）はQRコードによるチェックインや自動後払い、オ
こんにちは！株式会社アルダグラムのKANNAの開発お手伝いをさせて頂いているoubakiouです。 KANNAではサーバーサイドにRails+GraphQL Ruby、クライアントサイドでApollo Clientを利用していますが、どこの会社であれGraphQLであれRESTであれサービスが成長するとその裏側のパフォーマンスチューニングが必要になる場面が大なり小なり訪れると思います。KANNAもその例に漏れずユーザー数の増加や今までにない規模のお客様企業への導入に伴い、それまでは問題の無かったGraphQLクエリーのいくつかでレスポンス速度に問題が出始めていました。 本番環境においてはDatadogなどで監視環境を構築しスロークエリーやパフォーマンスの監視を行っていますが、開発環境においてはRails部分にrack-mini-profiler、graphql-ruby部分に独自Trace
「X-Forwarded-For」ヘッダをサポートしたAWS WAFで CloudFront経由の過剰リクエストをELBで止めてみた X-Foward-For のIPアドレスを判定対象としたレートベースの WAFルールを利用して、CloudFront経由でELBに到達した過剰なリクエストが遮断できる事を確認してみました。 AWSチームのすずきです。 2020年7月、AWS WAF が X-Forwarded-For ヘッダーをサポートするアップデートがありました。 X-Forwarded-For (XFF) ヘッダーのサポートが AWS WAF で利用可能に 今回 X-Foward-Forに示されたリクエスト元のIPを判定対象とした レートベースのWAFルールを作成、 CloudFront 経由で到達した過剰なリクエストを、ELB用の AWS WAF でブロックできる事を確認する機会があり
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
