Uncaught DOMException：跨域iframe访问被阻止的原因是什么？

核心原因：浏览器同源策略限制 #

浏览器的同源策略是核心安全机制，专门用来阻止不同源的页面之间进行脚本层面的交互。你的主页面运行在http://localhost:3000，iframe加载的页面是https://gkwhelps.herokuapp.com，两者在三个关键维度上完全不同：

• 协议：http vs https
• 域名：localhost vs herokuapp.com
• 端口：3000 vs HTTPS默认的443
  只要这三个维度有一个不一致，就属于跨域，浏览器会直接阻断主页面JS对iframe内部DOM的访问（包括获取页面标题这类操作）。

初始页面也报错的原因 #

哪怕iframe刚加载的是你自己开发的页面，只要主页面和iframe页面的源不匹配，同源策略就会生效。浏览器只认URL的源是否一致，不会因为页面是你开发的就放宽限制。

跨域的判定标准 #

两个页面属于同源的前提是协议、域名、端口三者完全一致，缺一不可，只要有一项不同，就会被判定为跨域，触发访问拦截。

内容的提问来源于stack exchange，提问作者user19759133