/content - HTML を取得する

/content エンドポイントは、ブラウザにウェブサイトへ移動させ、JavaScript 実行後のページの完全にレンダリングされた HTML（head セクションを含む）を取得します。JavaScript が多いサイトやインタラクティブなサイトのコンテンツ取得に適しています。

このエンドポイントは、次の 2 通りの方法で使えます。

• REST API: Browser Rendering - Edit 権限を持つ カスタム API トークンを作成 します。
• Workers Bindings: Workers Bindings を使い、Cloudflare Worker から直接エンドポイントを呼び出します。API トークンは不要です。

詳細は Quick Actions: 始める前に を参照してください。

https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content

url または html のいずれかを指定する必要があります。

• url (string)
• html (string)

• 動的ページの完全にレンダリングされた HTML を取得する
• パース、スクレイピング、または後続処理向けに HTML を抽出する

curl -X 'POST' 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content' \
  -H 'Content-Type: application/json' \
  -H 'Authorization: Bearer <apiToken>' \
  -d '{"url": "https://developers.cloudflare.com/"}'

import Cloudflare from "cloudflare";

const client = new Cloudflare({
	apiToken: process.env["CLOUDFLARE_API_TOKEN"],
});

const content = await client.browserRendering.content.create({
	account_id: process.env["CLOUDFLARE_ACCOUNT_ID"],
	url: "https://developers.cloudflare.com/",
});

console.log(content);

interface Env {
	BROWSER: BrowserRun;
}

export default {
	async fetch(request, env): Promise<Response> {
		return await env.BROWSER.quickAction("content", {
			url: "https://developers.cloudflare.com/",
		});
	},
} satisfies ExportedHandler<Env>;

https://cloudflare.com/ に移動しますが、画像とスタイルシートの読み込みはブロックします。不要なリクエストは、リソースタイプ（rejectResourceTypes）または正規表現パターン（rejectRequestPattern）でブロックできます。逆に、allowRequestPattern または allowResourceTypes に一致するリクエストだけを許可することもできます。

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<accountId>/browser-rendering/content' \
  -H 'Authorization: Bearer <apiToken>' \
  -H 'Content-Type: application/json' \
  -d '{
      "url": "https://cloudflare.com/",
      "rejectResourceTypes": ["image"],
      "rejectRequestPattern": ["/^.*\\.(css)"]
		}'

setExtraHTTPHeaders での HTTP ヘッダー設定、cookies の設定、gotoOptions でのページ読み込み制御など、ほかにも多くのオプションがあります。利用可能なすべてのパラメータは、エンドポイントの リファレンス を確認してください。

JavaScript が多いページや Single Page Application（SPA）では、デフォルトのページ読み込み動作だと、空または不完全な結果が返ることがあります。ブラウザーが、JavaScript によるコンテンツ描画が終わる前にページ読み込み完了とみなすためです。

いちばん簡単な対処は、gotoOptions.waitUntil パラメータを networkidle0 または networkidle2 に設定することです。

{
	"url": "https://example.com",
	"gotoOptions": {
		"waitUntil": "networkidle0"
	}
}

より速い応答が必要な場合、上級者はネットワーク活動がすべて止まるのを待つのではなく、waitForSelector で特定の要素を待てます。必要なコンテンツが読み込まれたことを示す CSS セレクターを把握している必要があります。詳細は Quick Actions のタイムアウト を参照してください。

JSON 本文のトップレベルパラメーターとして userAgent を渡すと、ページ単位で User-Agent を変更できます。対象サイトが User-Agent に応じて別のコンテンツを返す場合に便利です。

質問がある場合やエラーが発生した場合は、Browser Run の FAQ とトラブルシューティングガイド を参照してください。