WebブラウザのHistory APIの挙動を知ろう - hylom's
‐ programming, open source, os, and a handful of tips 仕事でWebブラウザのHistory APIに関する質問を受けたのですが、意外と分かりにくいのでここでまとめておきます。 なお、History APIに関する大体のことはMDNのHistory API を取り扱うというドキュメントにまとめられていますので、こちらも参照しましょう。 履歴とは Webブラウザ上では、閲覧履歴はスタック（本記事では「履歴スタック」と呼ぶ）として管理されます。履歴スタックはWebブラウザのウィンドウやタブごとに用意されています。ページの進む/戻る操作ではこの履歴スタック自体は変更されず、履歴スタック上の現在位置のみが変更されます。 Aタグなどであるページから別のページに遷移した場合、履歴スタック上の現在位置よりも先にある履歴項目が削除され、続いて履歴スタック
バグバウンティにおける JavaScript の静的解析と動的解析まとめ - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティなどの脆弱性調査で行う、JavaScript の静的解析と動的解析についてまとめて紹介します。 1. 始めに 免責事項 想定読者 検証環境 静的解析と動的解析 2. 静的解析 (Static Analysis) 2.1 JavaScript File の URL を収集する getJS hakrawler getallurls (gau) 2.2 エンドポイントを列挙する LinkFinder xnLinkFinder katana jsluice endext 2.3 シークレット情報を検出する SecretFinder jsluice Mantra trufflehog 2.4 潜在的な脆弱性情報を検出する Retire.js ESLint 3. 動的解析 (Dynamic Analysis) DevTool
JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
Denoで知ったJavaScriptの楽しさ
これ以外に新たにECMAを実装することを目指しているエンジンもあります。たとえば、なんでも再実装したいことで有名なRustコミュニティではBoaというエンジンがECMAScript準拠100%を目指して活発に開発中のようです。 Node.jsって何なの？ Node.jsは「V8上に構築されたJavaScriptランタイム」です。 ん？ エンジンの上にランタイムが乗ってるのか？ と、あらためて調べ始めた時は混乱しましたが、元々「ブラウザ＋エンジン」上でしか動かなかったJSが、Node.jsの登場によって「Node.js on V8」上で動くようになった…ということなんですね。 これによって、JavaScriptはブラウザの外側でも動くようになりました。 現在ではこの「ブラウザの外」というのは、乱暴に言えば「サーバーサイド」ということになっていて、Node.jsといえばサーバーサイド開発のため
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
JSONとBigInt
ちょっと前にblueskyで見かけた話題。もとは「GraphQLのスキーマではintが32ビットしかなくて、64ビット整数とかないのがイケてない」といった話だったかなと思う。直感的にはこれは「Javascriptではすべてが倍精度浮動小数点数だから64bit intがないから」ということになるが、よくよく調べてみるといろいろややこしい歴史的事情があるようだ。 たしかにJSにはもともとひとつのNumber型しかなく、いわゆるdouble型(倍精度浮動小数点)だけで数値を表現してきた。IEEE754の倍精度浮動小数点数は仮数部が52ビットあるので、実際には32ビット整数ていどであれば全て誤差なく表現できる。なので32ビット整数または倍精度浮動小数点数がどちらも使えるというふうに理解されてきた。 そうはいっても不便なので、現代のJSにはBigIntがある。ES2020で導入されたらしい。ただし普
もうTypeScriptの補助輪を外そう 明日は//@ts-checkを使う
※近所（同じ港区内）のあのIT企業さんからお声をかけていただきました。登壇予定です。 ※某商業誌さんから執筆依頼がありましたが、有料ですと気が引けるのでお断りしました。 Vimで書いている人はもういないから、そろそろTypeScript（自転車の補助輪）を外していこうという話。 Visual Studio Code は下のリンクからインストールできる。これが前提。 VS Code で // @ts-check が利用できる。 ※Denoの話を知らない人は、これを読むと良い。 DenoがTypeScriptの使用をやめる5つの理由 （Denoは、Node.jsの作者であるライアン・ダールによって作成され、V8 JavaScriptエンジン及びRustプログラミング言語に基づいた、JavaScript及びTypeScriptのランタイム環境である。セキュリティと生産性に焦点を当てている） ※T
レガシーなjs環境におすすめなts-checkコメントについて - MANA-DOT
このエントリの内容 このエントリは、javascriptの型チェックをすることができるtypescriptの機能 @ts-check について紹介し、個人的に感じた便利なところや使い所を紹介していきます。 このエントリの読者は以下のような人を想定しています。 レガシーな環境でTypeScriptを導入しづらいが、複雑化するコードベースを少しでも楽に保守したい人 TypeScriptに興味があるが、昨今のjsのツールチェインについていけず、とりあえず試してみたい人 @ts-checkとは @ts-checkとは、JavaScriptファイルの先頭に //@ts-check というコメントをすることで、TypeScriptコンパイラや、TypeScriptを標準で型チェックできる VSCode により、JavaScriptファイルに対してTypeScript相当の型チェックを行う事ができる仕組
Exploiting XSS in hidden inputs and meta tags
Published: 11 July 2023 at 13:00 UTC Updated: 11 July 2023 at 13:00 UTC In this post we are going to show how you can (ab)use the new HTML popup functionality in Chrome to exploit XSS in meta tags and hidden inputs. It all started when I noticed the new popover behaviour with Chrome on Twitter. We all know about annoying modal dialogs that nag you to subscribe to a newsletter - now you can create
node_modulesの問題点とその歴史 npm, yarnとpnpm
皆さんnpmパッケージのバージョンを上げるときにハマって依存地獄から抜けられなかったことはありませんか？ 私はあります。 複雑怪奇な依存関係を調べてみようとnode_modulesを覗いてみて、そのカオスっぷりに臭いものに蓋をしたことはありませんか？ 私はあります。 そこでnode_modules以下について調べてみたのですが、node_modulesにどんな問題点があって、npmやyarn, pnpmは何を目指していたのか時系列順に紐解いた方がわかりやすいことに気づきました。 ここでは初期のnpmが抱えていた問題から今に至るまでを順を追って説明します。 するとnode_modulesの仕組みの他に、各パッケージマネージャの方針の違いが見えてくるはずです。 初期の頃のnpm (~2015年以前) この頃はシンプルで、依存関係はそのままnode_modulesのディレクトリ構造に反映されてい
Cookie Store API による document.cookie の改善 | blog.jxck.io
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期 A
実践Node.js入門という本が出ます
はじめにlink 実践Node.js入門という本が技術評論社さまより発売されます。人生初の単著です。 発売日は2023/01/26です。 電子書籍版はKindleとGihyo Digital Publishingから購入できます。 Amazon 技術評論社様のほうではPDFとEPUB形式で購読可能です。 https://gihyo.jp/book/2023/978-4-297-12956-9 内容link Node.jsの入門書です。実際にアプリケーションを作成、運用するためのノウハウを全て詰め込みました。 Node.jsの基礎知識、特徴や活かし方、アプリケーションの開発、設計の考え方、運用、テストの方法、パフォーマンスチューニングなどに触れながら解説していきます。 本書はNode.jsをほとんど知らなかった新卒のころ自分に、今の自分が全力で教えるというコンセプトで書き進めました。 当時の
WebAssemblyの歴史について
はじめに 最近、Node.jsとDenoの開発者であるRyan DahlさんがJavaScript Containersという記事を書いていることを知った。 Webとの親和性の高さがサーバーサイドで求められる中、JavaScriptがユニバーサルスクリプトとして活躍するだろう。そして、コンテナランタイムがLinuxコンテナの抽象レイヤーとしてあるように、JavaScript界隈では既存のWebAPIそのものが抽象化の手助けとなるであろう、みたいな趣旨の内容だった。 彼がChromeのV8 JavaScript Engineを使ってNode.jsを誕生させた同じ頃、JavaScriptの可能性を信じて方法を模索した人がいる。Alon Zakaiさんだ。 Alon(以降、敬称略)はWebAssemblyやその考えの元になった asm.js 、 JavaScriptコンパイラ Emscripte
フォーム入力支援やサイト最適化サービスの改ざんについてまとめてみた - piyolog
2022年10月25日、ショーケースは同社が提供する複数のサービスが不正アクセスを受けたため、サービスを利用する企業のWebサイトを通じて入力された情報が外部へ流出した可能性があると公表しました。ここでは関連する情報をまとめます。 フォーム入力支援やサイト最適化サービス改ざんで複数社に影響波及 www.showcase-tv.com 不正アクセスによりショーケースが提供するサービスのソースコードの改ざんが行われた。対象サービスが稼働するシステムの一部で脆弱性を悪用されたことが原因。 被害に遭ったのは「フォームアシスト」「サイト・パーソナライザ」「スマートフォン・コンバータ」の3つ。フォームの入力支援やサイト表示最適化を行うサービスで利用企業は同社が公開するJavaScript (formassist.jp、navicast.jp上で公開)を自社サイトより読み込むことで利用する。 改ざん被害
XMLHttpRequest とはなんだったのか | blog.jxck.io
Intro Fetch API の実装が広まり、IE もリタイアを迎えたことで、今後忘れ去られていくことになるだろう XMLHttpRequest について。 どのように始まり、どのように広まり、どのように使われなくなっていくのか。その間に残した多大な功績を残す。 XMLHttpRequest の始まり この名前は非常に長いため、通常 XHR と略される。 この API は、現在の Web API のように W3C/WHATWG による標準化を経て策定された API ではない。Microsoft によるいわゆる独自実装の API として始まり、後追いで標準化される。 したがって、Web API の中でもかなり異質な命名である XHR が、XmlHttpRequest でも XMLHTTPRequest でもなく XMLHttpRequest である理由も、Microsoft の命名規則に「
SPAセキュリティ超入門 | ドクセル
スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
フロントエンドのコードからの情報漏洩を防ぐための工夫 - BASEプロダクトチームブログ
基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる情報 例えば、次のようなコードがあるとします。 function debug() { // 開発環境の host であればデバッグ機能を有効にする return location.host === 'dev.example.com'; } なんの変哲もないようなコードに見えますが、ブラウザ
SPA認証トークンはlocalStorageでもCookieでもない、Auth0方式はいいねというお話 - @mizumotokのブログ
SPA認証トークンをどこに保存するかは論争が絶えません。localStorageやCookieがよく使われますが、Auth0は違う方法を採用しています。この記事では、Auth0のトークン管理の方式を理解でき、トークン管理上のセキュリティへの理解を深めることができます。 SPAの認証トークンをどこに保存するか ブラウザでトークンを保存できる場所 保存場所の比較 メリット・デメリット Auth0のアプローチ トークンはインメモリに保存 OpenID Connect準拠とトークン取得のUI/UXの悪化回避を両立 Auth0のjsライブラリ ログイン アクセストークンの（再）取得 図解 ログイン アクセストークンの（再）取得 自サービス内の認証だけのもっと簡易な構成 ログイン IDトークン取得 まとめ SPAの認証トークンをどこに保存するか React やVueで認証付きSPA（Single Pa
JSの非同期処理を理解するために必要だった知識と学習ロードマップ
はじめに JavaScript の非同期処理を学習してみて「ある程度自信を持って理解できたと言える」状態に到達したので、その感想とまとめの学習ロードマップとその中でどのような知識が必要になるかを紹介したいと思います。 あるいは、自分が実際に学習してきた道筋に基づいているのでショートカットとして参考にしてもらったり、使えるリソースなどの情報が共有できると思います。もしくは「JavaScript 初心者が非同期処理を理解できるようになるまでの道筋」というストーリーで１つのサンプルとして見ていただけるといいかもしれません。 ChangeLog 大きな変更のみをトラッキングしています。 2022-11-16 本の内容を反映させた追記・修正を追加 2022-05-21 構成を修正 「V8 エンジンから考える」の項目を追加 2022-04-30 「イベントループの共通性質」の項目を追加 「ロードマップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google製のJavaScript教育ツール「Grasshopper」は基礎から学べて初心者に優しい！【どれ使う？プログラミング教育ツール】
