Recurly.js Iframes throw security error when running dev server

[crookedneighbor]

Describe the bug

My team is upgrading our checkout pages to Svelte, but we use Recurly and it it looks like the Svelte dev server injects some JavaScript that is interacting with the Recurly iframes in a way that causes a Security error to be thrown and halts the execution of JavaScript from Recurly's client side script interacting with the iframe. When running in preview mode, the error does not occur and the iframe and JS code runs normally.

Sample App: https://github.com/crookedneighbor/svelte-recurly-dev-issue

Screenshot of the page in dev mode:

Screenshot of the page in preview mode:

Digging to the JS chunk where the error originates reveals:

// a function where the array prototype is changed
function init_array_prototype_warnings() {
  const array_prototype2 = Array.prototype;
  const cleanup = Array.__svelte_cleanup;
  if (cleanup) {
    cleanup();
  }
  const { indexOf, lastIndexOf, includes } = array_prototype2;
  array_prototype2.indexOf = function(item, from_index) {
    const index = indexOf.call(this, item, from_index);
    if (index === -1) {
      for (let i = from_index ?? 0; i < this.length; i += 1) {
        // the line below is the one where the error gets thrown
        if (get_proxied_value(this[i]) === item) {
          state_proxy_equality_mismatch("array.indexOf(...)");
          break;
        }
      }
    }
    return index;
  };

In this case, the this is an array containing the Window and the Recurly's iframe contentWindow. And calling get_proxied_value on the iframe's contentWindow throws the error.

Here's the get_proxied_value function:

function get_proxied_value(value) {
  if (value !== null && typeof value === "object" && STATE_SYMBOL in value) {
    return value[STATE_SYMBOL];
  }
  return value;
}

The part it doesn't like is checking STATE_SYMBOL in value, where value is the Recurly iframe's contentWindow. My guess is this function should have a try/catch and return the value. If I go in and modify it to this, it works just fine:

function get_proxied_value(value) {
  try {
    if (value !== null && typeof value === "object" && STATE_SYMBOL in value) {
      return value[STATE_SYMBOL];
    }
    return value;
  } catch (e) {
    return value;
  }
}

This is preventing us from upgrading our checkout to Svelte.

Reproduction

Repo: https://github.com/crookedneighbor/svelte-recurly-dev-issue

Reproduction in Dev Mode

• Run the server in dev mode

  npm run dev
  

• load the app, see the Recurly iframe load, but notice the JS fails to populate the card number or validations
• check the console and see security error

No Error Running in Preview Mode

• Run the server in preview mode

  npm run build
  npm run preview
  

• load the app, see the Recurly iframe load and JS loads the card number fields
• no console errors

Logs

Browser logs:


Uncaught SecurityError: Blocked a frame with origin "http://localhost:5173" from accessing a cross-origin frame.
    at array_prototype2.indexOf (chunk-PENI7PX3.js?v=2071926b:1411:13)
    at recurly.js:2:6599
    at Array.filter (<anonymous>)
    at s.value (recurly.js:2:6569)
    at s.value (recurly.js:2:6026)
array_prototype2.indexOf @ chunk-PENI7PX3.js?v=2071926b:1411
(anonymous) @ recurly.js:2
value @ recurly.js:2
value @ recurly.js:2

System Info

System:
    OS: macOS 14.7.2
    CPU: (11) arm64 Apple M3 Pro
    Memory: 139.77 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.7 - ~/.nvm/versions/node/v18.20.7/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v18.20.7/bin/npm
  Browsers:
    Chrome: 134.0.6998.89
    Safari: 18.2
  npmPackages:
    svelte: ^5.23.2 => 5.23.2

Severity

blocking an upgrade

[potch]

It appears that the error stems from Array prototype overrides made by init_array_prototype_warnings();, which it looks like are only applied in dev mode:

	if (DEV) {
		// @ts-expect-error
		element_prototype.__svelte_meta = null;

		init_array_prototype_warnings();
	}

These warning checks are leading to <iframe> security errors. Is it possible to opt-out of this prototype patching, even in dev mode?