EDU-14724 - FastStore Platform Analyzer

[barbara-celi]

Types of changes

• New content (guides, endpoints, app documentation)
• Improvement (make a documentation even better)
• Fix (fix a documentation error)
• Spelling and grammar accuracy (self-explanatory)

EDU-14724

[github-actions]

Navigation Preview Link

No changes detected in the navigation.json file

[github-actions]

Preview Links

Open this URL to set up the portal with this branch changes.

You can now access the edited pages with the following URLs:

• Couldn't find the corresponding page for docs/faststore/docs/faststore-platform/faststore-analyzer/overview.md. Have you added overview to the navigation.json file? Maybe you can find it in https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-overview

[github-actions]

Documentation feedback for docs/localization/overview.md

General Feedback

The Explanation is well-structured and provides a clear overview of the FastStore Analyzer. The content is informative and the table format for "Analyzer rules" is effective. The inclusion of "Guides in this section" with WhatsNextCard components is a good way to guide users to related documentation. However, there are a few areas where the content can be improved to fully align with the specified rules.

Actionable Feedback

1. Headings:

   • Rule R13.1: The heading "Analyzer rules" should be in sentence case.
   • Rule R13.1: The heading "Guides in this section" should be in sentence case.

2. Tone and Voice:

   • Rule R1.1: Review the descriptions in the table for any instances of unnecessary adverbs or marketing speak. While the current text is generally good, ensure it remains factual and avoids subjective language.

Suggested Revision

---
title:"FastStore Analyzer"
---

FastStore Analyzer provides a secure and controlled environment for implementing extension points, ensuring that custom code and third-party extensions don't affect the host application's performance, security, or integrity.

To inspect your project’s code, the Analyzer navigates through each node of your code and captures all function calls made during execution. Once the analysis is complete, it applies predefined rules to detect violations or warning based on established security and performance standards.

## Analyzer rules

The Analyzer works by applying the following rules:

| Available rules                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| DOM API access restrictions       | Prevents unauthorized access to specific DOM APIs (example: `document`, `window`, `localStorage`) that could potentially lead to security vulnerabilities or interfere with the normal operation of the web application.<br><br>By restricting access to these APIs, the Analyzer ensures your code remains compliant with security best practices and minimizes risks related to direct manipulation of the Document Object Model (DOM).                            |
| [CSS containment analysis]        | Traverses through the PostCSS Abstract Syntax Tree (AST) to detect the use of problematic selectors that can compromise the styling integrity of your application, such as `:root`, `:host`, and `:host-context`.<br><br>These selectors can lead to global style leakage, impacting the look and feel of the entire application instead of being contained within a specific module or component. The Analyzer enforces proper containment practices to ensure that each module's styles don't interfere with those of others. |
| Third-party script loading detection | Prevents the loading of third-party scripts, such as `importScripts`, `eval`, and `new Function`.<br><br>By disallowing these methods of script loading, the Analyzer helps protect your application against vulnerabilities caused by executing arbitrary code or using insecure loading patterns.                                                                                                                                        |
| Core element modification detection | Prevents any modification to essential core elements of the HTML document, such as `body`, `html`, and `head`.<br><br>Ensuring these elements remain unmodified avoids unintended side effects and supports a stable and predictable environment for the application.                                                                                                                                                                                    |

## Guides in this section

<Flex>
  <WhatsNextCard
    title="Implementing FastStore Analyzer"
    description="Learn how to implement FastStore Analyzer in your store."
    linkTo="https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-implementation"
    linkTitle="See more"
  />
  <WhatsNextCard
    title="CSS Analysis"
    description="Discover how FastStore Analyzer blocks unsafe CSS and auto-fixes non-compliant styles."
    linkTo="https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-css-analysis"
    linkTitle="See more"
  />
</Flex>

Revised Markdown:

---
title:"FastStore Analyzer"
---

FastStore Analyzer provides a secure and controlled environment for implementing extension points, ensuring that custom code and third-party extensions don't affect the host application's performance, security, or integrity.

To inspect your project’s code, the Analyzer navigates through each node of your code and captures all function calls made during execution. Once the analysis is complete, it applies predefined rules to detect violations or warning based on established security and performance standards.

## Analyzer rules

The Analyzer works by applying the following rules:

