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

Clientlib added in a component script is not accessible in dispatcher

Avatar

Level 3

I have created a component "xyz" which has a clientlib with category name "shc-xyz". When I am embedding "shc-xyz" in clientlib-base its accessible in both publisher and dispatcher as below.

<script type="text/javascript" src="/etc.clientlibs/shc/clientlibs/clientlib-base.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/shc/clientlibs/clientlib-base.min.css" type="text/css">

 Now I removed "shc-xyz" from embed property on clientlib-base and calling it in xyz.html as below.

<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.all @ categories='shc-xyz'}"/>

 After this change my "xyz" component is broken when I am accessing it in dispatcher but its working fine in publisher. In publisher "xyz-shc" is included as below in page source but I don't see this in dispatcher.

<link rel="stylesheet" href="/apps/shc/components/content/xyz/clientlibs.min.css" type="text/css">
<script type="text/javascript" src="/apps/shc/components/content/xyz/clientlibs.min.js"></script>

Does anyone know how to fix this? Thanks in advance...!!!

 

Regards

Swapnil

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

In the first case, the component level clientlibs are embedded into the base clientlib - the base clientlib is enabled with allowProxy=true

<scripttype="text/javascript"src="/etc.clientlibs/shc/clientlibs/clientlib-base.min.js"></script>
<linkrel="stylesheet"href="/etc.clientlibs/shc/clientlibs/clientlib-base.min.css"type="text/css">

In the second case, the component level clientlibs are directly included but allowProxy=true property is not enabled at component level(reason behind /apps enabled instead of /etc.clientlibs)

<slydata-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"data-sly-call="${clientlib.all @ categories='shc-xyz'}"/>


<linkrel="stylesheet"href="/apps/shc/components/content/xyz/clientlibs.min.css"type="text/css">
<scripttype="text/javascript"src="/apps/shc/components/content/xyz/clientlibs.min.js"></script>

To fix the issue, enable the "allowProxy=true" property to the individual component(xyz) level clientlibs.

component-level-clientlib.png


Regards
Albin I
www.albinsblog.com

View solution in original post

5 Replies

Avatar

Community Advisor

Hi,

Please republish page. The page may be cached, you need to clear cache.

If the clientlibs source available in the page, then check the request filters. 
Please check your clientlibs added using apps, apps is not accessible from publisher/dispatcher by anonymous users. YOu may have to use proxy clientlibs.

Avatar

Community Advisor

@salamswapnil  As @arunpatidar stated, please set allowproxy as true on component level clientlib so that while generating the HTML for the component, you will get clientlib prefix as "/etc.clientlibs" instead "/apps".

 

/apps/* are in general blocked in Dispatcher for security reasons.

 

https://docs.adobe.com/content/help/en/experience-manager-65/developing/introduction/clientlibs.html...

Avatar

Correct answer by
Community Advisor

In the first case, the component level clientlibs are embedded into the base clientlib - the base clientlib is enabled with allowProxy=true

<scripttype="text/javascript"src="/etc.clientlibs/shc/clientlibs/clientlib-base.min.js"></script>
<linkrel="stylesheet"href="/etc.clientlibs/shc/clientlibs/clientlib-base.min.css"type="text/css">

In the second case, the component level clientlibs are directly included but allowProxy=true property is not enabled at component level(reason behind /apps enabled instead of /etc.clientlibs)

<slydata-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"data-sly-call="${clientlib.all @ categories='shc-xyz'}"/>


<linkrel="stylesheet"href="/apps/shc/components/content/xyz/clientlibs.min.css"type="text/css">
<scripttype="text/javascript"src="/apps/shc/components/content/xyz/clientlibs.min.js"></script>

To fix the issue, enable the "allowProxy=true" property to the individual component(xyz) level clientlibs.

component-level-clientlib.png


Regards
Albin I
www.albinsblog.com

Avatar

Level 3
Thank you guys...!!! It worked after setting allowProxy = true on component level clientlibs.

Avatar

Employee

Clientlibs under /apps should have the "allowProxy" property and will be invoked via a proxy servlet. It is recommended to locate client libraries under /apps and expose them via /etc.clientlibs by leveraging the allowProxy property. So if the file is like /apps/projects/clientlibs/base/resources/icon.png then it will be accessed via /etc.clientlibs/projects/clientlibs/base/resources/icon.png

 

Along with this you will need to add the below rules in dispatcher.

  1. under filter section allow the below path:
    /0002 { /type "allow" /url "/etc.clientlibs/*" }
  2. under rules section allow the below paths:
    /0001 { /glob "/etc.clientlibs/*.css" /type "allow" }
    /0002 { /glob "/etc.clientlibs/*.js" /type "allow" }

Please refer the below link for more details:

https://docs.adobe.com/content/help/en/experience-manager-65/developing/introduction/clientlibs.html...