升级至Django 4后window.close()功能失效问题排查

现象 #

项目依赖包更新至最新版本，且将Django从3.x升级到4.x后，在Firefox浏览器中测试发现：
使用window.open()打开新窗口并赋值给变量时，变量返回Window对象而非之前的Object，原本调用test.close()能正常关闭窗口的功能完全失效。调试代码如下：

let test = window.open($(e.currentTarget).attr('href'), '_blank', "height=640,width=480,toolbar=0,location=0,menubar=0");
console.log(test);

可能原因 #

核心原因大概率是Django 4.x默认调整了安全响应头配置，触发了浏览器的同源策略限制：

• Django 4.x可能默认启用了更严格的Content-Security-Policy（CSP）或修改了X-Frame-Options头，当新窗口加载的页面与父页面跨源时，浏览器会限制父页面对新Window对象的操作权限，导致close()方法无法调用。
• 依赖包更新可能放大了这一问题，但根源还是Django升级带来的安全头变化。

解决方案 #

1. 调整Django的响应头配置 #

• 打开项目的settings.py，检查是否新增了Content-Security-Policy配置。如果存在frame-src限制，将目标页面的域名加入允许列表；若X-Frame-Options设为DENY，可改为SAMEORIGIN（仅当目标页面与父页面同域名时生效）。
• 若使用django-cors-headers插件，确认CORS_ALLOWED_ORIGINS包含父页面的域名，确保跨源场景下允许页面间的交互。

2. 处理跨源窗口的关闭逻辑 #

如果新窗口页面与父页面跨源，浏览器会阻止直接调用close()，可以通过postMessage实现跨页通信：

• 父页面发送关闭指令：

  let test = window.open($(e.currentTarget).attr('href'), '_blank', "height=640,width=480,toolbar=0,location=0,menubar=0");
  // 向新窗口发送关闭消息
  test.postMessage('request-close', '*');
  

• 目标页面监听消息并执行关闭：

  window.addEventListener('message', (event) => {
    // 可添加origin校验提升安全性
    if (event.data === 'request-close') {
      window.close();
    }
  });
  

3. 确保窗口打开的是同源页面 #

检查window.open()的目标URL，确保其与父页面属于同一域名。如果是相对路径，确认不会因路由重定向导致跨源；若为外部链接，只能通过postMessage方案处理。

内容的提问来源于stack exchange，提问作者Patryk Szczepański