I have a WordPress site hosted at https://myblog.com. I also have a Chrome extension that injects a content script into https://anothersite.com to modify its UI.
My goal is to embed my WordPress posts within an iframe on https://anothersite.com.
I have successfully achieved this, but when users attempt to log in to WordPress, they encounter the following error:
wp-login.php:1
Blocked a frame with origin "https://myblog.com" from accessing a cross-origin frame.
at tryShowingMateBar (eval at success (chrome-extension://kacbklkbjmnjkhnellgciecdogkkldoj/src/kernel/kernel.js:233:37), <anonymous>:5428:57)
at eval (eval at success (c...
I DONT WANT to access frame's content from my extension. I just wnat to display my wordpress site correctly, and user can do login or logout properly on iframe.
(I know there is a safe solution for communicating between iframe and parent by using window.postMessage)
To address this issue, I added the following headers to my WordPress site's wp-config.php file:
header('Content-Security-Policy: frame-ancestors https://anothersite.com https://myblog.com chrome-extension://kacbklkbjmnjkhnellgciecasdkldoj');
header('Content-Security-Policy: frame-src https://anothersite.com https://myblog.com chrome-extension://kacbklkbjmnjkhnellgciecasdkldoj');
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
However, this solution didn't work. I'm still encountering the same cross-origin access issue. Can anyone help me resolve this problem?
Thank you!