# Sandbox ``` ## Merchant page JavaScript implementation [#merchant-page-javascript-implementation] This example implements page-state management, secure postMessage listeners with origin validation, and handlers for different presentation modes (`popup`, `modal`, `payment-handler`). ```javascript class PageState { state = { presentationMode: null, lastPostMessage: null, merchantDomain: null, }; constructor() { this.merchantDomain = window.location.origin; } set presentationMode(value) { this.state.presentationMode = value; const element = document.getElementById("presentationMode"); element.innerHTML = value; } set lastPostMessage(event) { const statusContainer = document.getElementById("postMessageStatus"); statusContainer.innerHTML = JSON.stringify(event.data); this.state.lastPostMessage = event; } } const pageState = new PageState(); // Setup secure postMessage listener with origin validation function setupPostMessageListener() { window.addEventListener("message", (event) => { // 🔒 CRITICAL: Always validate origin to prevent XSS attacks! if (event.origin !== "http://localhost:3000") { return; } pageState.lastPostMessage = event; const { eventName, data } = event.data; const { presentationMode } = pageState; if (eventName === "presentationMode-changed") { const { presentationMode } = data; pageState.presentationMode = presentationMode; } else if (presentationMode === "popup") { popupPresentationModePostMessageHandler(event); } else if (presentationMode === "modal") { modalPresentationModePostMessageHandler(event); } }); } ``` ## PayPal ` ``` ## PostMessage origin validation [#postmessage-origin-validation] This example implements critical security measures, such as validating message origins to prevent XSS attacks and ensuring that only trusted domains can communicate with your application. ```javascript // ✅ ALWAYS validate message origin window.addEventListener("message", (event) => { if (event.origin !== expectedOrigin) { return; // Ignore messages from unknown origins } // Process trusted message }); // ❌ NEVER accept messages without validation window.addEventListener("message", (event) => { // Vulnerable to XSS attacks! processMessage(event.data); }); ``` ## Content security policy header configuration [#content-security-policy-header-configuration] [Content Security Policy (CSP) headers](https://content-security-policy.com/) control resource loading and prevent unauthorized script execution while allowing necessary PayPal SDK and `