SecurityError iframe access

> **Uncaught SecurityError: Failed to read a property named 'document' from 'Window'**

This usually happens **when you're trying to access `iframe.contentWindow.document`** **and** the iframe is **cross-origin** (i.e., the iframe's URL is from a different domain, or even a subdomain).

—

### Why it happens

Browsers **block direct access** to another origin’s DOM for security reasons (this is called the **Same-Origin Policy**).

Example that **causes** the error:

<iframe src="https://example.com"></iframe>

const iframe = document.querySelector('iframe');
const doc = iframe.contentWindow.document; // ❌ SecurityError if example.com ≠ yourdomain.com

—

### Common causes
– `iframe` loads a different domain (`https://another-site.com`)
– `iframe` loads a different protocol (`http://` vs `https://`)
– `iframe` loads a different subdomain (`app.example.com` vs `example.com`)
– `iframe` sets `sandbox` attributes that restrict access

—

### How to fix or work around it

✅ **If you control both domains:**
– Use **`postMessage`** API to safely communicate between parent and iframe.
– Example:
– Parent sends a message → iframe listens for it → iframe responds.
– [Example of postMessage usage available if needed.]

✅ **If you need only after iframe is loaded:**
– Just listen for the iframe `load` event without accessing `.document`.

const iframe = document.querySelector('iframe');
iframe.addEventListener('load', () => {
  console.log('Iframe loaded!');
  // Cannot access iframe.contentWindow.document if cross-origin
});

✅ **If you want to check if iframe is cross-origin:**

try {
    const doc = iframe.contentWindow.document;
    // safe to access
} catch (e) {
    console.warn('Cross-origin iframe detected, cannot access document.');
}

✅ **If it's a local iframe (same origin) but still giving error:**
– Check if your iframe `src` is on the exact same protocol/domain/port as the parent page.

—

### Quick Summary Table

| Case | Can you access `.document`? | Solution |
|:—–|:—————————-|:———|
| Same domain | ✅ | Access normally |
| Different domain | ❌ | Use `postMessage` |
| Different subdomain | ❌ | Use `postMessage` |
| Different protocol (http/https) | ❌ | Use `postMessage` |
| Sandbox attribute | ❌ | Remove or adjust sandbox if possible |

—

Would you like me to show a quick **working `postMessage` example** (parent ↔ iframe communication) so you can avoid this error completely? 🚀
(It's just 10 lines of code.)

> The console errors are related to JavaScript issues caused by the iframe used for the payment window. These errors do not affect performance, but modern browsers using ES6 are triggering them.

—

Would you also like a slightly more formal version depending on whether you need it for a client report, internal documentation, or a team update?