上有政策 - 同源政策

为什麽要有同源政策？

可以先想想没有同源政策会发生什麽事？

当你在看这篇文章时，可以看看你的浏览器开了多少分页，可能开了 gmail 信箱的页面，脸书，无数部落格等等，这时候这些网站间便可以读取其他网站的资讯，如果这时候某个网页要读取你个人信箱的私人讯息也是可以的，这时你可能会想，这样许多私人的资讯不就会被窃取吗？

没错，正是为了避免恶意的脚本透过 DOM 存取资料，同源政策规定了只有来源相同的文件可以彼此存取资源。

那怎麽样才算是同源呢？

我们先来看看访问一个网页时一定会需要的网址，一个网址可以大致分成四个部分：

http://www.example.com/dir/page.html

1. 协定 - http
2. 网域 - www.example.com
3. 埠号 - 没有标明的话预设是80
4. 路径 - dir/page.html

只要前三个相同就算是同源，以下可以比较一下哪些网址和上述的网址同源

图片来源：维基百科

虽然同源的网站才能彼此存取资料，但不代表完全禁止跨来源存取资料，这是很大的一个迷思。MDN 提到两个允许的特定情况：

1. 跨来源写入

• 表单送出
• 连结
• 重新导向

2. 跨来源嵌入

• 图片
• 使用HTML标签 <video>，<audio>嵌入的影音媒体
• ＠font-face 的字型（部分浏览器不允许）
• iframes（如果 X-Frame-Options 的设定是 sameorigin 或 deny 则不允许嵌入）
• script（对於特定的API存取可能会被禁止）

放宽同源政策的两大策略

由於不是所有网站都带有恶意程序，加上网页间有时必须取用第三方资源，所以有两种方式可以让网页存取不同来源的资源：

1. 将指令稿 document.domain 设为文件後缀，不过因为安全性因素，MDN 上提到这种方式已被弃用

2. 使用跨来源资源共享（ Cross-Origin Resource Sharing，简称 CORS ）
   • 透过设定 Access-Control-Allow-Origin 为发送请求的网址或*，即可取得其他来源的资源

至於跨域请求会发生的错误以及 CORS 的详细做法，就待之後再理解了～

参考资料：
MDN
Same-origin policy