published server CSS loading issue.

[imadullakhan]

Hi @All

I have published servers, in that if i am accessing as a anonymous user then the pages css is not coming like page and component level css is not loading, once i logged in the server as ADMIN or someother user then the pages with css is loading. Can anyone help me here..?

[Shashi_Mulugu]

@imadullakhan Can you please check if the clientlibs path is starting with /apps or /etc.clientlibs?

We need to set a option at clientlib level, allowproxy true, to enable this?

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

https://andreishilov.github.io/blog/proxing-clientlib/

[imadullakhan]

Hi @Shashi_Mulugu, i am using AEM 6.5 so my all client library are present in /apps. So what you want me to provide permission can you please tell me elaborately.

[Shashi_Mulugu]

I am referring to allowproxy property on the clientlib where you define the Categories for a clientlibrary. Refer to screen i posted.

[imadullakhan]

Thank you so much now its working fine, i followed the procedure as you told.

[Shashi_Mulugu]

Refer to allowproxy property here, in the right side pane

[Vaibhavi_J]

Hi @imadullakhan , 

Issue is due to your clientlib is not exposed for anonymous user. 

Anonymous user will not be having read access for apps. So resources stored under /apps folder cannot be accessed directly in publisher. 

To fix the issue expose the clientlib under /apps to /etc.clentlibs where you can access this in publisher. 

To expose the clientlib please do follow the below steps. 

1. Navigate to the clientlib folder under /apps.

Ex:/apps/myproject/clientlibs/foo

2.Set the property allowProxy to true. 

3. You should be able to access the clientlib in publisher now which is loaded as part of /etc folder as proxy

Ex:/etc.clientlibs/myprojects/clientlibs/foo.js

Check the below document for details. 

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

[vanegi]

 Hi @imadullakhan,

The publisher has a more restricted set of permissions than the author instance has. What's most likely occurring is that the content that's being rendered is doing something that can only be done with a specific set of permissions.

Examples of this could be:

- Accessing content that is not under the /content directory
- Attempting to modify content during rendering
Occasionally errors will show up in the source of the page and not the log files, you can usually get a good idea of where the error is occurring by seeing where the page stops rendering. Additionally increasing the level of logging during the request will help as well.

If the clientlibs, the header, and the footer are in locations that don't allow anonymous access, then browser requests for these would get 404s. Resources under /etc or /apps don't have anonymous access by default in AEM versions.

See https://docs.adobe.com/content/help/en/experience-manager-65/administering/security/security.html for details on managing permissions and check what permissions the "anonymous" group has for the resources that aren't loading.

To fix the issue, you need to give read access to your clientlibs (like in this case under /apps/myproject/clientlibs) for anonymous user if you want to load page properly with all css and js without authentication in publisher.

1. Add a property allowProxy Boolean true in clientlib folder node.

2. Now include this clientlibs in any page.
3. The clientlibs stayed in /apps can be accessed through /etc.clientlibs So there is no need to embed the clientlibs in global clientlibs under /etc.

In order to better isolate code from content and configuration, it is recommended to locate client libraries under /apps and expose them via /etc.clientlibs by leveraging the allowProxy property.

Note: Don’t forgot to change the dispatcher configuration for /etc.clientlibs. Adobe recommends that the clientlibs should exist under /apps and exposed via /etc.clientlibs using proxy servlet.

Thanks!!

[BrianKasingli · Accepted solution]

@imadullakhan,

Adobe recommends client libraries should be stored in the /apps folder for example, /apps/weretail/clientlibs/clientlib-site. While utilising the client library utils from Sightly to serve the client library, the rendered CSS file will look like /apps/weretail/clientlibs/clientlib-site.css, this is because you have not enabled the proxy configuration for the client library. In your publish environment, you are not able to access the client library file is because for security purposes. The /apps folder is restricted to the public; the /apps folder, recommended by Adobe, is a non-public-accessible zone. A simple fix will be to append the "allowProxy" attribute to your client library:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:ClientLibraryFolder"
    allowProxy="{Boolean}true"
    categories="[we.retail.site]"/>

Once the allowProxy attribute and value have been declared, the sightly client library utils will serve the client library via proxy, serving /etc.clientlibs/weretail/clientlibs/clientlib-site.css|js. ^/etc.clientlibs/* can be accessible by the public.

I hope this helps,
Brian.

[imadullakhan]

Thank You!