Why is window.open() in Salesforce LWC Throwing a Security Error?

Question

I have been using window.open() in one of my Salesforce LWC components for years without any issues. This function is used to open an external webpage (not hosted on Salesforce).

Recently, I started encountering the following error only when triggering window.open() while the previous popup remains open:

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

In my LWC, the window.open() call is triggered when a record is clicked:

var urlString = "test.com/rec/{Dynamic ID based on selected record}";
window.open(
    "https://" + urlString,
    "quote",
    "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight
);

Previously, if the popup window was already open, clicking another record would override the existing popup because I used the same window name (quote). However, now the browser throws a security error instead of reusing the existing window.

If I change the window name to _blank, the error disappears, but this causes a new popup to open every time, which is not ideal. How can I overcome this issue while still ensuring that the existing popup is reused?

Answer

The error is caused by recent browser security changes and Salesforce’s strict Content Security Policy (CSP). When window.open() attempts to access a window that was previously opened, the browser enforces cross-origin security restrictions if the window’s origin differs from the current page.

Here are three possible solutions:

Solution 1: Use noopener to Prevent Security Conflicts

Adding "noopener" to the window features prevents the new window from having a reference back to the original window, which can avoid security errors.

var urlString = "test.com/rec/{Dynamic ID based on selected record}";
window.open(
    "https://" + urlString,
    "quote",
    "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight + ",noopener"
);

This prevents the browser from blocking access to the popup due to cross-origin restrictions while still allowing the existing window to be reused.

Solution 2: Close the Previous Window Manually Before Opening a New One

Instead of relying on the browser to override the previous popup, you can explicitly close it before opening a new one.

let popupWindow;
function openPopup(recordId) {
    var urlString = `https://test.com/rec/${recordId}`;
    
    // Close the previous window if it's open
    if (popupWindow && !popupWindow.closed) {
        popupWindow.close();
    }

    popupWindow = window.open(
        urlString,
        "quote",
        "width=" + window.screen.availWidth + ",height=" + window.screen.availHeight
    );
}

This ensures that only one popup remains open at any time, preventing the security error while maintaining the expected behavior.

Solution 3: Use _blank as a Last Resort

If neither of the above solutions work, using _blank will always open a new window without errors.

window.open("https://" + urlString, "_blank", "width="+window.screen.availWidth+",height="+window.screen.availHeight);

The downside of this approach is that it does not override the previous window, leading to multiple popups being opened.

The best approach depends on your requirements. Using noopener is the simplest fix and should work in most cases. If you want to ensure only one popup remains open, explicitly closing the previous window before opening a new one is the best solution. Using _blank should be the last option, as it does not allow reusing the same popup.

Kick Start Your Career with Real-Time Project-Based Salesforce Training

Our Salesforce Course is designed to provide a thorough understanding of the Salesforce platform, equipping you with the essential skills to thrive in the CRM industry. The curriculum includes vital modules such as Salesforce Admin, Developer, and AI, combining foundational knowledge with hands-on practice. By engaging in real-world projects and assignments, you’ll develop the expertise to address complex business challenges using Salesforce solutions. Our expert instructors ensure you gain both technical skills and industry insights necessary for success in the Salesforce ecosystem.

Along with technical knowledge, our Salesforce Training in Minneapolis 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 well-prepared for certification exams and equipped with the practical skills employers value. Begin your Salesforce career with us and unlock countless career opportunities. Sign up for a Free Demo today!