Intro CSRF という古の攻撃がある。この攻撃を「古(いにしえ)」のものにすることができたプラットフォームの進化の背景を、「Cookie が SameSite Lax by Default になったからだ」という解説を見ることがある。 確かに、現実的にそれによって攻撃の成立は難しくなり、救われているサービスもある。しかし、それはプラットフォームが用意した対策の本質から言うと、解釈が少しずれていると言えるだろう。 今回は、「CSRF がどうして成立していたのか」を振り返ることで、本当にプラットフォームに足りていなかったものと、それを補っていった経緯、本当にすべき対策は何であるかを解説していく。 結果として見えてくるのは、今サービスを実装する上での「ベース」(not ベスト)となるプラクティスだと筆者は考えている。 CSRF 成立の条件 例えば、攻撃者が用意した attack.examp
ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
const url = "https://fetch-api-normalization.deno.dev"; await fetch(url, { method: "PATCH" }); await fetch(url, { method: "patch" }); 実行すると、次のようなエラーを得るはずです。 PATCH を小文字で書いた際のエラーの一例 さて、どのような条件でこのエラーが発生するのでしょうか？これが意図されたものなのだとしたら、 GET や POST は大文字・小文字を無視してよくて PATCH は無視できない理由がなにかあるのでしょうか？以下でその理由を探ってみましょう。 いつエラーが発生するか このエラーは、 Fetch API を利用して外部の HTTP サーバーに対してリクエストを行う時に、 PATCH と書くべきところを patch と書いていると発生します。
jQuery 4.0.0 has been in the works for a long time, but it is now ready for a beta release! There’s a lot to cover, and the team is excited to see it released. We’ve got bug fixes, performance improvements, and some breaking changes. We removed support for IE<11 after all! Still, we expect disruption to be minimal. Many of the breaking changes are ones the team has wanted to make for years, but co
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
いまさらjQuery？ ここの人たちは見たくもない現実かもしれませんが、世界の9割はjQueryでできていいます。 ということで世界70億人が待望していたjQyery4のベータバージョンが2024/02/06に公開されたので以下で紹介します。 ちなみにjQuery1が2006/08/26、2が2013/04/18、3が2016/06/09のリリースであり、メジャーバージョンアップとしては8年ぶりとなります。 しかし開発が止まっていたとかというとそういうわけもはなく、流石に2010年代前半ごろの更新ラッシュは落ち着いてきたとはいえ、着実にメジャーバージョンが3のまま3.7.1まで更新され続けています。 jQuery 4.0.0 BETA! jQuery 4.0.0の開発を長いこと続けてきましたが、ついにベータ版リリースの準備が整いました。 やらなければならないことはたくさんあり、開発チームは
バグバウンティにおける XSS の具体的な脅威の事例まとめ - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティで実際にあった脆弱性報告の事例をもとに、XSS の具体的な脅威(Impact)についていくつか紹介します。 1. 始めに 免責事項 想定読者 2. XSS (Cross Site Scripting) HackerOne Top 10 Vulnerability Types Escalation (Goal) 3. XSS の脅威 (Impact) 3.1 Response Body から Session ID の奪取 3.2 Local Storage から Access Token の奪取 3.3 IndexedDB から Session Data の奪取 3.4 メールアドレスの改ざん 3.5 パスワードの改ざん 3.6 管理者アカウントの招待 3.7 POST Based Reflected XSS 4.
67 Weird Debugging Tricks Your Browser Doesn't Want You to Know
67 Weird Debugging Tricks Your Browser Doesn't Want You to KnowA list of useful, not-obvious hacks to get the most out of your browser’s1 debugger. Assumes an intermediate-level-or-higher understanding of the developer tools. Advanced Conditional BreakpointsBy using expressions that have side effects in places you wouldn’t expect, we can squeeze more functionality out of basic features like condit
Version 1.92 is now available! Read about the new features and fixes from July. November 2023 (version 1.85) Update 1.85.1: The update addresses these issues. Update 1.85.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the November 2023 release of Visual Studio Code. There are many updates in this versi
Embedding external content on a website in the current enshittocene period is more annoying than ever, so here is a copy-pasteable snippet to embed a youtube video while reducing its tracking and nuisance capabilities as much as possible: <iframe credentialless allowfullscreen referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin" allow="accelerometer 'none'; ambient-light-sensor '
Front-end developers spend a significant amount of time working inside the browser’s DevTools. Likely just as much as they spend time writing code in the code editor. However, most developers barely scratch the surface of what DevTools can accomplish. I have been curating a collection of DevTools tips across major browsers. The following are some of the useful tips & tricks for across different br
What's new in DevTools, Chrome 129 | Blog | Chrome for Developers
Recorder supports export to Puppeteer for Firefox As part of WebDriver BiDi support, the Recorder panel can now export recordings to Puppeteer for Firefox. With Puppeteer's support of Firefox, you can now record user flows using the Chrome DevTools Recorder panel, export them, and run them against both Firefox and Chrome. For more information, see WebDriver BiDi - The future of cross-browser autom
htmxコア入門
htmxの実装は4000行弱のJavaScriptファイルで、そんなに特殊なこともしていなかったので読みやすかった なんか懐しい感じがすると思ったけどjQuery世代の設計っぽい。変数がvarで定義されているし 全体 以下のようなDOMで考えてみる <body> <button hx-get="/clicked" hx-swap="outerHTML">Click Me</button> </body> ❯ curl http://127.0.0.1:8080/clicked <button hx-get="/clicked" hx-swap="outerHTML">Clicked!</button> querySelectorAll()でbody以下を探索してhx-*attributesが定義されたelementsにCustomEventhtmx:*のリスナーを追加 aタグやformタグ
Inertia.jsの基本的な特徴や仕組み（徹底解説）
Inertia.jsは、クライアントサイドとサーバーサイドの両方のレンダリングを組み合わせたSPA（シングルページアプリケーション）を作成することができる先進的な仕組みです。 この記事では、InertiaがいかにSPAの構築を容易にし、開発者が抱える他の多くの問題を解決できるのかをご紹介します。また、このツールの主要な機能も解説します。 それでは、サーバサイドアプリケーションとクライアントサイドアプリケーションがどのように機能するか、という基礎から理解を深めていきましょう。 サーバーサイドレンダリングとは サーバーサイドレンダリング（SSR）とは、アプリケーションがウェブページのコンテンツをブラウザではなくサーバー側でレンダリングまたは表示できるようにする仕組みを指します。例えばある人が「example.com」にアクセスしようとすると、その人の使用するブラウザはサーバーにリクエストを送信
この記事は？ フロントエンドの(に限らずですが)技術はよく言われるように移り変わりが早いです。とはいえ個人で全て追い切るのは難しく、また必ずしも新しいものを使い続けていればいいわけではないとも思います。個人的には新しい技術であっても古い技術であっても、きちんと自分の中に技術採用の軸があることが大事だと思っています。 このエントリではmanatenが2023年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。 (なお年の瀬に思い出して書いてるため、抜けがあったり内容いい加減だったりすると思います。) 今後も使っていくもの ライブラリ React 2023年時点である程度以上複雑なフロントエンドをコンポーネント指向+型安全に開発する上でベターな選択肢だと思います。 コンポーネント=JSX≒JSのため、通常のJS開発における
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
令和時代の API 実装のベースプラクティスと CSRF 対策 | blog.jxck.io
Fetch APIは「PATCH」だけ大文字と小文字の挙動が異なる
jQuery 4.0.0 BETA! | Official jQuery Blog
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
【jQuery】jQuery4.0.0の変更点紹介 - Qiita
Visual Studio Code November 2023
Youtube video embedding harm reduction
DevTools Tips & Tricks – Frontend Masters Boost
2023年のmanatenのフロントエンド - MANA-DOT