如何使用JS获取指定站点iframe页面的cookies

首先明确浏览器的安全限制逻辑：父页面能否读取iframe内页面的cookie，完全取决于二者是否满足同源要求，以及你是否有权限控制iframe页面的代码逻辑，对应方案如下：

场景1：iframe加载的页面与你的父页面完全同源（协议、域名、端口三者完全一致） #

• 必须等待iframe加载完成后再执行读取操作，未完成加载时读取会拿到异常值，参考代码：

const targetIframe = document.getElementById('你的iframe元素ID')
targetIframe.onload = function() {
  const iframeCookies = targetIframe.contentDocument.cookie
  console.log(iframeCookies)
}

• 检查目标cookie是否带有HttpOnly标记，带有该标记的cookie不允许任何前端JS读取，仅能由服务端侧获取，这是强制安全规则。

场景2：iframe加载的页面与你的父页面跨域 #

• 如果你有权限修改iframe加载页面的代码，可以通过postMessage实现跨域通信传递cookie：
  父页面监听消息代码：

  window.addEventListener('message', function(e) {
    // 必须校验消息来源，避免安全风险
    if (e.origin !== 'https://iframe所属站点的完整域名') return
    const receivedCookies = e.data
    console.log(receivedCookies)
  })
  

  iframe页面侧发送消息代码：

  window.onload = function() {
    // 仅向指定的父页面域名发送数据，避免信息泄露
    window.parent.postMessage(document.cookie, 'https://你的父页面完整域名')
  }
  

• 如果你没有权限修改iframe加载页面的代码，没有任何可行方案可以读取该页面的cookie，这是浏览器同源策略的强制安全限制，目的是防止恶意站点窃取用户其他网站的敏感凭证，所有试图绕过的方法都属于浏览器漏洞，会被官方及时修复。

异常输出原因说明 #

你之前遇到的other values are output问题，大概率是跨域触发安全限制、iframe未完成加载就执行读取、或者误读取到父页面自身的cookie导致的。 #

内容的提问来源于stack exchange，提问作者D R A G O N