[FIX] web_editor: fix LinkPopover in iframe on Firefox

Prior to this commit and on Firefox 109, clicking on a link while in
edit mode on the website app would trigger a traceback.

This is caused by the fact that the LinkPopover widget is contained
inside the iframe while use the ClipboardJS global defined in the top
window.

Indeed, ClipboardJS checks if the target (the button to copy the link)
is an HTMLElement. To do so, it uses the "instanceof" keyword. However,
the __proto__ (what is used for computing instanceof) of the target is
different depending on the browser.

For Chrome, the HTMLElement's __proto__ depends on which "document" it
was created. On Firefox, when attaching an element to a parent, it will
switch __proto__ to the one from the frame from which it is attached.

To fix this, we use the ClipboardJS from the element's instance window.

In any case, using instanceof when working with iframe is a bad idea,
see [1]. In this case, the fix is made because ClipboardJS is an
external library.

Steps to reproduce:
- Download Firefox 109+
- Go on Website and switch to edit mode
- Click on a Link : A traceback appears.

[1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof#instanceof_and_multiple_realms

closes odoo/odoo#111266

X-original-commit: 732848f2b52bea4ebae18cb5adedf581d5112aa6
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
This commit is contained in:
Arthur Detroux (ard)
2023-01-30 09:39:32 +01:00
committed by qsm-odoo
parent e72fb7aec0
commit c2932dfcfe
@@ -38,7 +38,15 @@ const LinkPopoverWidget = Widget.extend({
this.$fullUrl = this.$('.o_we_full_url');
// Copy onclick handler
const clipboard = new ClipboardJS(
// ClipboardJS uses "instanceof" to verify the elements passed to its
// constructor. Unfortunately, when the element is within an iframe,
// instanceof is not behaving the same across all browsers.
const containerWindow = this.container.ownerDocument.defaultView;
let _ClipboardJS = ClipboardJS;
if (this.$copyLink[0] instanceof containerWindow.HTMLElement) {
_ClipboardJS = containerWindow.ClipboardJS;
}
const clipboard = new _ClipboardJS(
this.$copyLink[0],
{text: () => this.target.href} // Absolute href
);