Liferay.Widget interacts with PJAX requests causing widget <iframe> to be the only rendered content in the whole page

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: 6.2.X EE, 7.0.X, Master
• Fix Version/s: 7.0.0 DXP FP35, 7.0.0 DXP SP7, 7.0.5 CE GA6, 7.0.X, 7.1.0 M1, 7.1.X, Master
• Component/s: Frontend Infrastructure > Utilities
• Labels:
  • ee-ts
  • liferay-digital-enterprise-70-sp7
  • liferay-fixpack-de-35-7010
• Branch Version/s:
  7.0.x
• Backported to Branch:
  Committed
• Fix Priority: 4
• Sprint: S01E03-"One-Eyed"Willy's hoard
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/53439
• What problem did the customer find?: Embedding a portlet in a web content using Liferay.widget code, and rendering that web content in a page results in that portlet being displayed in fullscreen when accessing the page
• What do you think is the root cause? (if known):
  Hide

  X-PJAX header is sent to the server when you click page link from the navigation portlet. This does not happen when writing the URL in the browser or when reloading page. ; We checked that the presence of that header is the key factor for the behavior to happen ; Seems that there is a sort of infinite loop. Browser profiling reports idle time and lack of subsequent Javascript activity (for example, periodic tasks such as poller requests in chat portlet stops working)

  Show

  X-PJAX header is sent to the server when you click page link from the navigation portlet. This does not happen when writing the URL in the browser or when reloading page. We checked that the presence of that header is the key factor for the behavior to happen Seems that there is a sort of infinite loop. Browser profiling reports idle time and lack of subsequent Javascript activity (for example, periodic tasks such as poller requests in chat portlet stops working)

Hi FEI Product Team.

a customer reported an issue that is hard for us to diagnose due to the lack of knowledge about the specific interactions taking place between the javascript libraries and PJAX content loading logic. That's the reason why we need to escalate the final diagnose (and probably fix) of this bug.

Description
Any portlet provides a sharing functionality available in the Portlet Configuration popup. This functionality allows to render the portlet programatically via javascript and the use of the Liferay.Widget component. Here is an example for master:

<script src="https://liferay-master.wedeploy.io/o/frontend-js-web/liferay/widget.js" type="text/javascript"></script>
<script type="text/javascript">
	Liferay.Widget({url: 'https://liferay-master.wedeploy.io/widget/web/guest/home/-/com_liferay_hello_world_web_portlet_HelloWorldPortlet'});
</script>

If we use the above code as part of a regular portal page, there is a weird behavior: page does not load completely, and only the portlet rendered via Liferay.widget loads in full screen. You can reproduce this as follows.

Steps to reproduce

1. Go to "Configuration" of the "Hello World" portlet > Sharing > Copy the contents of the code field
2. Site > Content > Web Content > add a web content > change the content field to code view > paste the copied code > Publish
3. Create a new page and add a "Web Content Display" portlet to the page
4. "Configuration" of the "Web Content Display" portlet > select the web content you just created > save

Reproduced in:

• DE-32
• 70x GIT ID: 328b10712a359b794c3a8d19f105bec2fe52e6d0
• master GIT ID: 9af9d3b0f7b4948bae0fa9e9e23a3e7084747937

Expectation

I'd expect page lo load normally when we use the Liferay.Widget function in all cases, regardless we activate pjax or not in the http request.

What I did so far

I tried to identify the conditions under this get reproduced, and discovered that:

• Issue reproduces every time you click on the link to the page having the web content. I mean, the link available in the navigation portlet
• Issue never reproduces when you write the URL in the browser manually
• Issue never reproduces when, once it's reproduced, you hit F5

As this was a bit puzzling to me (URL in the request is pretty much the same in the 3 cases above), I deeply analyzed the HTTP Request sent to the server and found a key difference:

• Every time issue reproduces, HTTP request contains the headers X-PJAX:true and X-Requested-With:XMLHttpRequest
• When the headers are not present, issue never reproduces 

This lead me to conclude that PJAX logic is interfering somehow with the regular page loading. 

Additional tests:

• I also took some snapshots with chrome dev tools and profile info shows idle time once portlet is loaded
• A page with only the IFrame portlet loads normally so the <iframe> tag used by the Liferay.widget seems not be causing this
• Disabling SPA has no effect

What I'm requesting

As this happens with any portlet, we concluded that the right component is front-end infrastructure. We would need assistance in diagnosing the root cause of this and, if possible, any help to fix this.

Thanks so much