Unable to load my site in optimizely to edit experiment
I'm having trouble loading my site in optimizely when I want to edit my experiment.
I have tried every troubleshooting suggestion, I added the snippet, which can be found in the pagesource
and loads correctly when I use ctrl + shift + J and type optimizely. I loaded unsafe scripts and
set the settings so that Chrome displays mixed content.
I don't know what to do next, please help!
I'm using Chrome and the website is http://www.devorm.nl/.
Thanks for reaching out!
I took a look at your website and found that it didn't load in the Visual Editor due to a security setting on your site. Your site has an X-FRAME-OPTIONS (https://developer.mozilla.org/en-US/docs/Web/HTTP/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) - 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 header. 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 '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 larger teams: every new user will run into the same problem which will make first-time use of Optimizely a bad first experience for them.
Also, please note that this needs to be done on top of enabling mixed content in Google Chrome.
I hope that is helpful. Feel more than free to reply back with any additional questions at all.
thank you for your help! Unfortunately it didn't solve the problem, neither the full or the temporary solution.
Are there any other options or solutions?
Would you be able to load your page by clicking on this URL: https://app.optimizely.com/edit?experiment_id=[EXPERIMENT_ID]&show_popout=true
You will need to replace [EXPERIMENT_ID] with your own experiment ID.
Click cancel immediately when the Editor is trying to load the page. Then click on the blue button "Pop page out". This will load your page in a new window, and you will be able to make changes from there.
Please keep in mind that this workaround is in beta and can be revoked at any moment from the product.
Also, I noticed that your website has some content loaded after page load (for example your slider). When using the Visual Editor this needs to be considered carefully as you may experience timing or flashing issues if you want to make changes to your slider. You can find out more about addressing timing issues here.
Let me know if this helps!