npm install
When running the dev server:
npm run dev
After the iframe is injected, a security error occurs in the console:
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:2Understand this errorAI
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.
Specifically, this part of get_proxied_value
, where value is the iframe's contentWindow
:
// this is part of an if block
STATE_SYMBOL in value
If I run the app in this way:
npm run build && npm run preview
Then the errors do not occur.