Hello @Giac25 ,
Yes, sending events outside the sandbox by calling the “self.postMessage()” and passing the data directly to the third-party library in the web (loaded via the App Embed Block) can be a compliant solution according to Shopify app requirements,
This method makes sure the “postMessage” API safely sends data from the sandbox context to your parent page , where the third-party library can process your data
Approach:
- Inside the Sandbox (Web Pixel App Extension)
- Use the “self.postMessage()” to send the required data to the parent’s page
- Make sure the data is consistent and secure
Ex:-
const data = { eventType: ‘someEvent’, eventData: {…} };
self.postMessage(data, ‘*’);
// ‘*’ can be replaced with the specific target origin //
- In the Parent Page (Loaded via App Embed Block):
- You can add an event listener to handle messages from the sandboxed iframe.
- You can Process the received data using your third-party library.
Ex:-
window.addEventListener(‘message’, (event) => {
// Add validation to check the origin if necessary
if (event.origin === ‘expected-origin’) {
const eventData = event.data;
// Use the third-party library to handle the event data
thirdPartyLibrary.processEvent(eventData);
}
});
Compliance and Security Considerations:
- Data Handling:
Make sure the information you’re sending doesn’t include anything private unless it’s absolutely needed, and make sure it’s well protected. Check and clean up any incoming data to stop things like sneaky code injections.
- Origin Validation:
Always double-check where messages are coming from on the page you’re sending them to. This helps keep out any bad stuff that might try to sneak in and mess things up.
- Shopify Guidelines:
Stick to Shopify’s rules to keep everyone’s data safe and sound. Only collect what you really need from users, and be super clear about what you’re taking and why. And make sure your security game is top-notch to keep everything locked up tight.