ความเสี่ยงด้านความปลอดภัยข้ามแอปพลิเคชัน

Micro Frontends offer great flexibility by breaking down monolithic applications. However, this modularity introduces unique security challenges when multiple independent applications collaborate.

Understanding how these separate pieces interact and what risks arise from their cross-application communication and shared environment is crucial for building secure systems.

The Same-Origin Policy (SOP) is a fundamental browser security mechanism. It prevents web pages from interacting with resources from a different origin (domain, protocol, port).

In Micro Frontends, even if all modules are on the same top-level domain, if they're on different subdomains or ports, SOP might treat them as distinct origins. Misconfigurations here can lead to unintended cross-origin access.

Cross-Site Scripting (XSS) occurs when malicious scripts are injected into trusted websites. In an MFE setup, an XSS vulnerability in one remote application can be particularly dangerous:

• A compromised remote module could inject scripts into the host application.
• These scripts could then steal cookies, session tokens, or deface the entire user interface, affecting all federated modules.

Proper input sanitization and output encoding are vital across all modules.

A Content Security Policy (CSP) is a powerful defense against XSS. It allows you to specify which sources of content (scripts, styles, images) are allowed to be loaded by the browser.

For MFEs, a comprehensive CSP should be defined by the host application, accounting for all legitimate script and style sources from its remote modules. This limits the impact of an XSS attack by preventing the execution of unauthorized scripts.

Cross-Site Request Forgery (CSRF) attacks trick a user's browser into performing unwanted actions on a web application where they are authenticated. This can be tricky in MFEs.

If different federated modules share authentication contexts (e.g., cookies), a CSRF attack targeting one module could potentially affect actions in another. Each MFE's critical actions should be protected with unique, short-lived CSRF tokens.

Communication between Micro Frontends, whether direct or via a shared event bus, must be secure. Using HTTPS is non-negotiable for all network traffic between modules and the host.

If MFEs communicate using custom events or shared global objects, ensure that sensitive data is not passed directly or is properly sanitized and validated by the receiving module. Treat all incoming data, even from other MFEs, as potentially untrusted.

One of the silent risks in MFEs is unintentional data leakage or unauthorized access between modules. This can happen if:

• Global state is shared without proper access control.
• A remote module has broader permissions than it needs.
• Sensitive data is exposed via public APIs that are not properly secured.

Implement strict data contracts and ensure modules only access data relevant to their function.

Micro Frontends often rely heavily on shared libraries and third-party dependencies. A vulnerability introduced into a common utility library or a compromised build tool can affect your entire federated ecosystem.

This is known as a supply chain attack. Regularly scan dependencies for known vulnerabilities, vet third-party sources, and maintain tight control over your build and deployment pipelines for all federated applications.

For highly sensitive or potentially untrusted third-party remote applications, consider stronger isolation techniques:

• Iframes: Can provide a strong security boundary, isolating scripts and styles, but come with integration challenges.
• Web Workers: For computations, they run in a separate thread, preventing direct DOM access and thus limiting potential harm from malicious scripts.

Choose isolation based on the trust level and integration needs of the remote module.

Which of the following are effective strategies to mitigate Cross-Site Scripting (XSS) risks in a Micro Frontend architecture?

In this lesson, we explored common cross-application security risks in Micro Frontends, including XSS propagation, CSRF, insecure communication, data leakage, and supply chain vulnerabilities.

Remember to implement a multi-layered defense: strong CSPs, rigorous input sanitization, secure communication (HTTPS), and careful access control are essential for building resilient and secure federated applications.