Why is window.open() in LWC throwing a SecurityError?

Question

I have been using window.open() in my Salesforce LWC component for years to open an external page. This function allows me to override the existing popup when clicking on a new record. However, recently, I started encountering the following error in the console when opening a new record while the previous popup remains open:

error during openSecurityError: Permission denied to access property "eval" on cross-origin object

Here is the code I am using:

var urlString = "test.com/rec/{DynamicId}";
window.open("https://" + urlString, "quote", "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight);

Previously, this worked fine, and clicking on a new record would reuse the same popup window named "quote". Now, this error occurs when trying to open a new record while the previous popup is still open. If I use _blank instead of a fixed name, multiple popups open, which is not ideal since users would have to close them manually.

What is causing this issue, and how can I fix it while still allowing the same popup to be reused?

Answer

This issue is likely caused by modern browser security policies that restrict access to cross-origin windows. When window.open() tries to reuse an existing window pointing to a different domain, the browser blocks interactions with it for security reasons. This is because the external site might enforce security headers like Cross-Origin-Opener-Policy (COOP) and Content Security Policy (CSP), which prevent scripts from accessing properties of a cross-origin window.

Here are several ways to resolve this issue:

Use a Stored Window Reference Instead of a Fixed Name

Instead of relying on the browser to override the popup, you can store a reference to the popup window and reuse it. This avoids the cross-origin access issue:

let popupWindow;  

function openPopup(recordId) {  
    var urlString = "https://test.com/rec/" + recordId;  

    if (popupWindow && !popupWindow.closed) {  
        popupWindow.location.href = urlString; // Reuse the same window  
    } else {  
        popupWindow = window.open(urlString, "quote", "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight);  
    }  
}

This method ensures that if the popup window is already open, its URL is updated instead of opening a new one. It prevents security errors because you are only changing the location.href, not trying to override a cross-origin window.

Use the noopener Feature in window.open()

Some browsers enforce cross-origin restrictions when reusing an existing window. Adding "noopener" in the feature string might help prevent issues by removing access to window.opener:

var urlString = "https://test.com/rec/{DynamicId}";
window.open(urlString, "quote", "noopener,width=" + window.screen.availWidth + ",height=" + window.screen.availHeight);

Using noopener ensures that the new window does not have access to the parent page, reducing security risks and potentially avoiding browser restrictions.

Use _blank as a Last Resort

If none of the above methods work, you can open each record in a new popup using _blank:

var urlString = "https://test.com/rec/{DynamicId}";
window.open(urlString, "_blank", "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight);

This prevents the security error but results in multiple popups, which may not be ideal. Users will have to close them manually.

Final Recommendation

The best approach is to store and reuse the window reference (Option 1) since it allows window reuse without triggering security restrictions. If the issue persists, try adding noopener (Option 2) to avoid browser restrictions. Using _blank (Option 3) should be a last resort if no other solutions work.

Job-Oriented Salesforce Course with Real-Time Projects and Money Back Guarantee

Our Salesforce Course is designed to provide you with a deep understanding of the Salesforce platform, equipping you with the essential skills to succeed in the CRM field. The program covers important modules such as Salesforce Admin, Developer, and AI, blending theory with hands-on practice. You’ll gain practical experience through real-world projects and assignments, enabling you to solve complex business challenges using Salesforce solutions. Our expert instructors ensure that you gain both technical proficiency and relevant industry knowledge to thrive within the Salesforce ecosystem.

Beyond technical skills, our Salesforce training in Bangalore offers personalized mentorship, exam preparation, and interview coaching to enhance your career prospects. You’ll have access to comprehensive study materials, live project experience, and dedicated support throughout your learning journey. Upon completing the course, you’ll be fully prepared for certification exams and equipped with the problem-solving skills that employers seek. Start your Salesforce journey with us and unlock a world of career opportunities. Enroll for a Free Demo now!