Encoding issue while pointing to local AEM instance

[karol-pawelski-wttech]

Expected Behaviour

HTML page should be properly rendered by proxy server when the proxy points to local AEM instance and local AEM instance uses the proxy server for hosting Site Theme.

Actual Behaviour

Actual: HTML page is not properly encoded and contains "Â" characters instead of " ".

Reproduce Scenario (including but not limited to)

In our project setup we are using Front-End Pipelines & Site Themes and we would like to use proxy server that points to local AEM instance. Additionally, on AEM side we would like to use the proxy server to host the Site Theme (theme.css, theme.js).

Steps to Reproduce

1) Create sample site called mysite on AEMaaCS Author instance 2) Enable Front-End pipeline for mysite on the AEMaaCS instance 3) Create Front-End pipeline in Cloud Manager and run the Front-End pipeline for mysite 5) Go to the Package Manager on the AEMaaCS instance, create package with /conf/mysite filter, build and download the package 6) Recreate mysite on local AEM Author instance and set up front-end project (e.g. based on https://github.com/adobe/aem-site-template-standard-theme-e2e) 7) Go to the Package Manager on the local instance and install the downloaded package 8) Go to CR/DE on the local instance and change prefixPath to point to local proxy http://localhost:7001 in following node /conf/onexp/sling:configs/com.adobe.cq.wcm.core.components.config.HtmlPageItemsConfig/jcr:content 9) Open any page in mysite (e.g. /content/mysite/us/en) the local AEM instance and add Text component containing space character (e.g. Example of text message.). 10) Starts the proxy server and open http://localhost:7001/content/mysite/us/en.html in browser 11) Observe incorrect encoding for space characters Example of text message.Â.

Platform and Version

aem-sdk-2022.6.7904.20220629T070041Z-220600

Sample Code that illustrates the problem

In proxy.js there is following code that if HTML does not contain any link to static CDN domain for Site Theme (e.g. https://static-p12345-e12345.adobeaemcloud.com/1234512345123451234512345123451234512345123451234512345123451234), the HTML is not modified and response contains incorrect encoding for .

proxyRes.on('end', function () {
        const data = Buffer.concat(body);
        const html = isGzipedRequest ? zlib.unzipSync(data).toString() : data.toString();
        const replacedHtml = html.replace(/"\s*?(http|\/).*?\/(_default|[0-9a-f]{64})\//g, '"/');
        const isHtmlModified = (replacedHtml.length !== html.length);

        if (isHtmlModified) {
          try {
            res.setHeader('content-encoding', '');
            res.setHeader('content-type', 'text/html');
            res.removeHeader('content-length');
            res.end(replacedHtml);
            log(`Proxy ${requestUrl} with modified theme artifacts.`);
          } catch (err) {
            error('Something went wrong. Proxy html rewrite error: ', err);
          }
        } else {
          res.end(data.toString('binary'));
          log(`Proxy ${requestUrl} without changes.`);
        }
      });

Our suggestion for the fix would be to use data.toString() instead data.toString('binary'):

proxyRes.on('end', function () {
        const data = Buffer.concat(body);
        ...

        if (isHtmlModified) {
          ...
        } else {
          res.end(data.toString());
          ....
        }
      });

Logs taken while reproducing problem

n/a

[buuhuu]

Tracked in SITES-7511