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!
If you see an error message like this:
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 from Shopify here and thanks for your interesting question.
Did you find a solution to that issue yet?
"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
'unsafe-inline'; style-src 'unsafe-inline'; img-src
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 ShabsKwofie described it:
"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."
On our store, we tried:
1. Settings frame-ancestors policy from <meta http-equiv="Content-Security-Policy"> tag but it's ignored by browsers as this directive is not supported in the <meta> elements.
2. We tried experimenting with <meta http-equiv="X-Frame-Options"> but again, it's not supported via <meta>.
To make things working, we need these headers (Content-Security-Policy // X-Frame-Options) to be set on server side. But we don't have control over that...
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.
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 <
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?
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.