Clientlib added in a component script is not accessible in dispatcher

salamswapnil

29-06-2020

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

Accepted Solutions (1)

Accepted Solutions (1)

albinissac

29-06-2020

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

Answers (3)

Answers (3)

vanegi

Employee

30-06-2020

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...

 

 

shashi1223

29-06-2020

@salamswapnil  As @Arun_Patidar 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...

Arun_Patidar

MVP

29-06-2020

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.