[CF4SaaS] Use APIRequest component (#22410)

RebeccaTamachiro · web-flow · commit 7880cb3ffa24 · 2025-05-14T18:09:44.000+01:00
* First pass search for bash blocks and import APIRequest

* Add placeholder component syntax

* Remove component for missing csrs endpoint

* Remove unused APIRequest component from uploading-certificates

* Fill in APIRequest throughout

* Fix breaking issues

* Remove original bash code blocks
diff --git a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx b/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata.mdx
@@ -7,7 +7,7 @@ head: []
 description: Configure per-hostname settings such as URL rewriting and custom headers.
 ---
 
-import { Render } from "~/components";
+import { Render, APIRequest } from "~/components";
 
 You may wish to configure per-hostname (customer) settings beyond the scale of Page Rules or Rate Limiting, which have a maximum of 125 rules each.
 
@@ -32,26 +32,24 @@ Please speak with your Solutions Engineer to discuss additional logic and requir
 
 You may add custom metadata to Cloudflare via the Custom Hostnames API. This data can be added via a [`PATCH` request](/api/resources/custom_hostnames/methods/edit/) to the specific hostname ID to set metadata for that hostname, for example:
 
-```bash
-curl --request PATCH \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames/{hostname_id}" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{
-  "ssl": {
+
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames/{custom_hostname_id}"
+  method="PATCH"
+  json={{
+		"ssl": {
     "method": "http",
     "type": "dv"
   },
   "custom_metadata": {
     "customer_id": "12345",
     "redirect_to_https": true,
     "security_tag": "low"
-  }
-}'
-```
+  },
+	}}
+/>
 
-Changes to metadata will propagate across Cloudflare’s edge within 30 seconds.
+Changes to metadata will propagate across Cloudflare's edge within 30 seconds.
 
 ---
 
@@ -103,7 +101,7 @@ lookup_json_string(cf.hostname.metadata, "security_tag") eq "low"
 - Define fallback behaviour in the non-presence of metadata
 - Define fallback behaviour if a key or value in the metadata are unknown
 
