diff --git a/account_financial_report/__manifest__.py b/account_financial_report/__manifest__.py
index ab8ff488..6f61d7b5 100644
--- a/account_financial_report/__manifest__.py
+++ b/account_financial_report/__manifest__.py
@@ -43,12 +43,9 @@
     ],
     "assets": {
         "web.assets_backend": [
-            "account_financial_report/static/src/js/report_action.esm.js",
+            "account_financial_report/static/src/js/*",
             "account_financial_report/static/src/xml/**/*",
         ],
-        "web.report_assets_common": [
-            "account_financial_report/static/src/js/report.js",
-        ],
     },
     "installable": True,
     "application": True,
diff --git a/account_financial_report/static/src/js/report.esm.js b/account_financial_report/static/src/js/report.esm.js
new file mode 100644
index 00000000..535d43c0
--- /dev/null
+++ b/account_financial_report/static/src/js/report.esm.js
@@ -0,0 +1,73 @@
+/** @odoo-module */
+
+import {useComponent, useEffect} from "@odoo/owl";
+
+function toTitleCase(str) {
+    return str
+        .replaceAll(".", " ")
+        .replace(
+            /\w\S*/g,
+            (txt) => `${txt.charAt(0).toUpperCase()}${txt.substr(1).toLowerCase()}`
+        );
+}
+
+function enrich(component, targetElement, selector, isIFrame = false) {
+    let doc = window.document;
+    let contentDocument = targetElement;
+
+    // If we are in an iframe, we need to take the right document
+    // both for the element and the doc
+    if (isIFrame) {
+        contentDocument = targetElement.contentDocument;
+        doc = contentDocument;
+    }
+
+    // If there are selector, we may have multiple blocks of code to enrich
+    const targets = [];
+    if (selector) {
+        targets.push(...contentDocument.querySelectorAll(selector));
+    } else {
+        targets.push(contentDocument);
+    }
+
+    // Search the elements with the selector, update them and bind an action.
+    for (const currentTarget of targets) {
+        const elementsToWrap = currentTarget.querySelectorAll("[res-model][domain]");
+        for (const element of elementsToWrap.values()) {
+            const wrapper = doc.createElement("a");
+            wrapper.setAttribute("href", "#");
+            wrapper.addEventListener("click", (ev) => {
+                ev.preventDefault();
+                component.env.services.action.doAction({
+                    type: "ir.actions.act_window",
+                    res_model: element.getAttribute("res-model"),
+                    domain: element.getAttribute("domain"),
+                    name: toTitleCase(element.getAttribute("res-model")),
+                    views: [
+                        [false, "list"],
+                        [false, "form"],
+                    ],
+                });
+            });
+            element.parentNode.insertBefore(wrapper, element);
+            wrapper.appendChild(element);
+        }
+    }
+}
+
+export function useEnrichWithActionLinks(ref, selector = null) {
+    const comp = useComponent();
+    useEffect(
+        (element) => {
+            // If we get an iframe, we need to wait until everything is loaded
+            if (element.matches("iframe")) {
+                element.addEventListener("load", () =>
+                    enrich(comp, element, selector, true)
+                );
+            } else {
+                enrich(comp, element, selector);
+            }
+        },
+        () => [ref.el]
+    );
+}
diff --git a/account_financial_report/static/src/js/report.js b/account_financial_report/static/src/js/report.js
deleted file mode 100644
index 92c03fb0..00000000
--- a/account_financial_report/static/src/js/report.js
+++ /dev/null
@@ -1,58 +0,0 @@
-odoo.define("account_financial_report.report", function (require) {
-    "use strict";
-
-    require("web.dom_ready");
-    const utils = require("report.utils");
-
-    if (window.self === window.top) {
-        return;
-    }
-
-    const web_base_url = $("html").attr("web-base-url");
-    const trusted_host = utils.get_host_from_url(web_base_url);
-    const trusted_protocol = utils.get_protocol_from_url(web_base_url);
-    const trusted_origin = utils.build_origin(trusted_protocol, trusted_host);
-
-    /**
-     * Convert a model name to a capitalized title style
-     * Example: account.mode.line --> Account Move Line
-     *
-     * @param {String} str
-     * @returns {String}
-     */
-    function toTitleCase(str) {
-        return str
-            .replaceAll(".", " ")
-            .replace(
-                /\w\S*/g,
-                (txt) => `${txt.charAt(0).toUpperCase()}${txt.substr(1).toLowerCase()}`
-            );
-    }
-
-    // Allow sending commands to the webclient
-    // `do_action` command with domain
-    $("[res-model][domain]")
-        .wrap("<a/>")
-        .attr("href", "#")
-        .on("click", function (ev) {
-            ev.preventDefault();
-            const res_model = $(this).attr("res-model");
-            const action = {
-                type: "ir.actions.act_window",
-                res_model: res_model,
-                domain: $(this).attr("domain"),
-                name: toTitleCase(res_model),
-                views: [
-                    [false, "list"],
-                    [false, "form"],
-                ],
-            };
-            window.parent.postMessage(
-                {
-                    message: "report:do_action",
-                    action: action,
-                },
-                trusted_origin
-            );
-        });
-});
diff --git a/account_financial_report/static/src/js/report_action.esm.js b/account_financial_report/static/src/js/report_action.esm.js
index 0e8e5855..ec7e73bd 100644
--- a/account_financial_report/static/src/js/report_action.esm.js
+++ b/account_financial_report/static/src/js/report_action.esm.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 import {ReportAction} from "@web/webclient/actions/reports/report_action";
 import {patch} from "web.utils";
+import {useEnrichWithActionLinks} from "./report.esm";
 
 const MODULE_NAME = "account_financial_report";
 
@@ -10,6 +11,7 @@ patch(ReportAction.prototype, "account_financial_report.ReportAction", {
         this.isAccountFinancialReport = this.props.report_name.startsWith(
             `${MODULE_NAME}.`
         );
+        useEnrichWithActionLinks(this.iframe);
     },
 
     export() {