How to Add Iframe Protection in Shopify-Laravel Embedded Apps

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.

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

php artisan make:middleware FrameHeadersMiddleware

Step 2: Add code in middleware

Put the following code in middleware

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 

protected $routeMiddleware 

   'cus.header' =>\App\Http\Middleware\FrameHeadersMiddleware::class,

Step 4: Assign middleware in routes 

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

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.

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!