Cypress自动化Shopify商店时无法验证请求源自Shopify的问题求助

Hey there! Let's tackle this "Could not verify that the request originated from Shopify" issue you're hitting with Cypress automation. This is super common when testing Shopify stores because of their strict built-in security checks, so let's break down practical fixes step by step:

1. Temporarily Bypass HMAC Verification (For Testing Only) #

Shopify uses HMAC signatures to confirm requests come from their platform. If you have access to your store's theme or custom app code, you can add a conditional skip for test environments:

• Add this check in your Shopify backend logic (e.g., a theme snippet or app endpoint):

// Skip HMAC verification when running Cypress tests
if (Cypress.env('TEST_MODE') === 'enabled') {
  return; // Bypass the verification step
}
// Proceed with normal HMAC signature validation here

• Then set the environment variable in your cypress.config.js:

module.exports = defineConfig({
  env: {
    TEST_MODE: 'enabled'
  }
});

2. Generate Valid HMAC Signatures in Cypress #

If you can't modify the backend, you can generate a valid HMAC signature to attach to your requests. Here's how:

• Grab your Shopify store's API secret key from the admin panel (Apps > Manage private apps > API credentials).
• Use this helper function to generate the signature and attach it to your requests:

function generateShopifyHmac(payload, secret) {
  return crypto.createHmac('sha256', secret)
    .update(payload)
    .digest('base64');
}

// Example: Attach HMAC to a page visit
cy.visit('/your-checkout-page');
cy.window().then((win) => {
  const queryString = new URLSearchParams(win.location.search).toString();
  const validHmac = generateShopifyHmac(queryString, Cypress.env('SHOPIFY_SECRET'));
  cy.visit(`/your-checkout-page?${queryString}&hmac=${validHmac}`);
});

• Store your SHOPIFY_SECRET in a secure cypress.env.json file instead of hardcoding it.

3. Intercept and Modify Requests with Cypress #

Use Cypress's intercept feature to tweak outgoing requests and add valid verification headers/signatures:

// Intercept a POST request and attach the HMAC header
cy.intercept('POST', '/api/shopify-webhook', (req) => {
  const hmac = generateShopifyHmac(JSON.stringify(req.body), Cypress.env('SHOPIFY_SECRET'));
  req.headers['X-Shopify-Hmac-Sha256'] = hmac;
}).as('shopifyWebhook');

// Trigger the action that sends the request
cy.get('#submit-order').click();
cy.wait('@shopifyWebhook');

4. Ensure CSRF Tokens Are Included #

Sometimes the error stems from missing CSRF tokens in form submissions. Make sure Cypress captures and includes these tokens:

cy.get('#checkout-form').then((form) => {
  const csrfToken = form.find('input[name="_csrf"]').val();
  cy.request({
    method: 'POST',
    url: form.attr('action'),
    form: true,
    body: {
      _csrf: csrfToken,
      // Include all other required form fields here
    }
  });
});

Important Note #

Only use these methods in a test environment—never disable or bypass Shopify's security checks in production! These safeguards are critical for protecting your store from malicious requests.

内容的提问来源于stack exchange，提问作者Shan Muhammad