Cross-Origin-Opener-Policy 设置后页面打不开怎么回事？

南宫熙然提问于 2026-03-12 12:29:21 阅读 43

安全

我在 Nginx 里加了 Cross-Origin-Opener-Policy: same-origin，结果页面直接白屏了，控制台报错说“Blocked by COOP”。我就是想防止别人用 window.open 引用我的页面，但自己站内跳转也挂了，这咋整？

我试过改成 unsafe-none 能正常打开，但这样就没防护作用了。是不是我理解错了这个头的用法？

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>测试页面</title>
</head>
<body>
  <button onclick="window.open('/other.html')">打开新页</button>
</body>
</html>

我来解答赞 11 收藏

反馈

2 条解答

a'ゞ正浩 Lv1

Cross-Origin-Opener-Policy: same-origin 这个头确实会限制页面之间的关系。你现在的做法是正确的，但需要调整下站内跳转逻辑。

在设置 COOP 为 same-origin 后，window.open 只能打开同源的新窗口，而且新旧窗口不能直接引用对方的 window 对象。你的按钮点击会触发跨窗口访问，导致被阻止。

要解决这个问题，建议把 window.open('/other.html') 改成直接跳转，用 location.href = '/other.html' 来代替。这样效率更高，也不违反 COOP 策略。

如果确实需要新开窗口，确保目标页面也设置了相同的 COOP 头，并且是在用户交互（如点击）时触发。注意别在 onload 或其他非用户操作场景调用 window.open。

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>测试页面</title>

</head>

<body>

  <button onclick="location.href='/other.html'">打开新页</button>

</body>

</html>

这种写法既保持了安全防护，又不会影响用户体验。折腾这些安全头真够呛，但为了防止恶意站点利用我们的页面，这代价值得。

2026-03-29 18:02

IT人梓奥 Lv1

问题在于 same-origin 会把 window.open 打开的同源页面也当成跨域关系拦掉。

解决方案：改成 Cross-Origin-Opener-Policy: same-origin-allow-popups，这样同源页面通过 window.open 打开的可以继续通信，同时跨域的 opener 引用还是会被阻断。

Nginx 配置：

add_header Cross-Origin-Opener-Policy "same-origin-allow-popups" always;

如果你只需要保护某些敏感页面，可以只给那些页面加这个头，其他页面该咋用咋用。

2026-03-12 12:36