Google Optimize and Content Security Policy (CSP) not allowing site to work on mobile

robbiea
New Member
1 0 3

I just asked shopify support to turn off clickjacking protection and they found me an easier way to do this.

There is a chrome extension called 'Ignore X-frame headers' 

Install this and you can get the mobile view of a shopify store in optimize/chrome. I've just tried it and it works

https://support.google.com/optimize/thread/11627918?hl=en

AmyChacon
Excursionist
12 0 1

Not sure I understand their response. Are they saying all our customers must install the Chrome extension?

0 Likes
Zack1688
New Member
1 0 0

Thank you so much. it worked!

0 Likes
Gabe
Shopify Staff
Shopify Staff
4845 727 1167

Hey Zack! @Zack1688 

Glad it worked. Can you share exactly what you've done and to what goal?

Thanks!

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

0 Likes
D_Dasari
New Member
2 0 4

 

@ShabsKwofie has the correct answer. Use the Ignore X-frame Headers extension.

DO NOT TURN OF YOUR SHOPIFY STORE's CLICKJACKING PROTECTION!!!

The issue is that Optimize needs to be able render your site in an iframe to let you create the variant in their editor. 

Install this chrome extension to your browser. https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe/re...

This will let you create you mobile variant in Optimize.

Customers do not need the app to see your tests. 

DO NOT TURN OF YOUR SHOPIFY STORE's CLICKJACKING PROTECTION!!!

AmyChacon
Excursionist
12 0 1

There are two different thoughts going on here and they are not the same. One group is trying to design their shop within shopify so that it will work when mobile devices view the store.

The other group of people are concerned that Shopify's CSP response headers that it sends in response to  the page requests made from mobile devices are causing the website not to be able to be used within an iframe. 

 

Even if your site looks great on mobile, if you try to put your site into an iframe, it doesn't work.

D_Dasari
New Member
2 0 4

The original question was about how to use Optimize's visual editor to create experiments for mobile devices. Using the chrome extension is the solution to that question.

AmyChacon
Excursionist
12 0 1

Andreas is correct. Meta tags no longer are supported for setting the HTTP headers that are sent with the page data. The website admin must enable setting the CSP, cache control or X-Frame settings for each website wither in the HTTP configs or in htaccess files.

0 Likes
AmyChacon
Excursionist
12 0 1

Gabe,

 

There is an intermediate setting please see the MDN article for full explanation:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

0 Likes
AmyChacon
Excursionist
12 0 1

Dim,

 

There is an intermediate solution please see the MDN article:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

0 Likes