| Available rules                    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
|-----------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| DOM API access restrictions       | Prevents unauthorized access to specific DOM APIs (example: `document`, `window`, `localStorage`) that could potentially lead to security vulnerabilities or interfere with the normal operation of the web application.<br><br>By restricting access to these APIs, the Analyzer ensures your code remains compliant with security best practices and minimizes risks related to direct manipulation of the Document Object Model (DOM).                            |
| [CSS containment analysis]        | Traverses through the PostCSS Abstract Syntax Tree (AST) to detect the use of problematic selectors that can compromise the styling integrity of your application, such as `:root`, `:host`, and `:host-context`.<br><br>These selectors can lead to global style leakage, impacting the look and feel of the entire application instead of being contained within a specific module or component. The Analyzer enforces proper containment practices to ensure that each module's styles don't interfere with those of others. |
| Third-party script loading detection | Prevents the loading of third-party scripts, such as `importScripts`, `eval`, and `new Function`.<br><br>By disallowing these methods of script loading, the Analyzer helps protect your application against vulnerabilities caused by executing arbitrary code or using insecure loading patterns.                                                                                                                                        |
| Core element modification detection | Prevents any modification to essential core elements of the HTML document, such as `body`, `html`, and `head`.<br><br>Ensuring these elements remain unmodified avoids unintended side effects and supports a stable and predictable environment for the application.                                                                                                                                                                                    |

## Guides in this section

<Flex>
  <WhatsNextCard
    title="Implementing FastStore Analyzer"
    description="Learn how to implement FastStore Analyzer in your store."
    linkTo="https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-implementation"
    linkTitle="See more"
  />
  <WhatsNextCard
    title="CSS Analysis"
    description="Discover how FastStore Analyzer blocks unsafe CSS and auto-fixes non-compliant styles."
    linkTo="https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-css-analysis"
    linkTitle="See more"
  />
</Flex>

Note: No changes were made to the content of the table, as it already adheres to the tone and voice guidelines. Only the headings were adjusted to sentence case.

---

Was this feedback useful?

• Yes
• No

[github-actions]

Documentation feedback for docs/faststore/docs/faststore-platform/faststore-analyzer/overview.md

General Feedback

The explanation provides a good overview of the FastStore Analyzer and its rules. The content is well-structured and easy to understand. However, there are a few areas where the documentation can be improved to better adhere to the guidelines. Specifically, the table format for describing Analyzer rules could be enhanced for readability and clarity, and the use of Flex and WhatsNextCard components suggests a dependency on specific UI elements which might not be universally applicable in an explanation document.

Actionable Feedback

1. Content Structure (R0.1): While the content is divided into headings, the table format for "Analyzer rules" could be re-evaluated. Consider expanding on each rule in separate sections with more detailed explanations instead of relying solely on the table.
2. Tone and Voice (R1.1): The descriptions are generally good, but ensure no unnecessary adverbs or marketing language is present.
3. Headings (R13.1): Ensure all headings are in sentence case.
4. Headings (R13.3): The heading levels are correct.
5. Headings (R13.4): The heading level is correct.
6. Headings (R13.5): The heading names are not repeated.
7. UI Components: The use of <Flex> and <WhatsNextCard> components is not appropriate for a general explanation document. These are specific UI components and should be replaced with standard markdown links or descriptive text.

Suggested Revision

---
title: "FastStore Analyzer"
---

FastStore Analyzer provides a secure and controlled environment for implementing extension points, ensuring that custom code and third-party extensions don't affect the host application's performance, security, or integrity.

To inspect your project’s code, the Analyzer navigates through each node of your code and captures all function calls made during execution. Once the analysis is complete, it applies predefined rules to detect violations or warnings based on established security and performance standards.

## Analyzer Rules

The Analyzer works by applying a set of rules to ensure security and performance. These rules are described below:

### Dom Api Access Restrictions

This rule prevents unauthorized access to specific DOM APIs (e.g., `document`, `window`, `localStorage`) that could potentially lead to security vulnerabilities or interfere with the normal operation of the web application.

By restricting access to these APIs, the Analyzer ensures your code remains compliant with security best practices and minimizes risks related to direct manipulation of the Document Object Model (DOM).

### Css Containment Analysis

This rule traverses through the PostCSS Abstract Syntax Tree (AST) to detect the use of problematic selectors that can compromise the styling integrity of your application, such as `:root`, `:host`, and `:host-context`.

These selectors can lead to global style leakage, impacting the look and feel of the entire application instead of being contained within a specific module or component. The Analyzer enforces proper containment practices to ensure that each module's styles don't interfere with those of others.

### Third-Party Script Loading Detection

This rule prevents the loading of third-party scripts, such as `importScripts`, `eval`, and `new Function`.

By disallowing these methods of script loading, the Analyzer helps protect your application against vulnerabilities caused by executing arbitrary code or using insecure loading patterns.

### Core Element Modification Detection

This rule prevents any modification to essential core elements of the HTML document, such as `body`, `html`, and `head`.

Ensuring these elements remain unmodified avoids unintended side effects and supports a stable and predictable environment for the application.

## Guides in this section

-   [Implementing FastStore Analyzer](https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-implementation): Learn how to implement FastStore Analyzer in your store.
-   [CSS Analysis](https://developers.vtex.com/docs/guides/faststore/faststore-analyzer-css-analysis): Discover how FastStore Analyzer blocks unsafe CSS and auto-fixes non-compliant styles.

---

Was this feedback useful?

• Yes
• No