Content Security Policy Level 3におけるXSS対策 - pixiv inside
こんにちは、セキュリティエンジニアのkoboです。ピクシブには2018年4月に入社しており、セキュリティ観点でのアプリケーション開発や脆弱性報奨金制度の運用などを行っています。 本記事では、現在ピクシブの一部のサービスで取り組んでいるContent Security Policyについて知見を共有します。 概要 Content Security Policy (CSP) は、XSSを主としたウェブアプリケーションセキュリティの問題を軽減するために考案されたブラウザのセキュリティ機構です。 ウェブアプリケーションは、 Content-Security-Policy ヘッダをHTTPレスポンスに含めることで、意図していないJavaScriptの実行やリソースの読み込みをブラウザ側で制限することができます。 CSPは2012年頃よりブラウザに実装されていますが、2016年のGoogleの調査によ
【緊急】axios がサプライチェーン攻撃 2026.03.31
TL;DR 2026年3月31日、npm で最も利用されているHTTPクライアントライブラリの一つである axios がサプライチェーン攻撃を受けました。攻撃者はリードメンテナーのアカウントを乗っ取り、マルウェアを含む2つのバージョンを公開しています。 項目 内容
AI機能搭載のRSSリーダーを作った
なぜRSSリーダーか 情報収集は基本活字で、昔からRSSリーダーをよく使ってきた。Google Readerの時代からFeedly、Miniflux、FreshRSSと渡り歩いたしPocketのようなRead it later系も使ってきたが落ち着いて使い続けられるサービスがなかった (もっとここがこうだったらな〜とか。サービス自体がなくなることもあった) そもそも自分がRSSリーダーを使うのは、情報源を自分でコントロールしたいというのが大きい。SNSのアルゴリズムはエンゲージメントに最適化されているため、気づかないうちにフィルターバブルに閉じ込められる。流れてくる情報は「自分が見たいもの」であって「自分が知るべきもの」とは限らない[1]。RSSリーダーはその対極にある。購読するフィードを自分で選び、アルゴリズムの介在なしに情報が届く。プロアクティブに情報源を設計することで、視野を意図的に
Web Audio APIだけでゲームの効果音を8種類実装する【外部ファイルゼロ】 - Qiita
はじめに Bitcoin Simulator はビットコインの採掘・取引・半減期を体験するWebゲームです。ゲーム内にはマイニング成功音、取引音、半減期イベント音など 8種類の効果音 がありますが、音声ファイルは 1つも使っていません。 すべて Web Audio API の OscillatorNode と GainNode だけで生成しています。この記事では、その実装方法を解説します。 なぜ Web Audio API か 外部依存ゼロ: npm パッケージも音声ファイルも不要 バンドルサイズゼロ: mp3/wav ファイルをダウンロードしない カスタマイズ自由: 周波数・波形・音量・タイミングをコードで制御 PWA親和性: オフラインでも音が鳴る（キャッシュ不要） 基本アーキテクチャ let audioCtx: AudioContext | null = null; function
Web Audio API使ってグランドピアノをJavaScript上に再現する（ただし、奏者がそこにいなければならないとする。） - Qiita
Web Audio API使ってグランドピアノをJavaScript上に再現する（ただし、奏者がそこにいなければならないとする。） はじめに Web上で楽器を再現する試みは数多くありますが、その多くは単に録音された音（サンプル）を再生するに留まります。しかし、本物の楽器の魅力は、単音の美しさだけではありません。弾き手の感情、指の動き、ペダルの踏み加減、楽器本体の共鳴、そして部屋の響き... これら全てが複雑に絡み合い、「生きた音」が生まれるのです。 この記事では、私が作成したJavaScriptPiano というプロジェクトを題材に、Vanilla JSとWeb Audio APIだけで、いかにして「生きたピアノの音」というオーガニックな体験に近づけるか、その具体的な実装テクニックを、設計思想のレベルから深く掘り下げていきます。 あんまりレポジトリ紹介みたいなことはしません。生楽器が持つ「
モデル埋め込み課金不要！「段階的意味指紋法」なベクトル化！自然な文章で検索できるライブラリを作ってみた！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに LLMで既存のベクトル化データを使うときの問題点 昨今、RAG（Retrieval-Augmented Generation）などの文脈で「ベクトル検索（Vector Search）」やベクトル化したDB（ChromaDBやOramaなど）が使われている。 しかし、実際にアプリを開発・運用していると、いくつかの「壁」にぶつかることはないだろうか？ 特に大きな問題が 「埋め込みモデル（Embedding Model）への依存」 だと思う。 OpenAIの text-embedding-3-small でベクトル化したデータは、当
【祝v1.0】脱date-fnsの最右翼「Tempo」 - Qiita
はじめに JavaScriptの日付操作ライブラリは、Moment.jsのメンテナンスモード移行以降、date-fns と Day.js の二強時代が続いてきました。 そんな中、2024年に登場し注目を集めていた Tempo が、2025年12月に待望の v1.0.0（Stable） に到達しました。 「ブラウザ標準API (Intl) を活用し、超軽量・タイムゾーンデータ不要」というコンセプトは非常に魅力的です。 しかし、実戦投入するには 「date-fnsとは似て非なる部分」 を理解しておく必要があります。 本記事では、v1.0時点での実力と、採用におけるトレードオフをフラットに解説します。 Tempo とは コンセプト: Intl.DateTimeFormat 等のラッパー。 特徴: ロケールやタイムゾーンの辞書データを持たないため、バンドルサイズが極小。 ステータス: v1.0.0
関心インボーカーの使用 - Web API | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 ���View in English � ��Always switch to English 関心インボーカーは、ユーザーが要素に対して「関心を示す」操作や「関心を失う」操作（例えば、マウスポインターを当てたり外したりする操作）をした際に、インターフェイスの更新や独自のコードの実行を可能にする仕組みです。最も一般的な用途は、ポップオーバーの表示と非表示です。このガイドでは、関心インボーカーの概念、使用可能な場合、および使用方法について説明します。 概念 ポップオーバー API は、関連する制御要素（インボーカー）がアクティブ化されたとき、例えばクリックされたときに、ポップオーバーを表示する機能を提供します。この機能は、モーダルや情報パネルなどの
なぜJavaScriptのfetchはawaitを2回しないとレスポンスを取れないのか | maguro.dev
const resp = await fetch("https://api.example.com/data"); await を2回書いているのが気になったことはありませんか？1回の await で一気にレスポンスボディまで取れたら楽なのに、と思ったことはないでしょうか。 とある休日の午前中、いつものようにYouTube上でライブコーディング動画を見ていました1。そこで配信者の方が、fetchを使ってレスポンスボディを取得する際に2回目のawaitが必要であることに対して、「なんでfetchはこんなにめんどくさいんだろう」と言っていました。言われてみると、確かにめんどくさいような気もします。 この記事では、なぜ fetch がこのような設計になっているのかをいろいろな観点から掘り下げてみます。 fetch の使い方おさらい まずはJavaScriptのfetchの基本的な使い方を確認して
【Crank.js】リアクティブという欠陥を完全解決したJavaScriptフレームワーク、Crank.jsの思想と信条 - Qiita
ReactやVueとかの記事を見ていると、useMemoしろとuseMemoするなとか、イベントハンドラにuseEffectを使えとイベントハンドラにuseEffectを使うなとか、どうすりゃええねんという話をよく見かけます。 またなんか無限レンダリングされるとかなんか2回計算されるとか、そういう困った記事も良く見かけます。 なんでこんな問題をわざわざこっちで面倒みないといけないの？ そもそもリアクティブってお前らが勝手に持ち込んだ概念なんだから、解決もライブラリ側で勝手にやってくれよ。 どうしてユーザがいちいち対応しないといけないんだ？ そこで登場するのが、再レンダリング問題を独自のアプローチで完全解決したJavaScriptフレームワークCrank.jsです。 import {renderer} from "@b9g/crank/dom"; function Greeting({nam
クリックイベントをストリーム化して DOM アニメーションを非同期に制御する — readable-stream-with-safe-resolvers 活用例 - Qiita
今回は、私がリリースした readable-stream-with-safe-resolvers を使って、クリックイベントをストリーム化して DOM に描画・アニメーションを非同期で処理する例 を紹介します。 See the Pen readable-stream-with-safe-resolvers sample by juner clarinet (@juner) on CodePen. 概要 withSafeResolvers() は ReadableStream を外部から安全に操作するためのラッパーです。 特徴: enqueue(chunk) で値をストリームに追加 close() でストリームを終了 error(reason) でストリームをエラー終了 ストリームが finalized（閉じる・エラー・キャンセル）後はすべての操作が無視される この特性を利用して、クリックイ
🔒 Web Locks API をもっとシンプルに扱う ― disposable-lock を公開しました - Qiita
ブラウザが提供する Web Locks API は、タブ間や非同期処理間でリソースの競合を避ける便利な仕組みですが、 コールバックベースで扱いづらい という課題があります。 そこで、Web Locks API をより現代的に使えるようにした軽量な TypeScript ライブラリ disposable-lock を公開しました。 🚀 disposable-lock とは？ Web Locks API をシンプルに扱うための、依存ゼロの TypeScript ライブラリ Promise ベース & await using による自動解放に対応 🧩 依存なし・Pure TypeScript 🔁 Promise ベースのロック取得 / 解放 🪄 await using 対応（Symbol.asyncDispose） 🧠 custom LockManager を注入可能（Node.js
Intl.Segmenterはどうやって単語分割しているのか
Intl.Segmenter についておさらい JavaScript には Intl と呼ばれる国際化 API があり、日時や数値のフォーマットを始めとする国際化に便利な機能が揃っています。Intl.Segmenter はこの Intl の一機能で、文字・単語・文章単位での文字列分割を可能にします。 文字単位での分割では複数のコードユニットやコードポイントを持った文字を考慮し、正確に見た目上の１文字（書記素）で分割できるので、絵文字を含んだ文字数のカウントなどに便利です。 const segmenter = new Intl.Segmenter("ja", { granularity: "grapheme" }); console.log("🇯🇵👨🏻💻".length); // ❌ 11 console.log([..."🇯🇵👨🏻💻"].length); // ❌
Nunjucks
You've been looking for a more sophisticated templating engine for JavaScript. Here it is. Rich Powerful language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by jinja2 Fast & Lean High-performant. Small 8K gzipped runtime with precompiled templates in the browser Extensible Crazy extensible with custom filters and extensions Everywhere Available i
暗号化したまま距離計算！JavaScriptと準同型暗号「paillier-bigint」で学ぶプライバシー保護技術 - Qiita
暗号化したまま距離計算！JavaScriptと準同型暗号「paillier-bigint」で学ぶプライバシー保護技術 位置情報のような機密性の高いデータを、サーバーに渡すことなく安全に処理したいと考えたことはありませんか？例えば、「2つのGPS座標間の距離を、それぞれの座標を秘密にしたまま計算する」といった処理です。 これを実現するのが準同型暗号という技術です。この技術を使えば、暗号化されたデータを復号することなく、データに対する加算や乗算などの計算ができます。 この記事では、JavaScriptの準同型暗号ライブラリpaillier-bigintを使い、暗号化された緯度・経度データからユークリッド距離を計算するデモプログラムを通して、その仕組みと可能性を探ります。 シナリオ：暗号化された位置情報から距離を求める このプログラムの目的は、2つの地点（lat1, lon1）と（lat2, l
「ぷよぷよプログラミング」セガ公式のガイドブック発売へ 最新版のソースコード全文掲載
ぷよぷよプログラミングはセガが2020年に無料公開した、ゲームのソースコードを書き写し、ぷよぷよのプレイ画面を確認しながらコーディングを学ぶ教材。小学校でプログラミング教育が必修化した時期だったこともあってSNSなどで話題になり、同年以降も副教材の追加や、セガによる出張講座などが行われている。 関連記事 プログラミング初心者も「“ぷよ”が動いた！」の感動を 着想から7年、ぷよぷよの教材が生まれた理由 コード入力すると“ぷよ”が動くぷよぷよのプログラミング教材が登場。教材を作った経緯や理由を開発者に聞いた。 青学初等部が「ぷよぷよ」のプログラミング教材で授業 青山学院初等部は5月14日から6月25日にかけて、対戦アクションパズルゲーム「ぷよぷよ」のソースコードを使ったプログラミング教材「ぷよぷよプログラミング」を活用した授業を行った。セガが開発した小学生向けカリキュラムを活用し、子供たちにゲ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
snapDOM – serious alternative to html2canvas
DOMを学ぶ２~DOMの歴史~ - Qiita
スプレッド構文を使った「条件付き挿入」のテクニック（オブジェクト & 配列） - Qiita
iOS で click イベントがわけのわからない動作をする件について - Qiita
