Shopify App Store is the best place to accelerate your sellings and grow your business. When you submit your app to the Shopify App Store it might get rejected. This may be because the content security policy is not set properly.
Shopify Apps on the Shopify App Store must set proper Content Security Policy frame-ancestors directive in order to avoid clickjacking attacks. You face App rejection from the Shopify App Store in case the Content Security Policy frame-ancestors directive is not set properly or is missing. Check out the latest Shopify editions with 100+ new products and updates.
Contents
Embedded Shopify Apps
For Embedded Apps you need to make sure that the app can only be frameable by authenticated domain. Set the frame-ancestors directive on the basis of the current shop domain and Shopify admin domain. This will ensure that the app can be framed within the shop domain only.
Let’s learn How to Add Iframe Protection in Shopify-Laravel Embedded Apps
Steps to Add Iframe Protection in Shopify-Laravel Embedded Apps
Step 1: Create middleware
First, you need to create middleware in your project using the following command
|
1 |
php artisan make:middleware FrameHeadersMiddleware |
Step 2: Add code in middleware
Put the following code in middleware
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public function handle(Request $request, Closure $next) { $response = $next($request); $user = \Auth::user(); if($user) { $response->header('Content-Security-Policy', "frame-ancestors https://{$user- >name} https://admin.shopify.com"); } return $response; } |
Step 3: Define middleware in the app/http/kernel.php file
|
1 2 3 |
protected $routeMiddleware 'cus.header' =>\App\Http\Middleware\FrameHeadersMiddleware::class, |
Step 4: Assign middleware in routes
|
1 2 3 |
Route::get('/dashboard', [TestController::class, 'index']) ->middleware('cus.header'); |
How to Check frame-ancestors in Shopify App?
Step 1: From your Shopify Shop, select Apps.
Step 2: Now, right-click anywhere on the page and select Inspect.
Step 3: Select the Network tab.
Step 4: Select the last document from the list. And click the Headers tab.
Step 5: Check if the frame-ancestors directive is included as below or not
|
1 |
content-security-policy: frame-ancestors https://abc.myshopify.com https://admin.shopify.com |
If the directive is correctly included your app is secure.
Shopify Apps that are not Embedded
If your app isn’t embedded, then you can set the frame-ancestors directive to ‘none’ in order to disallow framing.
|
1 |
Content-Security-Policy: frame-ancestors 'none'; |
Closure:
This way you can Add Iframe Protection in Shopify Embedded Apps. If you face any trouble in securing your Shopify App, you can reach out to our Shopify Masters to get it done. Share the tutorial with your Shopify friends to help them secure their apps.
Happy Reading!
Hello Sir
Updates required for embedded apps to work on the new Shopify admin domain
Top Product Review App is outdated
This app is outdated and will no longer function after Wednesday, September 6, 2023. Contact the app’s developer to update the app.
We have updated frameable by authenticated domain. Set the frame-ancestors directive on the basis of the current shop domain and Shopify admin domain.
But not working still
Can you help me please
Nice Work, It was clear and helped me a lot, Thanks