パスキーによる認証をブラウザで実装してみる 2025.02.08 パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、またフィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。この記事では WebAuthn を使ってパスキーをブラウザで実装する方法を紹介します。 パスキーとはパスワードに代わる認証方法で、生体認証やデバイス PIN を使ってログインができる仕組みです。ユーザーはパスワードを覚える必要がなく、フィッシング攻撃にも強いという点からよりセキュア認証方法として注目を集めています。また指紋認証や顔認証のように簡単な操作で Web サービスにアクセスできるようになるため、ユーザビリティの向上にもつながります。 パスキーは 2022 年頃から企業や団体により対応が表明
無垢な仔猫の写真を集めたウェブサイトを訪問したと想像してみてください。かわいい仔猫達の写真の背後には、このウェブサイトの強大な力が隠れています。誰かがウェブサイトにアクセスすると、サイトのオーナーはその訪問者のネット上の行動に関するあらゆる情報を入手できます。その中には、銀行取引情報、SNS上の投稿やメッセージ、メール、オンラインの購買データなどが含まれます。あなたが受ける信用面や金銭面の損害はどれほどのものになるでしょうか。あなたのメッセージが流出し、銀行口座のお金が使い込まれるかもしれません。しかし幸いなことに、実際にはそのような状況は起こりません。それは、SOPとCORSのお陰なのです。 目次 Ajax（Asynchronous JavaScript And XML） インターネットがジャングルではない理由 認証情報を「含める」vs「含めない」 CORSルールの定義 クロスオリジンリ
はじめに 開発業務で「情報収集」や「タスク自動化」をするときにスクレイピングやクローリングを用いる場合があると思います。一時期私もスクレイピング関連の本を読んでBeautifulSoup, Seleniumなどを使って自動化をしましたが、CSSセレクタを指定していくのが大変だったり、DOM構造が変わると動かなくなったりと、色々苦労した覚えがあります。 そんな時、browser-useという面白そうなライブラリを見つけたので、この記事では、browser-useを使ってみた内容を自分用のメモとして残そうと思います。 browser-useとは？ browser-useはAIを使ってブラウザ操作を自動化してくれるツールです。 このツールは、Pythonを使ってブラウザで実行する操作をテキストで渡してあげると、AIがそのテキストに基づき操作を行ってくれます。そのためスクレイピング/提携業務の自動
2025年1月24日、OpenAIはウェブ上のタスクを自動実行するAIエージェント「Operator」を公開しました。 ユーザー専用のリモートブラウザを使ってサイトを閲覧・操作し、さまざまなタスクを自動化できます。 現在はアメリカのProユーザー向けの研究プレビュー版として提供されており、OpenAIはユーザーからのフィードバックをもとに機能を改善しながら、将来的にはPlusやTeam、Enterpriseへの展開も検討されています。 「Computer-Using Agent（CUA）」とは？Operatorの中核にあるのが、新しいモデルである Computer-Using Agent（通称：CUA） です。 GPT-4oの視覚的能力と強化学習による推論力を組み合わせることで、 画面上のボタンやフォームといったグラフィカルユーザーインターフェイス（GUI）を解析し、マウスやキーボードとい
はじめに 2025年はAIエージェントの年です。注目されているAIエージェントの一つが『AIが自動で自分のPC画面を操作』するBrowser Useというツールです。 Browser Useの面白さ Browser Useを使うと、AIが自動で自身のPC画面を操作することであらかじめ決めた目的を達成をしてくれます。 簡単な指示を出すだけで、自動でAIが色々操作してくれるのはキャッチーで衝撃的ですよね。 例えば下記のように完全自動でAIが記事を検索して記事の情報を取得してくれます。 簡単な指示でAIが自分で考えて画面操作をしてくれるのは近未来感ありますよね。 しかし、現場でAIを使いこなすには「AIがすごい」のレベルではまだ足りません。 実際に触ってみて何ができるのか？逆に何が苦手なのか？という肌感覚を持つことが非常に重要です。 そこで本記事は、その肌感覚を養うために実際にBrowser U
python 01agent.py INFO [browser_use] BrowserUse logging setup complete with level info INFO [root] Anonymized telemetry enabled. See https://github.com/gregpr07/browser-use for more information. INFO [agent] 🚀 Starting task: 今日の運勢について教えて INFO [agent] 📍 Step 1 INFO [agent] 🤷 Eval: Unknown - No prior goal was set. INFO [agent] 🧠 Memory: No actions have been taken yet. Current task is to find tod
はじめに browser-use を使う上で詳しいドキュメントがなかったので、自分で使ってみたことをまとめてみました。 browser-use の基礎的なところは以下にまとめてあります。 ブラウザを起動させず、ヘッドレスモードで実行したい BrowserConfigのheadlessをTrueにすることで、ブラウザを起動させず、ヘッドレスモードで実行することができます。 from browser_use.browser.browser import Browser, BrowserConfig browser = Browser( config=BrowserConfig( headless=True, ) ) async def main(): model = ChatOpenAI(model='gpt-4o') agent = Agent( task='東京の天気をGoogleで調べて
browser-useについて調査する どういうものか ブラウザのデバッグプロトコルを使ってLLMで操作するpythonライブラリ Playwright API → Chrome DevTools Protocol (CDP) ClaudeのComputer useのスコープを狭めたものと理解できる 似たツールとしてMCPのPuppeteerサーバーがある→mcp/puppeteer モデル（LLM）の呼び出しにLangChain Modelのインターフェイスに依存することでマルチプロバイダ対応してる なのでLangChainで動くモデルに対応してる 結果的にLangChain風のAgentフレームワークのミニマムな実装になってる 何ができるの？ ブラウザ操作を自動化してできることはできる Hugging Faceで特定のライセンスを持つモデルを検索し、その情報をファイルに保存する 求人情
今日もいつものようにシラスでデイリーAIニュースを配信していると、とんでもないものにでくわした。 もうタイトルに書いてあるけど、AIが勝手にブラウザを操作して色々やってくれてしまう、その名もBrowserUseだ。 インストールは超簡単。 macなら以下の二行だけだ。 $ pip install browser-use $ playwright install使うのも超簡単だが、コマンドラインに落ちるのが怖い人々には簡単に見えないかもしれない。環境変数のOPENAI_API_KEYとかにAPIキーを入れておくこと。 $ python >>> from langchain_openai import ChatOpenAI >>> from browser_use import Agent INFO [browser_use] BrowserUse logging setup complete
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに はじめまして、セキュリティエンジニアのSatoki (@satoki00) です。今回はブラウザの開発者ツールのネットワークタブから隠れて、Webサイト内の情報を送信する手法をまとめます。所謂Exfiltrationというやつです。中にはCSPの制限をBypassするために用いられるテクニックもあります。CTFなどで安全に使ってください。 前提 発端はWeb上でテキストの文字数をカウントできるサイトが閉鎖する際の話です。カウント対象のテキストデータがサイト運営 (やサイトを改竄した攻撃者) に盗み取られていないかという議論が巻
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/content/iss
Send feedback Preparing for the end of third-party cookies Stay organized with collections Save and categorize content based on your preferences. If your site uses third-party cookies, it's time to take action as we approach their deprecation. To facilitate testing, Chrome has restricted third-party cookies for 1% of users from January 4th, 2024. Chrome plans to ramp up third-party cookie restrict
特によく使われる上二つのサービスでは”Webアプリケーションのテスト環境"を提供しており、インターネットに公開されたWebアプリケーション、開発中のローカルのWebアプリケーションのテスト環境が揃っています。 テスト環境 = テスト用アプリケーションがデプロイされ、ホストされている環境 テスト実行環境 = 上記テスト環境にアクセスし、テストを実施するためのデバイス・ブラウザ・OSを含む環境 BrowserStackはクラウド上で後者の「テスト実行環境」を提供しています。 BrowserStack Live （手動テスト) BrowserStackにホストされている様々なデバイスを利用し、マニュアルテストすることが可能です。画像ではiPhone13のデバイスを立ち上げ、Webのダッシュボード上で操作を行っている様子です。シミュレータではなく、実機デバイスをブラウザ上から操作できます。 Bro
米OpenAIは5月12日（現地時間）、3月に発表したWebブラウジング機能とサードパーティ製プラグインを、実験的な新機能として「ChatGPT Plus」ユーザーに提供開始すると発表した。15日の週に全Plusユーザーにロールアウトしていく。 利用できるようになると、ChatGPT Plusの画面左下のユーザー名をクリックし、［Settings］→［Beta features］を開くと「Web browsing」と「Plugins」という項目が表示されるようになる。これらの項目を有効にすれば、機能を利用できるようになる。 筆者の環境ではまだWebブラウジング機能しか使えないが、例えば「Sam Altomanの最新ツイートを教えてください」と尋ねると、米Microsoftの「新しいBing」と同様に検索、読み込みの過程を表示しつつ、答えを表示する。この場合、正しい答えが得られた。
はじめに 2023年3月末にiOS 16.4がリリースされたことで、ついにすべてのモダンブラウザユーザーに対してWeb Pushを送れるようになりました。 本記事は、筆者が個人開発しているWebサービスでWeb Push機能を実装したときに調べたことや行ったことをメモとして残すものです。Web Push機能の実装を検討されている方の参考になりましたら幸いです。 なお、筆者は外部サービスへの依存をなるべく減らしたかったため、FCMなどのプッシュ通知機能を提供してくれるものはなるべく使わずに実装したのですが、大変だったので基本的には素直にSaaS等を使った方がよいと思います。 注意事項として、筆者はバックエンドに専門性がありません。そのため、何か間違った記述があるかもしれません。特に暗号化周りは理解が甘い点があると思います。もし誤りを発見された場合は優しめに教えていただけると助かります。よろし
どうもフロントエンドエンジニアのoreoです。 今回はWebブラウザのレンダリングの仕組みについてまとめたいと思います。あまり意識していなくても開発はできますが、知っていればパフォーマンスの改善やAccessibilityの向上に役立ちそうですね。 1 レンダリングとは？ 普段私たちは、WebブラウザにURLを指定することで、そのリソースをブラウザ画面に表示できます。この時の 「指定したリソースをブラウザ画面に表示すること」を「レンダリング」と言います。 Webブラウザは、下記のように多くの機能を搭載していますが、この中でRendering engineが、レンダリングを実行します。 参考：https://web.dev/howbrowserswork/ ちなみに、ブラウザごとのRendering engineは下記になります。 Rendering engine Browser 参考：ht
2021年度リクルート エンジニアコース新人研修の講義資料です
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く