Issue loading page in Editor after using Interactive Mode to close modal window
Perhaps someone can point me in the right direction with this page loading issue.
First, we are setting up a redirect experiment on the client's Staging server to measure click goals, before pushing to Production. The two URL's used are:
After loading the Original URL correctly in the Editor, I used Interactive mode to close the pop up promo window, before switching back to the Editor. Now I can't scroll down and ensure the full page loads correctly.
"We have loaded your site using compatibility mode — you can still edit your page, but some site functionality might be missing."
I've taken the following troubleshooting steps:
- Cleared Google Chrome browser cache
- Choosen to "Load unsafe scripts" by canceling Editor load and updating security options in address bar.
- Installed Optimizely Chrome Extension (doesn't seem to do anything).
- Checked Chrome dev tools Console to ensure 'optimizely' object loads.
- Ran Optimizely Diagnostic tool which shows no issues.
- Used JitBit SSL checker to scan for insecure mixed content. None found.
What other steps can I take to correctly load this page in the Editor?
Thanks in advance!
Thanks for the detailed description! I tested loading your site into the Optimizely Editor and found that it didn't load due to a security setting on your site. Your site has an X-FRAME-OPTIONS header set which 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) - 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'.
Further documentation on this is here.
Temporary Workaround - Optimizely Helper Chrome Extension:
With that said, we know the changes above can take some time with your development team, which is why we have built the Google Chrome Extension which you mentioned you have already installed. This worked for me and should allow you to override the x-frame errors in the Optimizely Editor. Please be sure you have switched it on for the extension to work. More details about this are here.
Without using one of the above workarounds your site will always load in Compatibility Mode. Please let me know if this is helpful or if you have any questions!
Sr. Technical Support Engineer
Optimizely | EMEA
Thank you for your reply Allison.
Per the instructions you provided, the temporary fix of using the Chrome extension worked to a point, but not consistently. Meaning there are still issues loading in the Editor and attempting to Preview, in some cases (Variation 1 redirect URL) doesn't load in preview at all.
I will get with our development team to attempt the 'Content Security Policy' header update implementation as a next step.