Naming things needn’t be hard
Naming things needn’t be hard Find inspiration for naming things – be that HTML classes, CSS properties or JavaScript functions – using these lists of useful words. Word lists Action Describe the behaviour or operation of things. Collection Describe the containment and grouping of things. Comparison Describe the equivalent likeness between things. Numeration Describe the order, precedence and mult
Node.jsの色々
2020-07-15 OWASP Sendai Node.js の色々 OWASP Kansai board member はせがわようすけ 長谷川陽介 (はせがわようすけ) (株)セキュアスカイ・テクノロジー 取締役CTO hasegawa@securesky-tech.com https://utf-8/jp/ 千葉大学 非常勤講師 OWASP Kansai ボードメンバー OWASP Japan ボードメンバー CODE BLUEカンファレンス レビューボードメンバー OWASP Kansai Chapter 自分たちの直面するWebセキュリティの問題を 自分たちの手で解決したい！ 日本で2番目の OWASP Local Chapter Webセキュリティの悩み事を気楽に相談し情報共有できる場 スキル、役職、業種、国籍、性別、年齢に関係なし vol.16 OWASP Ka
Node.js + TypeScriptのモジュールを整理してみる
はじめにlink 最近受けるNode.js + TypeScript環境の相談の中で、CommonJSやECMAScript Modulesのあたりで落とし穴にはまっている人が多いという事に気づいた。 Node.jsは歴史的にCommonJSとECMAScript Modules（以後ESMと表記）がどうしても入り乱れる環境にあり、これにTypeScriptのモジュールが加わると組み合わせでさらに複雑度が増すのが現状である。 説明する際に口頭より整理した文章が欲しいと思ったので記事にする。 以下のリポジトリで検証コードを管理している。 https://github.com/koh110/module_test Node.jsモジュールチェックシートlink まず最初にNode.jsにおけるCommonJSとESMの挙動について整理する。 いきなり書かれても把握できないかもしれないが、一旦こ
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
2024.03.15 福岡フロントエンド勉強会 #1
javascriptでバイナリを扱うために - Qiita
html5の時代になってjsでバイナリデータを扱うことが増えてきている. そんななかで覚えておくべきことをいくつかメモしておく. C言語におけるintやshortなどの型ついて知っておくと楽になる. 具体的なことはあまり書いてないので実際にそういったプログラムを作るには, 出てきた単語をぐぐって欲しい. そもそもバイナリデータをどうやって扱う? jsでは主にUint8Arrayという配列を使って扱うことが多いだろう. このUint8Arrayというのは数値しか記録できず,値が0から255までの初期化時に長さが決まる配列である. Uint8Arrayというのはつまり,負の数なし(Unsigned)の整数(int)で,要素一つあたり1バイト(8bit = 1byte)の配列(Array)ということである. C言語におけるunsigned char[]に相当する. この配列は連想配列ではなく純粋
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
注目したいクライアントサイドの脆弱性2選/ Security.Tokyo #3
Security.Tokyo #3の発表資料です。 クライアントサイドのパストラバーサルと、postMessage経由の脆弱性を取り上げました。
テストの学習へようこそ！ | web.dev
テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
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 が利用できる環境ではリッチなユーザー体験を提供しつつ、JavaScript が使えない環境においては HTML のフォームとして振る舞うことでアプリケーションの機能を変わらず提供できます。 React Server Component はサーバー側で HTML に変換されるため、クライアントに JavaScript のコードが配信されることはありません。React Server Component では useState() を使用できないといった制約がありますので、我々開発者は React Server Component の利点を
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 は非同期
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Exploring Promises by implementing them • Deep JavaScript