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 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 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
clickjackingattacks 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
iFrameswith website content, as an additional header is added to the responses that are sent to browsers:
X-Frame-Optionswith a value of
DENY. You may, however, need to use
iFrameswith 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 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 <
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.
@dimI did have Shopify support disable the clickjacking protection, and this has removed the mobile preview issue with Google Optimize.
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?
@dim @Gabe I guess the only question is then (and a very subjective question it is and I can already anticipate how the response will go but here goes)... How much of a risk / concern is clickjacking? Would our other Shopify security measures not be enough to help to avoid this? (clearly I'm a novice!) I've seen that @ryantkelly has switched yours off here, would you mind wading in?
You would need to weigh up whether clickjacking is really such a threat to your shop. We have a bunch of large Shops and Plus Shops that have foregone the clickjacking security feature and are experiencing no real security issues reported by their customers. At least none that I'm hearing here in support.
If you do deactivate it, we have a suite of docs and apps that can help protect your shop and every shop-owner should keep this list close-by anyway:
Thanks @Gabe. How would I go about getting it deactivated or getting help to do so?
@ShabsKwofieAfter reading up on what the risks of clickjacking are (high-level summary here), it didn't seem like our store would be at huge risk, and the benefit of Google Optimize experiments outweighed the potential risk. Hopefully Shopify considers modifying the CSP to allow for Google Optimize to work with the X-Frame-Options configuration.
@Gabe are there any updates from shopify re modifying the CSP to allow for Google Optimize to work with the X-Frame-Options configuration?
Currently by default, for security reasons Shopify prevents stores from being rendered in an iframe, which mitigates the possibility of clickjacking attacks. This includes setting the CSP header to
none, and setting X-Frame-Options to
DENY. To have this disabled, you will need to contact our support team and ask them to disable clickjacking protection.
Hope that helps and happy new year!
Currently by default, for security reasons Shopify prevents stores from being rendered in an iframe, which mitigates the possibility of clickjacking attacks. This includes setting the CSP header to none, and setting X-Frame-Options to DENY. To have this disabled, you will need to contact our support team and ask them to disable clickjacking protection.
Hope that helps and happy new year!
@Gabe is there a specific reason why this wasn't set to "SAMEORIGIN"?
I'm trying to load a page from our Shopify store, just in a Fancybox iframe. It's just a UX choice, and sure seems like only allowing iframes from our own domain would be the right setting.
Can't really say unfortunately. Perhaps these resources can help:
Connect your PayPal account to allow your customers to checkout using the PayPal gateway a...By Ollie Jul 28, 2022