Hello,
My shop is having some errors:
SecurityError: Blocked a frame with origin “https://cutebags.shop” from accessing a cross-origin frame. Protocols, domains, and ports must match.
{ “error”: { “code”: 401, “message”: “Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project.”, “status”: “UNAUTHENTICATED” }
I am not sure if they are different errors or it is one main error.
I am not sure how to find the error and fix it.
https://cutebags.shop/
I would be grateful for any ideas and suggestions
Same-Origin Policy (SOP) restricts how a document or script loaded from one origin can interact with a resource from another origin. For example, when Site X tries to fetch content from Site Y in a frame, by default, Site Y’s pages are not accessible due to security reasons, it would be a huge security flaw if you could do it.
How to solve?
The window.postMessage() method provides a controlled mechanism to securely circumvent this restriction. The window.postMessage() safely enables cross-origin communication between Window objects; e.g: between a page and an iframe embedded within it.
const frame = document.getElementById(‘your-frame-id’);
frame.contentWindow.postMessage(/any variable or object here/, ‘http://your-second-site.com’);
The window.postMessage is available to JavaScript running in chrome code (e.g., in extensions and privileged code), but the source property of the dispatched event is always null as a security restriction. (The other properties have their expected values.)