Rendering AEM pages with proxy layer not loading the CSS and JS files

[Rama_KrishnaPo]

Hi,
I want to call the AEM page from another proxy layer, which contains an extra path.

https://xxx.com/extrapath/content/acc-coach.html

It's loading the HTML content, but it's not loading the JS and CSS file because of the relative path. 

Could anyone help me on this?

[Kamal_Kishor]

@Rama_KrishnaPo : Can you please check the network request for those clientlibs? What is the response code for them i.e 404 or something else.

If you can access the page, ideally you should be able to access the clientlibs as well.
Are there any errors in developer console?

thanks.

[GabrielMircea]

Hi @Rama_KrishnaPo 

There are multiple ways to do this. I recommend you read into it but i will share some of the most common ones, since i do not know the exact infrastructure you are using.

From the image, your client libraries (clientlibs) have relative paths like /etc.clientlibs/.... When an extra path (e.g., /extrapath/) is added in a proxy setup, these relative paths break because they don’t account for the additional base path.

You can make these clientlib references absolute by prepending the correct base path. Modify your HTML or HTL to render the full path dynamically:

<link rel="stylesheet" href="${request.scheme}://${request.serverName}/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaed300a0aa7af53f3c8.css" type="text/css"/>
<script src="${request.scheme}://${request.serverName}/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcd0b3eb7.js"></script>

If you are using an AEM Dispatcher or a reverse proxy like Nginx/Apache, you can rewrite static asset paths. This ensures requests for /extrapath/etc.clientlibs/... are correctly forwarded to /etc.clientlibs/... on the AEM server.

For example, in an Apache Dispatcher configuration:

# Rewrite asset paths for extra base path
RewriteEngine On
RewriteRule ^/extrapath/etc\.clientlibs/(.*)$ /etc.clientlibs/$1 [L]

[Rama_KrishnaPo]

I want to add an extra path to the JS and CSS files in AEM page.

For example, I have the below CSS and JS links in AEM page

<link rel="stylesheet" href="/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
<script src="/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

I want to prefix with extra path to CSS and JS
<link rel="stylesheet" href="/extrapath/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
<script src="/extrapath/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

I am getting 403 response code when I call through the proxy for the above links.

How to add this extra path?

[arunpatidar]

Hi @Rama_KrishnaPo 

You need a rewrite rule at dispatcher to fix this

#Remapping /extrapath/etc.clientlibs - remove /extrapath
RewriteCond %{REQUEST_URI} ^/extrapath
RewriteRule ^/extrapath/(.*) /$1 [L,NC,PT]

[Rama_KrishnaPo]

Hi @arunpatidar ,

when a request is made to the AEM page via a proxy, the first point of contact is the dispatcher which loads the content.However, the issue arises with the subsequent calls for JavaScript and CSS files. These requests are not being routed correctly due to an incorrect path, and thus, the dispatcher doesn't receive them. As a result, these files fail to load.
Wrong path
<link rel="stylesheet" href="/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
<script src="/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

Correct Path

<link rel="stylesheet" href="/extrapath/etc.clientlibs/foundation/clientlibs/main.min.b4994788cf1eaeed300a0aa7af53f3c8.css" type="text/css"/>
<script src="/extrapath/etc.clientlibs/clientlibs/granite/jquery.min.cee8557e8779d371fe722bbcdd3b3eb7.js"></script>

[arunpatidar]

Hi @Rama_KrishnaPo 

Could you please enable Dispatcher debug logs? Maybe dispatcher filter rule is blocking those requests.

[MukeshYadav_]

Hi @Rama_KrishnaPo ,

So the issue is you want to transform (remap) the /etc.clientlibs/foundation/clientlibs/* to /extra-path//etc.clientlibs/foundation/clientlibs/* and it should reflect in html itself so that it can be routed via proxy.

It seems tedious process as clientlibs get added with OOTB template

<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.js @ categories='sourcedcode.site'}"/>
</sly>

You may check if you can create custom clienlibs utility to include in page

OOTB interface https://adobedocs.github.io/aem-developer-materials/6-5/javadoc/com/adobe/granite/ui/clientlibs/Html...

https://github.com/DantaFramework/AEM/blob/master/src/main/java/danta/aem/util/ClientLibraryUtil.jav...

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/serving-clientlibs-from-co...

Thanks