Cross-origin iframe access issue when embedding site in chrome extension

Question

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!