S3経由でXSS!?不可思議なContent-Typeの値を利用する攻撃手法の新観点 - Flatt Security Blog
はじめに セキュリティエンジニアの齋藤ことazaraです。今回は、不可思議なContent-Typeの値と、クラウド時代でのセキュリティリスクについてお話しします。 本ブログは、2024 年 3 月 30 日に開催された BSides Tokyo で登壇した際の発表について、まとめたものです。 また、ブログ資料化にあたり、Content-Type の動作や仕様にフォーカスした形で再編を行い、登壇時に口頭で補足した内容の追記、必要に応じた補足を行なっています。 また、本ブログで解説をする BSides Tokyoでの発表のもう一つの題である、オブジェクトストレージについては、以下のブログから確認をすることが可能ですので、ご覧ください。 blog.flatt.tech なぜ今、この問題を取り上げるのか？ 従来のファイルアップロードにおいて、Content-Type の値を任意の値に設定すること
Intro Chrome 126 で筆者が実装した URL.parse が Ship された。 Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。 invalid URL の処理 new URL() によって、文字列の URL をパースすることができるようになって久しいが、この API は invalid な場合に例外を投げる。 例外処理をするよりも、先に URL としてパース可能かどうかを知るための URL.canParse() が提案され、先に実装が進んだ。 URL.canParse(str) // boolean しかし、これでは二回パースが必要になるため無駄が多い。 if (URL.canParse(str)) { // 1 回目のパース return new URL(str) // 2 回目のパース } そこで、失敗したら
Server-Sent Events (SSE) 目新しい技術というわけではありませんが、最近 Server-Sent Events (SSE) について言及する記事をよく見かけます。 何番煎じかはわかりませんが、個人的に興味があることと、正直触ってみたことがなかったので、コードを書きつつ調べてみました。 ※本記事で登場するサンプルコードは次のリポジトリで公開しています。 SSE とは SSE 自体を解説する記事は無数に存在するため詳細な説明は割愛しますが、簡単に言うと、サーバーからクライアントへ一方向の Push 通信を行うための仕組みです。 MDN にもページが存在するため、参考になります。 独自プロトコルを必要とせず、HTTP/1.1 でも動作するのも特徴です。 SSE の歴史 wikipedia に SSE に関するページが存在し、次のような記述があります。 SSE メカニズムは、
Bun は WinterCG の meeting に参加せず、標準から外れた拡張を利便性のために結構取り入れている。これら API を使ってしまうと Node.js や Deno、Cloudflare Workers などで扱えず相互運用性の問題となる。知らず知らずのうちに使ってしまわないようにまとめておく。 Jarred Sumner @jarredsumner 2024/02/18 02:45 JS runtimes obsess about web standards but web standards orgs are incentivized to only care about browsers Luca Casonato 🏳️🌈 @lcasdev 2024/02/18 05:48 @jarredsumner Just want to mention that we’ve
Build flutter apps with HTML/CSS and JavaScript | WebF | WebF
Backward compatible with web browsersWebF provides a subset of the W3C/WHATWG standard HTML/CSS and ECMAScript 2020 JavaScript support. WebF gives you the DOM API, Window, Document, and other Web APIs, and yields the same results and behavior as web browsers. High PerformanceExecute bytecode with optimized QuickJS engine, and render HTML/CSS in the same context as Flutter apps, saving 50% load tim
どうも。小林です。 なんとなく気になって社内の小林さんの数を数えたら7人いました。 ネットコムの小林シェアは1%以上あるようです。 さっそく本題です。 こちらの書籍、みなさまご存知でしょうか？ 「イラスト図解式 この一冊で全部わかるWeb技術の基本」は、2017年3月16日に発売され、発行部数は44,000部を超えています。 電子版も発行されているので、発行部数以上に多くの方に読んでいただけていることになります。 私が著者として初めて携わった書籍です。 安定して売れ続けておりますが、古くなってきた情報もあるということで、このたび改訂版を出すことになりました。 イラスト図解式 この一冊で全部わかるWeb技術の基本 第2版 改訂版となる第2版は2024年6月28日発売です。7年間も経つと技術は格段に進化しています。 Webの歴史や大まかな仕組みは変わらない一方、プロトコルのバージョンアップや表
「1 分 de Web 標準」のやり方 at Web Developer Conference 2024 #wdc2024 | blog.jxck.io
Intro 9/7 開催予定の Web Developer Conference 2024 では、 「1 分 de Web 標準」という LT 大会を予定しています。 CFP も募集中ですが、(筆者の周り以外では)聞き馴染みのないやり方だと思うので、この LT のやり方を解説します。 プロポーザル | Web Developer Conference 2024 - fortee.jp https://fortee.jp/web-dev-conf-2024/proposal/all 1 分 de Web 標準 「Web 標準」な何らかのトピックについて、 1 人 1 ページ 1 分で LT するというものです。 Slide スライドはこちらで用意する Google Slides を共有し、そこに割り当てられた 1 ページのみを使えます。 その 1 ページは、マスターで振るページ番号以外は、ど
先月の話になりますが、State of HTML 2023の結果が公開されました。フロントエンド開発者の方であれば、State of JavascriptやState of CSSをご存じの方もいると思いますが、これらのHTML版ということになります（アクセシビリティBlogでは過去にState of CSS 2023に見るアクセシビリティ関連機能という記事もあります）。State of HTMLのもう少し詳しい説明については、アンケートの設計を主導したLea Verou氏のBlog記事Help Design the Inaugural State of HTML Survey!を参照してください。 さて、内容の方を見ていきたいと思いますが、この記事では特にアクセシビリティの側面から調査結果を眺めていくことにします。（正面からの話題については、当社のUI開発者がフロントエンドBlogあるい
input[type="checkbox"]要素のswitch属性を使用したスイッチの実装メモです。まだ実務で使用したわけではないのであくまで自由研究としてですが、将来的にスイッチUIはinput[type="checkbox"]要素にswitch属性を指定して実装するケースが増えそうなので実装例としてまとめておきます。 switch属性とは現在のHTMLの仕様を提供しているWHATWGより提案された、スイッチUIを実装するためのinput[type="checkbox"]要素に新たに追加された属性です。switch属性を指定することでWeb標準でスイッチUIを作成することが可能となります。
![input[type="checkbox"]要素のswitch属性を使用したスイッチUIの実装例 – TAKLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/b9803481cdfb37d4a77bd2f57357d0fa08474f72/height=288;version=1;width=512/https%3A%2F%2Fwww.tak-dcxi.com%2Fog%2Fexample-of-implementation-of-switch-using-switch-attribute.png)
OpenAPI Generatorを使って生成するSpring Web MVCのソースコードに、独自にバリデーションを追加したい - CLOVER🍀
これは、なにをしたくて書いたもの？ OpenAPIを使ってREST APIを定義した時に、requiredや文字列長、範囲についての記述をしておくと、OpenAPI Generatorを使って 自動生成した時にある程度バリデーションの定義も生成してくれます。 OpenAPI Specification v3.0.3 / Specification / Schema / Data Types OpenAPI Specification v3.0.3 / Specification / Schema / Schema Object / Properties とはいえ、そのままでは生成されるバリデーションには限界があるので、自分でバリデーション定義を追加したい場合は どうしたらよいのかな？と思って調べてみました。 方法は？ 調べてみると、ざっくり次の2つの方法がありそうです。 OpenAPIの拡
Switching It Up With HTML’s Latest Control 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに Webは、HTMLの要素を取り入れ、見た目、動作、感触を完全に異なるものに変換することに慣れ親しんでいます。この一般的な例がスイッチ(トグル)コンポーネントです。複数のスタイルレイヤーの下にチェックボックスを隠し、ARIAの役割を「スイッチ」として定義し、そして出荷していました。しかし、この手法には不確定な状態における使いやすさの問題がありました。結局のところ、言葉にあるように、最高のARIAはARIAがないことです。 しかし、ネイティブHTMLスイッチが普及するための新たな希望が生まれました。 はじめに ネイティブHTMLスイッチの登場 疑似要素によるスタイル付け スタイル付け 基本的なインプッ
イベントループとは何なのか？ - Qiita
皆さんはJavaScriptの「イベントループ」についてどのくらいご存知でしょうか？ イベントループはJavaScriptランタイムがプログラムを実行するときの基盤となる仕組みです。他の言語やフレームワークにも類似概念がありますが（例：C#のWinForms）、重要さの度合いが異なります。 最近、社内で開催している読書会の課題図書で「イベントループ」について言及する箇所があり、、私自身この仕組みについて概要を理解できていないことに気がついたので少し調べてみました。 似通った関心をお持ちの方にとっての参考になればよいなと思っています。 なるべく簡潔にまとめたつもりですが、、、すみません、ものすごく文字だらけです。私の関心の的になったものをギュウギュウ押し込みました。 JavaScriptプログラムはシングルスレッド Webブラウザであれ、Node.jsであれ、JavaScript（JS）ラン
MDNにあるセマンティクスの説明を直したい - Ryusei’s Notes (a.k.a. M59のブログ)
developer.mozilla.org この記事の説明は問題があるので、できれば直したい。直すならGitHubにissueを出すのが筋だと思うが、いきなり英語で書くのは大変なので、とりあえず日本語で問題点をまとめておく。 プログラミングでは、セマンティクスとは、コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか？」、「その HTML 要素には、どのような目的や役割があるのか？」 (「どのように見えるのか？」ではなく)。 最初の、この説明は、とりあえずOKだと思う。細かい表現にケチをつけられるかもしれないけど。セマンティクスとはコードの意味のことで、その非形式的な実体としては、プログラムを実行した際に起きるエフェクトだとか、それが繋がっている目的や役割などだと言えるだろう。（言語学なんかでは、コンテキストから独立した意味を考える
概要 ベータチャンネルにて確認 124.0.6367.24 → 125.0.6422.19 日本語文はDeepL翻訳による翻訳 前：ChromeOSバージョン123→124にて追加/削除されたchrome://flags #Chromebook - Qiita 次： 警告: 実験的な機能があります! これらの機能を有効にすると、ブラウザのデータが失われたり、セキュリティやプライバシーが損なわれたりする可能性があります。 有効にした機能は、このブラウザのすべてのユーザーに適用されます。あなたが企業の管理者であれば、これらのフラグを本番環境で使用すべきではありません。 Powerwashが必要になる場合もあるため、フラグを試す際はバックアップを忘れずに。 追加 Temporarily unexpire M124 flags Temporarily unexpire flags that exp
内定者アルバイトを経て、2019年4月にIncrements株式会社（現 Qiita株式会社）へ新卒入社。Qiita Jobs開発チーム、Qiita開発チームでプロダクト開発や機能改善等を担当。2020年1月「Qiita」のプロダクトマネージャーに就任。 どういう流れで本の執筆につながったのか？ 清野：今回のゲストも「プロを目指す人のためのTypeScript入門」の著者で、エンジニア のuhyoさんです。よろしくお願いします。 uhyo：こんにちは、uhyoです。よろしくお願いします。 清野：今回uhyoさんとお送りするテーマは「エンジニアのアウトプットと本の執筆」です。uhyoさんといえばTypeScriptの本（タイトル「プロを目指す人のためのTypeScript入門」）で、僕も参考にしていたことありました。今は「TypeScriptを勉強するならそれを読もう」みたいな感じになってき
$("input[type='text']").on("keypress", (e) => { if (e.keyCode === 13) { $("form").valid(); return false; } }); パッと実装意図が分からず、調べる中で学びがあったので、メモとして残そうと思います。 該当コードの実装意図 結論からいくと、Enter キーによる form 送信を防ぐためでした。 input 要素にフォーカスしている時に、Enter キーを押すと送信されてしまう場合があります。 この挙動はユーザーの意図しない送信を誘発する可能性があるため、 送信ボタンをクリックしたときだけ submit する形にしていると思われます。 Enter キーによる送信 Enter キーによる送信は暗黙的送信（Implicit submission）と呼ばれる仕様であり、 WHATWG の仕様書
送信元のプライベート ファイル システム コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ファイル システム標準では、オリジン プライベート ファイル システム（OPFS）が、ページのオリジン専用のストレージ エンドポイントとして導入され、ユーザーには表示されません。OPFS は、パフォーマンスを重視して高度に最適化された特殊なタイプのファイルへのアクセス権をオプションとして提供します。 ブラウザ サポート オリジンのプライベート ファイル システムは最新のブラウザでサポートされており、File System Living Standard の Web Hypertext Application Technology Working Group（WHATWG）によって標準化されています。 目的 パソコン上のファイルといえば、ファイル階層を思い浮かべるかもし
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
URL.parse を Chromium で Ship するまで | blog.jxck.io
Server-Sent Events を複数パターンで実装して理解を試みる
Bun の非互換な拡張 API - moriken's project
【改訂しました】「この一冊で全部わかるWeb技術の基本」が第2版となりました。 - NRIネットコムBlog
State of HTML 2023にみるアクセシビリティの現状 | アクセシビリティBlog | ミツエーリンクス
input[type="checkbox"]要素のswitch属性を使用したスイッチUIの実装例 – TAKLOG
最新のHTMLではスイッチが進化！ネイティブHTMLによるスイッチインターフェイスの実装方法 - コハム
ChromeOSバージョン124→125にて追加/削除されたchrome://flags - Qiita
Podcast番組 #31 | エンジニアのアウトプットと本の執筆 - Qiita Zine
暗黙的送信（Implicit submission）について - Qiita
送信元のプライベート ファイル システム | Articles | web.dev