-General guidance is to follow [Google’s JSON Style guide](https://google.github.io/styleguide/jsoncstyleguide.xml) where appropriate.
+General guidance is to follow [Google's JSON Style guide](https://google.github.io/styleguide/jsoncstyleguide.xml) where appropriate.
 
 ---
 
@@ -112,7 +110,7 @@ General guidance is to follow [Google’s JSON Style guide](https://google.githu
 There are some limitations to the metadata that can be provided to Cloudflare:
 
 - It must be valid JSON.
-- Any origin resolution — for example, directing requests for a given hostname to a specific backend — must be provided as a hostname that exists within Cloudflare’s DNS (even for non-authoritative setups). Providing an IP address directly will cause requests to error.
+- Any origin resolution — for example, directing requests for a given hostname to a specific backend — must be provided as a hostname that exists within Cloudflare's DNS (even for non-authoritative setups). Providing an IP address directly will cause requests to error.
 - The total payload must not exceed 4 KB.
 - It requires a Cloudflare Worker that knows how to process the schema and trigger logic based on the contents.
 - Custom metadata cannot be set on custom hostnames that contain wildcards.
diff --git a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/performance/early-hints-for-saas.mdx b/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/performance/early-hints-for-saas.mdx
@@ -6,6 +6,8 @@ sidebar:
 
 ---
 
+import { APIRequest } from "~/components";
+
 [Early Hints](/cache/advanced-configuration/early-hints/) allows the browser to begin loading resources while the origin server is compiling the full response. This improves webpage’s loading speed for the end user. As a SaaS provider, you may prioritize speed for some of your custom hostnames. Using custom metadata, you can [enable Early Hints](/cache/advanced-configuration/early-hints/#enable-early-hints) per custom hostname.
 
 ***
@@ -24,56 +26,53 @@ Before you can employ Early Hints for SaaS, you need to create a custom hostname
 
 3. If you are [creating a new custom hostname](/api/resources/custom_hostnames/methods/create/), make an API call such as the example below, specifying `"early_hints": "on"`:
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{
-  "hostname": "{hostname}",
-  "ssl": {
-    "method": "http",
-    "type": "dv",
-    "settings": {
-      "http2": "on",
-      "min_tls_version": "1.2",
-      "tls_1_3": "on",
-      "early_hints": "on"
-    },
-    "bundle_method": "ubiquitous",
-    "wildcard": false
-  }
-}'
-```
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames"
+  method="POST"
+  json={{
+		"hostname": "<CUSTOM_HOSTNAME>",
+		"ssl": {
+			"method": "http",
+			"type": "dv",
+			"settings": {
+				"http2": "on",
+				"min_tls_version": "1.2",
+				"tls_1_3": "on",
+				"early_hints": "on"
+				},
+				"bundle_method": "ubiquitous",
+				"wildcard": false
+			},
+	}}
+/>
 
 4. For an existing custom hostname, locate the `id` of that hostname via a `GET` call:
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames?hostname={hostname}" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>"
-```
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames"
+  method="GET"
+  parameters={{
+		hostname:"{hostname}"
+	}}
+/>
 
 5. Then make an API call such as the example below, specifying `"early_hints": "on"`:
 
-```bash
-curl --request PATCH \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames/{id}" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{
-  "ssl": {
-    "method": "http",
-    "type": "dv",
-    "settings": {
-      "http2": "on", // Note: These settings will be set to default if not included when updating early hints
-      "min_tls_version": "1.2",
-      "tls_1_3": "on",
-      "early_hints": "on"
-    }
-  }
-}'
-```
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames/{custom_hostname_id}"
+  method="PATCH"
+  json={{
+		"ssl": {
+			"method": "http",
+			"type": "dv",
+			"settings": {
+				"http2": "on", // Note: These settings will be set to default if not included when updating early hints
+				"min_tls_version": "1.2",
+				"tls_1_3": "on",
+				"early_hints": "on"
+				}
+			},
+	}}
+/>
 
 Currently, all options within `settings` are required in order to prevent those options from being set to default. You can pull the current settings state prior to updating Early Hints by leveraging the output that returns the `id` for the hostname.
diff --git a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/security/certificate-management/custom-certificates/certificate-signing-requests.mdx b/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/security/certificate-management/custom-certificates/certificate-signing-requests.mdx
@@ -9,7 +9,7 @@ head:
 
 ---
 
-import { Render } from "~/components"
+import { Render, APIRequest } from "~/components"
 
 <Render file="csr-definition" product="ssl" />
 
@@ -79,7 +79,6 @@ curl https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_csrs \
     "csr": "-----BEGIN CERTIFICATE REQUEST-----\nMIIBSzCB8gIBADBiMQswaQYDVQQGEwJVUzELMAkGA1UECBMCTUExDzANBgNVBAcT\nBkJvc3RvbjEaMBgGA1UEChMRQ2l0eSBvZiBDaGFtcGlvbnMxGTAXBgNVBAMTEGNz\nci1wcm9kLnRscy5mdW4wWTATBgcqhkjOPQIBBggqhkjOPQMBBwNCAaTKf70NYlwr\n20P6P8xj8/4mTN5q28dbZR/gM3u4m/RPs24+PxAfMZCNvkVKAPVWYfUAadZI4Ha/\ndxLh5Q6X5bhIoC4wLAYJKoZIhvcNAQkOMR8wHTAbBqNVHREEFDASghBjc3ItcHJv\nZC50bHMuZnVuMAoGCCqGSM49BAMCA0gAMEUCIQDgtFUZav466SbT2FGBsIBlahDI\nVkg4y+u+V/K5DlY1+gIgQ9xLfUSKnSnJYbM9TwWr4Z964+lBtB9af4O5pp7/PSA=\n-----END CERTIFICATE REQUEST-----\n"
   },
   "success": true
-}
 ```
 
 Replace the `\n` characters with actual newlines before passing to your customer. This can be accomplished by piping the output of the prior call to a tool like jq and perl, such as:
diff --git a/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/security/waf-for-saas/index.mdx b/src/content/docs/cloudflare-for-platforms/cloudflare-for-saas/security/waf-for-saas/index.mdx
@@ -6,6 +6,8 @@ sidebar:
   label: Setup
 ---
 
+import { APIRequest } from "~/components";
+
 [Web Application Firewall (WAF)](/waf/) allows you to create additional security measures through Cloudflare. As a SaaS provider, you can link custom rules, rate limiting rules, and managed rules to your custom hostnames. This provides more control to keep your domains safe from malicious traffic.
 
 As a SaaS provider, you may want to apply different security measures to different custom hostnames. With WAF for SaaS, you can create multiple WAF configuration that you can apply to different sets of custom hostnames. This added flexibility and security leads to optimal protection across the domains of your end customers.
@@ -18,13 +20,16 @@ Before you can use WAF for SaaS, you need to create a custom hostname. Review [G
 
 You can also create a custom hostname through the API:
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{"Hostname":"example.com"}, "Ssl":{wildcard:false}}'
-```
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames"
+  method="POST"
+  json={{
+		"hostname": "<CUSTOM_HOSTNAME>",
+		"ssl": {
+			wildcard: false
+		},
+	}}
+/>
 
 ## 1. Associate custom metadata to a custom hostname
 
@@ -36,11 +41,10 @@ To apply WAF to your custom hostname, you need to create an association between
 
 3. Locate your custom hostname ID by making a `GET` call in the API:
 
-```bash
-curl "https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames" \
---header "X-Auth-Email: <EMAIL>" \
---header "X-Auth-Key: <API_KEY>"
-```
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames"
+  method="GET"
+/>
 
 4. Plan your [custom metadata](/cloudflare-for-platforms/cloudflare-for-saas/domain-support/custom-metadata/). It is fully customizable. In the example below, we have chosen the tag `"security_level"` to which we expect to assign three values (low, medium, and high).
 
@@ -52,19 +56,16 @@ One instance of low, medium, and high rules could be rate limiting. You can spec
 
 5. Make an API call in the format below using your Cloudflare email and the IDs gathered above:
 
-```bash
-curl --request PATCH \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/custom_hostnames/{custom_hostname_id}" \
---header "X-Auth-Email: <EMAIL>"
---header "X-Auth-Key: <API_KEY>" \
---header "Content-Type: application/json" \
---data '{
-  "custom_metadata": {
+<APIRequest
+  path="/zones/{zone_id}/custom_hostnames/{custom_hostname_id}"
+  method="PATCH"
+  json={{
+		"custom_metadata": {
     "customer_id": "12345",
     "security_level": "low"
-  }
-}'
-```
+		},
+	}}
+/>
 
 This assigns custom metadata to your custom hostname so that it has a security tag associated with its ID.
 
