[Page Shield] Expand get started / Use Steps component (#24768)

Author: pedrosousa

src/content/docs/page-shield/best-practices/handle-an-alert.mdx

@@ -7,20 +7,26 @@ sidebar:
   label: Handle an alert
 ---
 
-If you receive a client-side resource alert, sometimes you need to perform some manual investigation to confirm the nature of the script. Use the guidance provided in this page as a starting point for your investigation.
+import { Steps } from "~/components";
+
+If you receive a [client-side resource alert](/page-shield/alerts/alert-types/), sometimes you need to perform some manual investigation to confirm the nature of the script. Use the guidance provided in this page as a starting point for your investigation.
 
 ## 1. Understand what triggered the alert
 
 Start by identifying the [detection system](/page-shield/how-it-works/malicious-script-detection/) that triggered the alert. A link is provided in the alert that will send you directly to the Cloudflare dashboard to the relevant resource that needs reviewing. Alternatively, do the following:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Navigate to the client-side resource monitoring page:
    - Old dashboard: Go to **Security** > **Page Shield**.
    - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
 3. Select **Scripts** or **Connections** and search for the resource mentioned on the alert you received.
 4. Select **Details** next to the resource you identified. The example screenshot below shows a malicious script resource.
 
-![Dialog box showing the details of a script considered malicious.](~/assets/images/page-shield/handle-alert-malicious-script-example.png)
+   ![Dialog box showing the details of a script considered malicious.](~/assets/images/page-shield/handle-alert-malicious-script-example.png)
+
+</Steps>
 
 The details page will specify which detection system triggered the alert. Check the values of the following fields:
 
@@ -34,16 +40,24 @@ Different detection mechanisms may consider the script malicious at the same tim
 
 If you received an alert for a potentially malicious script:
 
+<Steps>
+
 1. Navigate to the page on your website that is loading the script or performing the connection. Open a browser and navigate to one of the URLs in the **Page URLs** field (shown in the script details dialog box).
 
 2. Open the browser's developer tools to confirm that the script is being loaded. You can check this in the developer tools' **Network** tab, searching for the script name, URL, or hostname.
 
+</Steps>
+
 If you received an alert for a potentially malicious connection:
 
+<Steps>
+
 1. Go to the page on your website where the connection that triggered the alert is being made. Open a browser and go to one of the URLs specified in the **Page URLs** field (shown in the connection details dialog box).
 
 2. Open the browser's developer tools to confirm that the connection is being made. You can check this in the developer tools' **Network** tab, searching for the target hostname of the connection.
 
+</Steps>
+
 If you find the script or connection, this means the script is being loaded (or the connection is being established) for all website visitors — proceed to [step 3](#3-check-the-script-reputation).
 
 If you do not find the script being loaded or the connection being made, this could mean one of the following:
@@ -70,10 +84,14 @@ If you believe that Cloudflare's classification is a false positive, contact you
 
 You could use a virtual machine to perform some of the following analysis:
 
+<Steps>
+
 1. Open the script URL and get the script source code. If the script is obfuscated or encoded, this could be a sign that the script is malicious.
 2. Scan the script source code for any hostnames or IP addresses.
 3. For each hostname or IP address you identified, use Cloudflare's Security Center Investigate platform to look up threat information and/or search online for potential Indicators of Compromise.
 
+</Steps>
+
 ---
 
 ## Conclusion

src/content/docs/page-shield/detection/monitor-connections-scripts.mdx

@@ -5,13 +5,13 @@ sidebar:
   order: 2
 ---
 
-import { Render } from "~/components";
+import { Render, Markdown, Steps } from "~/components";
 
 Once you [activate Page Shield's client-side resource monitoring](/page-shield/get-started/), the main client-side resources dashboard will show which resources (scripts and connections) are running on your domain, as well as the cookies recently detected in HTTP traffic.
 
 If you notice unexpected scripts or connections on the dashboard, check them for signs of malicious activity. Enterprise customers with a paid add-on will have their [connections and scripts classified as potentially malicious](/page-shield/how-it-works/malicious-script-detection/) based on threat feeds. You should also check for any new or unexpected cookies.
 
-:::note
+:::note[Notes]
 
 - Users in Free and Pro plans only have access to script monitoring.
 - If you recently activated client-side resource monitoring, you may see a delay in reporting.
@@ -22,27 +22,43 @@ If you notice unexpected scripts or connections on the dashboard, check them for
 
 To review the resources detected by Cloudflare:
 
+{/* prettier-ignore-start */}
+
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 
 2. Go to the client-side resources page:
    - Old dashboard: Go to **Security** > **Page Shield**.
    - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
 
-3. Review the list of scripts, connections, and cookies for your domain. To apply a filter, select **Add filter** and use one or more of the available options:
+3. Review the list of scripts, connections, and cookies for your domain, depending on your plan. To apply a filter, select **Add filter** and use one or more of the available options.
+
+   <details>
+   <summary>Available filters</summary>
+
+   - **Status**: Filter scripts or connections by [status](/page-shield/reference/script-statuses/).
    - **Script URL**: Filter scripts by their URL.
    - **Connection URL**: Filter connections by their target URL. Depending on your [configuration](/page-shield/reference/settings/#connection-target-details), it may search only by target hostname.
    - **Seen on host**: Look for scripts appearing on specific hostnames, or connections made in a specific hostname.
    - **Seen on page** (requires a Business or Enterprise plan): Look for scripts appearing in a specific page, or for connections made in a specific page. Searches the first page where the script was loaded (or where the connection was made) and the latest occurrences list.
-   - **Status**: Filter scripts or connections by [status](/page-shield/reference/script-statuses/).
    - **Type**: Filter cookies according to their type: first-party cookies or unknown.
    - Cookie property: Filter by a cookie property such as **Name**, **Domain**, **Path**, **Same site**, **HTTP only**, and **Secure**.
 
+   </details>
+
 4. Depending on your plan, you may be able to [view the details of each item](#view-details).
 
+</Steps>
+
+{/* prettier-ignore-end */}
+
 ## View all reported scripts or connections
 
 The All Reported Connections and All Reported Scripts dashboards show all the detected resources including infrequent or inactive ones, reported in the last 30 days. After 30 days without any report, Cloudflare will delete information about a previously reported resource, and it will no longer appear in any of the dashboards.
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to the client-side resources page:
    - Old dashboard: Go to **Security** > **Page Shield**.
@@ -52,6 +68,8 @@ The All Reported Connections and All Reported Scripts dashboards show all the de
 4. Select **View all scripts** or **View all connections**.
 5. Review the information displayed in the dashboard.
 
+</Steps>
+
 You can filter the data in these dashboards using different criteria, and print a report with the displayed records.
 
 ## View details
@@ -60,7 +78,21 @@ You can filter the data in these dashboards using different criteria, and print
 Only available to customers on Business and Enterprise plans.
 :::
 
-To view the details of an item, select **Details** next to it.
+To view the details of an item:
+
+<Steps>
+
+1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
+
+2. Go to the client-side resources page:
+   - Old dashboard: Go to **Security** > **Page Shield**.
+   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+
+3. Select **Scripts**, **Connections**, or **Cookies** (the available options depend on your plan).
+
+4. Next to a script, connection, or cookie in the list, select **Details**.
+
+</Steps>
 
 ### Script and connection details
 
@@ -116,6 +148,8 @@ Use this feature to extract data from Page Shield that you can review and annota
 
 To export script, connection, or cookie information in CSV format:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to the client-side resources page:
    - Old dashboard: Go to **Security** > **Page Shield**.
@@ -124,3 +158,5 @@ To export script, connection, or cookie information in CSV format:
 3. Select **Scripts**, **Connections**, or **Cookies**.
 4. (Optional) Apply any filters to the displayed data.
 5. Select **Download CSV**.
+
+</Steps>

src/content/docs/page-shield/detection/review-changed-scripts.mdx

@@ -7,6 +7,8 @@ head: []
 description: Learn how to review scripts on your domain after receiving a code change alert.
 ---
 
+import { Steps } from "~/components";
+
 :::note
 Available as a paid add-on for customers on an Enterprise plan.
 :::
@@ -17,10 +19,13 @@ You can configure a notification for [code change alerts](/page-shield/alerts/al
 
 When you receive such a notification:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to the client-side resources page:
-
    - Old dashboard: Go to **Security** > **Page Shield**.
    - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
 
 3. Check the details of each changed script and validate if it is an expected change.
+
+</Steps>

src/content/docs/page-shield/detection/review-malicious-scripts.mdx

@@ -8,7 +8,7 @@ description: Learn how to review scripts and connections that Page Shield
   considered malicious.
 ---
 
-import { Render } from "~/components";
+import { Render, Steps } from "~/components";
 
 :::note
 Only available to Enterprise customers with a paid add-on.
@@ -20,6 +20,8 @@ Cloudflare displays scripts and connections considered malicious at the top of t
 
 To review the scripts considered malicious:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 
 2. Go to the client-side resources page:
@@ -41,12 +43,16 @@ To review the scripts considered malicious:
 
 5. Based on the displayed information, and with the help of the [last seen/first seen fields in the script details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious script was detected.
 
+</Steps>
+
 You can configure alerts for detected malicious scripts. Refer to [Alerts](/page-shield/alerts/) for more information.
 
 ## Review malicious connections
 
 To review the connections considered malicious:
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 
 2. Go to the client-side resources page:
@@ -63,3 +69,5 @@ To review the connections considered malicious:
    For more information, refer to [Malicious script and connection detection](/page-shield/how-it-works/malicious-script-detection/).
 
 5. Based on the displayed information, and with the help of the [last seen/first seen fields in the connection details](/page-shield/detection/monitor-connections-scripts/#view-details), review and update the pages where the malicious connection was detected.
+
+</Steps>

src/content/docs/page-shield/get-started.mdx

@@ -9,35 +9,56 @@ head:
 description: Learn how to get started with client-side resource monitoring.
 ---
 
-import { Tabs, TabItem, Render } from "~/components";
+import { Tabs, TabItem, Render, Steps } from "~/components";
 
 ## Activate client-side resource monitoring
 
 To enable client-side resource monitoring:
 
 <Tabs syncKey="dashNewNav"> <TabItem label="Old dashboard">
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **Page Shield**.
 3. Select **Enable Page Shield**.
 
+</Steps>
+
 If you do not have access to Page Shield in the Cloudflare dashboard, check if your user has one of the [necessary roles](/page-shield/reference/roles-and-permissions/).
 
 </TabItem> <TabItem label="New dashboard" icon="rocket">
 
+<Steps>
+
 1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/), and select your account and domain.
 2. Go to **Security** > **Settings** and filter by **Client-side abuse**.
 3. Turn on **Continuous script monitoring**.
 
+</Steps>
+
 If you do not have access to resource monitoring in the Cloudflare dashboard, check if your user has one of the [necessary roles](/page-shield/reference/roles-and-permissions/).
 
 </TabItem> </Tabs>
 
-## Review detected scripts
+## Review detected resources
 
 When you enable client-side resource monitoring, it may take a while to get the list of detected scripts in your domain.
 
-Review the scripts displayed in the [resource monitoring dashboard](/page-shield/detection/monitor-connections-scripts/), checking them for signs of malicious activity.
+To review the scripts detected by Cloudflare:
+
+<Steps>
+
+1. Go to the client-side resources page:
+   - Old dashboard: Go to **Security** > **Page Shield**.
+   - New security dashboard: Go to **Security** > **Web assets** > **Client-side resources** tab.
+
+2. Review the list of detected scripts, checking for any unknown or unexpected scripts.<br/>
+   [Depending on your plan](/page-shield/#availability), Cloudflare will also:
+   - Inform you if a script is [considered malicious](/page-shield/how-it-works/malicious-script-detection/).
+   - [Show the details](/page-shield/detection/monitor-connections-scripts/#script-and-connection-details) about each detected script.
+
+</Steps>
 
 Depending on your plan, you may be able to also review the connections made by scripts in your domain's pages and check them for malicious activity.
 
@@ -48,7 +69,7 @@ Depending on your plan, you may be able to also review the connections made by s
 	product="page-shield"
 	params={{
 		availabilityDetails:
-			"The available alert types depend on your Cloudflare plan.",
+			"The [available alert types](/page-shield/alerts/alert-types/) depend on your Cloudflare plan.",
 	}}
 />
 
@@ -60,12 +81,30 @@ Depending on your plan, you may be able to also review the connections made by s
 Only available to Enterprise customers with a paid add-on.
 :::
 
-[Policies](/page-shield/policies/), called content security rules in the [new security dashboard](/security/), define allowed resources on your websites. Create policies to implement a positive security model [^1].
+[Policies](/page-shield/policies/) — called content security rules in the [new security dashboard](/security/) — define allowed resources on your websites. Create policies to implement a positive security model[^1].
 
-1. [Create a policy](/page-shield/policies/create-dashboard/) with the _Log_ action.
+[^1]: A positive security model is one that defines what is allowed and rejects everything else. In contrast, a negative security model defines what will be rejected and accepts the rest.
 
-2. After some time, [review the list of policy violations](/page-shield/policies/violations/) to make sure the policy is correct. Update the policy if needed.
+### 1. Create a policy with the Log action
 
-3. Change the policy action to _Allow_ to start blocking resources not covered by the policy.
+When you create a policy with the [_Log_ action](/page-shield/policies/#policy-actions), Cloudflare logs any resources not covered by the policy, without blocking any resources. Use this action to validate a new policy before deploying it.
 
-[^1]: A positive security model is one that defines what is allowed and rejects everything else. In contrast, a negative security model defines what will be rejected and accepts the rest.
+<Render
+	file="policy-create"
+	params={{ policyAction: "Log" }}
+	product="page-shield"
+/>
+
+### 2. Review policy violations
+
+Resources not covered by the policy you created will be reported as [policy violations](/page-shield/policies/violations/). After some time, review the list of policy violations to make sure the policy is correct.
+
+<Render file="policy-review-violations" product="page-shield" />
+
+Update the policy if needed.
+
+### 3. Change policy action to Allow
+
+Once you have verified that your policy is correct, change the policy action from _Log_ to _Allow_.
+
+When you use the [_Allow_ action](/page-shield/policies/#policy-actions), Cloudflare starts blocking any resources not explicitly allowed by the policy.