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

ShabsKwofie
Tourist
7 0 2

Hi all, I've managed to install the script for Google Optimize onto the head tags on the website, but it wont allow me to split test on mobile and is saying “This page uses security features that are incompatible with Optimize mobile editing. For more information, you can check out our security requirements.” the explanation as to why is in this link, apparently I need to put more code somewhere else but if someone could explain where I need to add that code I would be really grateful as coding is not a strength of mine!

 
Optimize and page framing restrictions

 

If you see an error message like this:

This page uses security features that are incompatible with Optimize mobile editing.

Here's what could be happening:

The desktop view of the Optimize editor doesn't have any restrictions related to frame security directives or page techniques that disallow framing (a.k.a. frame busting), however if you wish to use the "mobile" view options of the Optimize visual editor, your page must allow being framed by your own site.

If your site uses the X-Frame-Options response header directive with value deny then you will not be able to use mobile editing.

A workaround acceptable for many websites (e.g. sites without user-generated content and domains that aren't shared with untrusted pages) is to relax the constraint to X-Frame-Options: sameorigin.

X-Frame-Options: sameorigin allows your pages to be framed by your website, but it doesn't allow your pages to be framed by other websites.

Learn more about X-Frame-Options at MDW web docs.

Alternatively, you can make changes for mobile users in the Optimize visual editor (on desktop) by using media queries in your style changes and in the CSS code dialog, then preview the mobile functionality in preview mode.

Gabe
Shopify Staff
Shopify Staff
3754 374 875

Hey @ShabsKwofie 

Gabe from Shopify here and thanks for your interesting question.

Did you find a solution to that issue yet?

Firstly, this seems to be a Content Security Policy (CSP) thingie if I'm seeing that correctly. Therefore, can you try it again using a different browser? Are you using Chrome? Tbh, we recommend Chrome for most things as Shopify is optimised for Chrome only. Testing things in Incognito Mode can also help sometimes.
 
THEN:
 
The platform uses security settings to stop it being hit continuously by Bots and that this was likely what was causing this. 
 
In the Google doc you provided, a couple of troubleshooting steps seem to be provided. First mentioned was to change the value of the X-Frame-Options header from Deny to X-Frame-Options: sameorigin.  However, removing this header will make your store more prone to the so-called "Clickjacking" which refers to a malicious tactic that tricks users into clicking something that does something other than what it was meant to do.  
 
Then the google documentation says"In order to run, preview, and be included in Optimize experiences (tests and personalizations), your Content Security Policy (CSP) must include the following directives: script-src https://www.google-analytics.com 'unsafe-inline'; style-src 'unsafe-inline'; img-src https://www.google-analytics.com".
 
Have the other forum threads on this topic helped?
 

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
Andreas_Sotnik
New Member
2 0 4

We have the same issue!

 

The problem is not with 

"In order to run, preview, and be included in Optimize experiences (tests and personalizations), your Content Security Policy (CSP) must include the following directives: script-src https://www.google-analytics.com 'unsafe-inline'; style-src 'unsafe-inline'; img-src https://www.google-analytics.com".

As this part is only for making sure that google analytics scripts will be included and executed.

The issue is the exactly like 

 

 

The Man in Charge at Develic.com
Gabe
Shopify Staff
Shopify Staff
3754 374 875

Update:

Ok, I did some digging on that and it seems from what I’m finding, that unfortunatelyGoogle Optimizeis kinda new and is being denied for mobile view. This is down to current security concerns. 

What you guys need to do is request this setting to be switched off, however, this can pose a certain security threat to your website and so it's not certain whether it can be done or not.

What that basically means is that currently the X-Frame-origin headingreceived from Shopify server is set toDENY, which does not allow to use ‘mobile’ view options of the Optimize editor.

Our Technical Team has also confirmed that this is to prevent clickjackingattacks or vulnerabilities that could potentially reveal confidential information including web pages.

More context:

Shopify offers clickjacking security and we enable clickjacking protection by default on new shops. Via a request, however, we can either activate or deactivate this security feature but, again, to set the correct expectations, the tech team may not allow it for security reasons. The request must come from the listed Account Owner.

When enabled, you will NOT be able to useiFrameswith website content, as an additional header is added to the responses that are sent to browsers:X-Frame-Optionswith a value ofDENY. You may, however, need to useiFrameswith some customizations, third-party apps, or external tools like Google Website Optimizer. Currently, we can either have this extra security option set toon or off, completely. There is currently no method to set anallow listfor some apps/services/sites to use iFrames, while blocking all others.

As of May, 2020 most stores which had this internal setting off by default have had it turned on now automatically. Hence, to protect user data, this function is currently set to <deny>.


Best,
Gabe

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
ryantkelly
Tourist
9 0 4

Hi all -

Just wanted to add that I'm experiencing the same issue.

@GabeCan Shopify modify the CSP for all stores to allow this behavior with Google Optimize, as it is a safe content source, and this sort of tool is extremely helpful for store owners?

0 Likes
Gabe
Shopify Staff
Shopify Staff
3754 374 875

Hi @ryantkelly 

I can fully see how Google Optimize is a great tool for A/B Testing and things like that and we can switch off this "clickjacking" protection. Send us a ticket here and our tech team will take a look.

Best,

Gabe

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

dim
Tourist
4 0 4

Hi @ryantkelly  @ShabsKwofie  

did you de-activate "clickjacking" protection that causes the issue with Mobile preview ?

Experienced any issues?

@Gabe I also believe that Shopify should modify the CSP universally. 

Thank you

ryantkelly
Tourist
9 0 4

@dimI did have Shopify support disable the clickjacking protection, and this has removed the mobile preview issue with Google Optimize.

dim
Tourist
4 0 4

so there is no solution?

you either use an a/b testing platform and risk clickjacking or you don't optimise your shopify store in a controlled manner?

 

ShabsKwofie
Tourist
7 0 2

@dim @Gabe I need to understand this too - I am really keen to use Optimize to be able to A/B test but seems odd to have to choose between that and your site security? Can nothing be done by Shopify technical team to allow us to be able to use Optimise and still keep the clickjacking protection?

0 Likes