@@ -74,29 +75,30 @@ This assigns custom metadata to your custom hostname so that it has a security t
 
 2. Build your rules either [through the dashboard](/waf/custom-rules/create-dashboard/) or via the API. An example rate limiting rule, corresponding to `"security_level"` low, is shown below as an API call.
 
-```bash
-curl --request PUT \
-"https://api.cloudflare.com/client/v4/zones/{zone_id}/rulesets/phases/http_ratelimit/entrypoint" \
---header "Authorization: Bearer <API_TOKEN>" \
---header "Content-Type: application/json" \
---data '{
-  "rules": [
-    {
-      "action": "block",
-      "ratelimit": {
-        "characteristics": [
-          "cf.colo.id",
-          "ip.src"
-        ],
-        "period": 10,
-        "requests_per_period": 2,
-        "mitigation_timeout": 60
-      },
-      "expression": "lookup_json_string(cf.hostname.metadata, \"security_level\") eq \"low\" and http.request.uri contains \"login\""
-    }
-  ]
-}'
-```
+<APIRequest
+  path="/zones/{zone_id}/rulesets/phases/{ruleset_phase}/entrypoint"
+  method="PUT"
+  json={{
+		"rules": [
+			{
+				"action": "block",
+				"ratelimit": {
+					"characteristics": [
+						"cf.colo.id",
+						"ip.src"
+					],
+					"period": 10,
+					"requests_per_period": 2,
+					"mitigation_timeout": 60
+				},
+				"expression": "lookup_json_string(cf.hostname.metadata, \"security_level\") eq \"low\" and http.request.uri contains \"login\""
+			}
+		]
+	}}
+	parameters={{
+		ruleset_phase: "http_ratelimit"
+	}}
+/>
 
 To build rules through the dashboard:
 
