Using Third-Party Library with Web Pixel App Extensions APIs

[Giac25]

Hi everyone,

I'm trying to use a third-party library within the sandbox environment of the Web Pixel app extensions API. However, I'm encountering an issue with the sandbox restrictions preventing this integration.

Would it be a compliant solution, according to Shopify app requirements, to send events outside the sandbox by calling self.postMessage() and passing the data directly to the third-party library in the web page, which is loaded via the App Embed block?

Thanks in advance for your help!

[oscprofessional]

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)

1. Use the “self.postMessage()” to send the required data to the parent’s page
2. 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 //

1. In the Parent Page (Loaded via App Embed Block):
2. You can add an event listener to handle messages from the sandboxed iframe.
3. 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:

1. 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.

1. 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.

1. 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.

[Giac25]

@oscprofessional , thank you so much for you detailed reply!

Unfortunately, the data sent via self.postMessage() is not reaching the top window. I suspect this is because the Webpixel is running inside a web worker. Do you have any ideas on how we could access it from the top window?

Thank you again,

Giacomo