Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Cannot use Visual Experience Composer

Avatar

Level 2

Hi,

I am following this doc to set up target.

Create an Experience Targeting activity

The visual experience composer works for me local page. However, when I try to browse any server website, there are errors like: Refused to display 'the url' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

I followed the instruction on Adding X-FRAME-OPTIONS to response on AEM 6.2 but obviously this ticket is not even solved. I still have the X-Frame-Option inside my response header.

Appreciate for any help.

1 Accepted Solution

Avatar

Correct answer by
Employee

HI,

Here's the general information on trouble shooting VEC issues. Troubleshooting the Visual Experience Composer and Enhanced Experience Composer

However, I believe your issue seems specific to X-Frame-Options.

To overcome this could you please try turnin OFF  the EEC, (To disable the Enhanced Experience Composer, go to Setup > Preferences and turn off the Enable Enhanced Experience Composer option.)

And then do the following, use a browser extension like Requestly (Chrome or Firefox) or Modify Response Headers (Firefox) that can overwrite the X-Frames header options for your site and allow them to be loaded in iFrames, enabling the VEC.

To use the Requestly extension on Chrome or Firefox:

  1. Turn off the Enhanced Experienced Composer.
  2. Install the Requestly browser extension on Chrome or Firefox.
  3. Open the extension and configure it using the following:
  4. Select Modify headers.
  5. Enter the following:
    • Rule name
    • Modification rules
      • Toggle Add to Remove.
      • Toggle Request to Response.
      • Enter "X-Frame-Options" as the header name.
      • Repeat previous steps and enter "x-frame-options" as the header name.
        Note: Headers that are manipulated via Requestly are case sensitive.

      • Change Equals to Contains as the condition for the source URL and enter the URL of the activity that you are trying to load in the VEC.
  6. Click Save.You should now be able to load the page quickly with the Visual Experience Composer.

View solution in original post

1 Reply

Avatar

Correct answer by
Employee

HI,

Here's the general information on trouble shooting VEC issues. Troubleshooting the Visual Experience Composer and Enhanced Experience Composer

However, I believe your issue seems specific to X-Frame-Options.

To overcome this could you please try turnin OFF  the EEC, (To disable the Enhanced Experience Composer, go to Setup > Preferences and turn off the Enable Enhanced Experience Composer option.)

And then do the following, use a browser extension like Requestly (Chrome or Firefox) or Modify Response Headers (Firefox) that can overwrite the X-Frames header options for your site and allow them to be loaded in iFrames, enabling the VEC.

To use the Requestly extension on Chrome or Firefox:

  1. Turn off the Enhanced Experienced Composer.
  2. Install the Requestly browser extension on Chrome or Firefox.
  3. Open the extension and configure it using the following:
  4. Select Modify headers.
  5. Enter the following:
    • Rule name
    • Modification rules
      • Toggle Add to Remove.
      • Toggle Request to Response.
      • Enter "X-Frame-Options" as the header name.
      • Repeat previous steps and enter "x-frame-options" as the header name.
        Note: Headers that are manipulated via Requestly are case sensitive.

      • Change Equals to Contains as the condition for the source URL and enter the URL of the activity that you are trying to load in the VEC.
  6. Click Save.You should now be able to load the page quickly with the Visual Experience Composer.