This article will help you:
  • Install our “Optimizely Editor Helper” Chrome extension

Have you tried other troubleshooting methods and haven’t yet been able to load your page into the Editor correctly? Installing our Editor Loading Chrome extension may help you with loading your page. The Chrome extension does the following things:

  • Injects your snippet on the page if Optimizely can’t find it
  • Disables the Editor from loading your page through our proxy server
  • Removes the X-Frame-Options header which may be preventing your site from loading in the Optimizely Editor

Download our Editor Helper Chrome extension

Please make sure you’re using a Chrome browser. Head over to the extension page in the Chrome webstore and click “Add to Chrome.” In the prompt, click “Add app.” You can see all your extensions by navigating to chrome://extensions.

 
 
Note:

Please make sure to continue enabling mixed content in your browser, even when using our Chrome extension.

 
Tip:

Is your page not loading correctly in Optimizely for another reason? Check out our article on Troubleshooting Editor Loading for more solutions!

Using the extension

Installing and enabling the extension will turn it on by default. You should see an Optimizely icon in your extensions-bar to the right of your URL bar. If you click it, you’ll see an option to turn the extension on and off.

Please be sure to turn the Editor Helper off when you’re not using it, to keep your browser as secure as possible when browsing other sites.

Injecting the snippet

If your snippet isn’t on the page yet but you want to start creating experiments, this extension will inject a helper JavaScript snippet called “innie.js”, that’s normally included with the snippet. This enables communication between our Editor and the customer’s site. The Editor will know when you’re hovering over which elements of your site, and clicking them will tell our editor to show the blue border and context menu. Please make sure that you implement the Optimizely snippet on your page as quickly as possible, as when you do, you’ll be able to run the experiments you created with the helper.

The Editor might also have problems with finding your snippet if it’s located in the body. If that’s the case, you can use the extension to help loading your page in the Editor, but please make sure to add the snippet to the top of your site’s <head> tag to ensure optimal performance.

Disabling the Editor from loading your page through our proxy server

The Optimizely Editor tries loading your page through HTTP or HTTPS first, but if both timeout, it tries loading your page through proxy. Loading through a proxy means that Optimizely will load your page on our proxy server, injecting a placeholder snippet temporarily, for Editor loading purposes. This will then show in the Editor. If Optimizely loads your page through, it will lose all session data for your page in the editor, so this might be why you might see for example an authentication error, even though you logged in or loaded your page in an adjacent tab. Your page might also have security measures against being loaded via a proxy which would cause you to see something like a 500 Internal Server error.

If the snippet is on the page and it's still loading through proxy, you can disable proxy loading by adding the &optimizely_disable_proxy=true parameter to the Optimizely experiment URL in the URL bar. This will force the Optimizely Editor to try loading your page through HTTP or HTTPS, and also increases the timeout before failing. The extension automatically adds this query parameter to the URL each time you load an Optimizely experiment.

Removing the X-Frame-Options header

Some sites won’t load in the Editor due to a security setting called an X-Frame-Options header, which disallows other domains from loading it in an iFrame (e.g. example.com can only be loaded in an iFrame on example.com - not on optimizely.com). The Optimizely Chrome extension bypasses this security setting and will allow those sites to be iFramed on other domains, but only for users who have the Editor Helper turned on for their browser.

How to find out if you site has an X-Frame-Options header set

Try opening your page in the Optimizely Editor in the Chrome browser. Open the Developer Tools, and click Console. Then click on the filter icon in the left top part of the developer tools. Within the filter options that you’ll then see, click on Errors. Search for a line that says “Refused to display ‘<URL>’ in a frame because it set ‘X-Frame-Options’ to ‘SAMEORIGIN’ or ‘DENY’". If you see that, it’s likely your site has an X-Frame-Options header that prevents Optimizely from loading it inside an iFrame.

Content Security Policies

The X-Frame-Options header 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.

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.’ In the meantime, our Editor Helper extension can help you load your page in the Editor.