I'm having trouble embedding an SSRS report in an <iframe> from an external application. The app calls the report server URL, and we've already configured CORS and switched to basic authentication.
We pass the credentials in the request using JavaScript, and it seems to work — the report loads the parameter header without prompting for login. However, the page fails to load completely because the Sys scripts throw errors. The issue is that the loaded page tries to fetch scripts from the iframe's origin (http://192.168.1.101:8081) instead of the SSRS server (http://192.168.1.101), resulting in Uncaught ReferenceError: Sys.
Interestingly, if I embed the iframe without passing credentials and manually authenticate when prompted by the browser, the report loads perfectly. Below is the JavaScript code used to embed the iframe and the error message. Any suggestions or workarounds would be greatly appreciated!
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Report Viewer</title> <style> body, html { margin: 0; padding: 0; height: 100%; } iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <iframe id="reportFrame"></iframe> <script> const username = "user"; const password = "password"; const reportUrl = "http://192.168.1.101:80/ReportServer/Pages/ReportViewer.aspx?/MyReport&rs:Embed=True&rc:LinkTarget=main"; const credentials = btoa(username + ":" + password); fetch(reportUrl, { method: "GET", headers: { "Authorization": "Basic " + credentials, "Upgrade-Insecure-Requests": "1", "Cache-Control":"max-age=0", "Access-Control-Allow-Origin":"http://192.168.1.101:8081", "Access-Control-Allow-Credentials":"true", "Access-Control-Allow-Methods":"GET, PUT, POST, PATCH, DELETE", "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept, Authorization", } }) .then(response => response.text()) .then(html => { const iframe = document.getElementById("reportFrame"); const blob = new Blob([html], { type: "text/html" }); iframe.src = URL.createObjectURL(blob); }) .catch(error => { console.error("Error to load the report:", error); }); </script> We're using the latest PBI Reporting Server.
baseelement with the correcthrefmight perhaps do. But all of this will only work, if those resources are not protected by the HTTP Auth as well. (And any links inside the report, that point to other such pages that are also protected(?), will likely also not work directly - you'd probably have to intercept those as well, and replace them with code that fetches them while supplying the credentials.)http://192.168.1.101:80/ReportServer/..., then the context to resolve relative URLs will be the correct one; if you "feed" the iframe from a different origin (your blob), then it won't be.