ヘッドレスブラウザとSSRF | 技術者ブログ | 三井物産セキュアディレクション株式会社
ヘッドレスブラウザは、サーバ環境などでHTMLをレンダリングするためにバックグラウンドで動作させるブラウザです。 筆者も昨年診断ツールに組み込んだのを契機に使用し始めました。使ってみるとなかなか面白いので、今年は社内での学習用の「やられサイト」にも組み込んでみました。今回はこのやられサイトを題材にして、ヘッドレスブラウザとSSRF（Server-side request forgery）について書きます。 やられサイトの概要 開発したやられサイトは簡単なブックマークサイトです。ユーザがURLを入力すると、そのスクリーンショット画像をヘッドレスブラウザで取得して、ユーザが付けたコメントなどの付加情報とともに保存します。 下図はヘッドレスブラウザに関連する部分の構成です。 図のとおりNode.jsのPuppeteerを使用しており、バックエンドのブラウザエンジンはChromiumです。性能向上
Chrome拡張「Puppeteer Recorder」を使って簡単にブラウザの自動操作を行う
Puppeteer RecorderというChrome拡張がリリースされたので試しに使ってみました。 GitHub: checkly/puppeteer-recorder 概要 Puppeteer Recorderは、ブラウザで行った操作を記録してPuppeteerのコードを出力してくれるChrome拡張です。 似たようなChromeの拡張にSelenium IDEがあったりします。 使い方 READMEの画像にあるように、拡張機能を入れて「Record」をクリック、その後試したい操作をしてから「Stop」をクリックするとコードが出力されます。 実際に使ってみた感想 すでに使ってみた感想を書いてくれている記事（「Puppeteer Recorder」を試してみた - masalibの日記）がありますが、自分もだいたいこの記事と感想は同じでまだ不安定なところがあるな、という印象です。 例えば
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
Puppeteer入門 スクレイピング+Web操作自動処理プログラミング - 秀和システム あなたの学びをサポート！
Puppeteerは、Node.jsで動く最新のWebブラウザ自動化ライブラリで、データ収集やWeb開発、動作テストの効率化などに使われます。Google製のライブラリなので、Chromeとの相性は抜群です。本書は、Puppeteerの実行環境の構築から、スクレイピングとWeb操作の自動化を実現するプログラミング、デバッグまでを解説した入門書です。Node.jsとJavaScriptの入門書としても使えます。鶴田謙二さんによる素敵なイラストが目印です！ 【サポートはこちら】→https://www.shuwasystem.co.jp/support/7980html/5520.html 第1部 準備編 第1章 Puppeteerの基礎 1-1 ブラウザ自動化のライブラリ Puppeteer 1-2 JavaScriptと組み合わせ可能 Puppeteerでできること、できないこと 1-3
E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog
Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
puppeteer + express + mocha で快適 TDD している話 - ジンジャー研究室
TDD という用語を使うとテストおじさんがやってきて、それはそうじゃないとか色々言い出すと思うんだけど、それが趣旨ではないので勘弁して欲しい。予防線ここまで。 Puppeteer でテスト Puppeteer が世間的にも個人的にもブームだ。ヘッドレス Chrome を操ってクローリングしたりスクリーンショットを撮ったり色々出来る。 github.com で、あれこれと遊んでいるうちにテストに使えるんじゃね？ということに気づいたので実践してみたら快適だったという話。ブラウザ操作してテストというのは昔から Selenium というのがあり、こちらはクロスブラウザで出来たりするんだけどまあ大掛かりでだるさを感じてしまう。メリットデメリットの比較はさておき、どうせならナウいやつを使ってみたい。よし使おう。 何をテストするか 普段から画面を見ながら開発しているので、どこに何が表示されているべきとい
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - checkly/headless-recorder: Chrome extension that records your browser interactions and generates a Playwright or Puppeteer script.