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

Highlighted
Tourist
3 0 1

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.

1 Like
Highlighted
Shopify Staff
Shopify Staff
1655 150 265

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 Als Lösung anerkennen 

Um mehr zu erfahren, besuche unseren Shopify Help Center oder unseren Shopify Blog

0 Likes
Highlighted
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
1 Like
Highlighted
Shopify Staff
Shopify Staff
1655 150 265

Update:

Ok, I did some digging on that and it seems from what I’m finding, that unfortunately 
Google Optimize is 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 heading received from Shopify server is set to DENY, which does not allow to use ‘mobile’ view options of the Optimize editor.

Our Technical Team has also confirmed that this is to prevent clickjacking attacks 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 use iFrames with website content, as an additional header is added to the responses that are sent to browsers: X-Frame-Options with a value of DENY . You may, however, need to use iFrames with some customizations, third-party apps, or external tools like Google Website Optimizer. Currently, we can either have this extra security option set to on or off, completely. There is currently no method to set an allow list for 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 Als Lösung anerkennen 

Um mehr zu erfahren, besuche unseren Shopify Help Center oder unseren Shopify Blog

0 Likes
Highlighted
New Member
1 0 0

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
Highlighted
Shopify Staff
Shopify Staff
1655 150 265

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 Als Lösung anerkennen 

Um mehr zu erfahren, besuche unseren Shopify Help Center oder unseren Shopify Blog

0 Likes