Gated login page cannot be edited. "Disable compatibility mode" fixes don't work?
Hi — I'm running into trouble editing a page that requires logging in. I've tried disabling compatibility mode according to these instructions, but I'm still getting the "We have loaded your site using compatibility mode — you can still edit your page, but some site functionality might be missing." warning on Chrome/Safari/Firefox. Any chance I'm missing something obvious?
Thanks ever so!
Solved! Go to Solution.
When you try to load the page and open up the developer console, do you see an error similar to the following?
Refused to display 'https://example.com' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
If so, then the reason your site will only load in Compatibility mode is because it has an X-FRAME-OPTIONS header set. This means that it can't be loaded inside an iframe on another domain (for example, app.optimizely.com).
X-FRAME-OPTIONS is a deprecated security feature that has since been replaced by Content Security Policies that allow for fine-grained control over which pages can iframe yours, among many other features. So, if you replace your X-FRAME-OPTIONS header with Content Security Policies, you'll be able to whitelist app.optimizely.com.
Full Solution (recommended) - Here's how you can switch to Content Security Policies:
If you're not using Content Security Policies for anything else yet, ask your developers to remove the X-FRAME-OPTIONS header and replace it by the following CSP header:
Content-Security-Policy: default-src * 'unsafe-inline' 'unsafe-eval'; frame-ancestors 'self' app.optimizely.com;
This will mirror the security X-FRAME-OPTIONS provided you. If you're already using Content Security Policies for other purposes, you'll need to merge your existing rules with the one above.
To be able to load your pages in the Optimizely editor, make sure to add the frame-ancestors directive for app.optimizely.com. To make sure all of Optimizely's functionality for your visitors works correctly, make sure to allow to allow 'unsafe-inline' and 'unsafe-eval'.
Temporary Workaround - Optimizely Helper Chrome Extension:
With that said, we know the changes above can take some time with your development team, so we have built a Google Chrome Extension that should allow users with x-frame options errors to load their sites in the Optimizely Editor. This works, but obviously isn't ideal for your larger team: every new user will run into the same problem which will make first-time use of Optimizely a bad first experience for them.
Please let me know if this is helpful or if you have any questions.
Sr. Technical Support Engineer
Optimizely | EMEA