I am using php on the backend and setting the headers like this
$app->add(function ($req, $res, $next) {
$response = $next($req, $res);
if($_SERVER['REQUEST_METHOD'] == 'POST') {
$shop = isset($_POST['shop']) ? $_POST['shop'] : "";
} else {
$shop = $req->getQueryParam('shop');
}
if(isset($shop) && $shop != "") {
return $response
->withHeader('Access-Control-Allow-Origin', '*')
->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization,Content-Security-Policy')
->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH')
->withHeader('X-Frame-Options', 'DENY')
->withHeader('Content-Security-Policy', 'frame-ancestors '.$_ENV['HOST'].' https://' . $shop . ' https://admin.shopify.com',false);
} else {
return $response
->withHeader('Access-Control-Allow-Origin', '*')
->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization,Content-Security-Policy')
->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH');
}
});
I can see the headers being set exactly like that in response headers in the browser.
I also tried to check through this online tool https://cspvalidator.org/, the result is pass.
But when I submit the app for review, it’s rejecting saying:
App must set security headers to protect against clickjacking.
Your app must set the proper frame-ancestors content security policy directive to avoid clickjacking attacks. The 'content-security-policy' header should set frame-ancestors https://[shop].myshopify.com https://admin.shopify.com, where [shop] is the shop domain the app is embedded on.
This is extremely frustrating. There is no tooling from Shopify end to really test these issues out. The documentation is not sufficient and doesn’t say anything other than this.
Would love to get some help on this. Thanks