同源策略隔离了不同站点之间页面交互和网络通信，虽然同源策略确保了网站的安全性，但也限制了web。为了在安全和自由之间找到平衡点，页面中默认可以引用第三方资源，同时又可以使用CSP加以限制。XMLHttpRequest和Fetch不可以跨域请求，但又可以使用CORS允许跨域。
页面可以引用第三方资源和允许跨域让web更自由，但也带来了一些安全问题，最常见的就是xss攻击。
什么是XSS攻击呢？
XSS跨站脚本攻击(Cross Site Scripting)是指黑客往用户的页面中注入恶意脚本，然后再通过恶意脚本将用户的页面数据上传到恶意服务器。
常见的XSS攻击有存储型XSS攻击、反射型XSS攻击、基于DOM的XSS攻击。
存储型XSS攻击
黑客利用站点漏洞将一段恶意Javascript脚本提交到网站服务器上，当用户访问含有恶意JS脚本的页面时，恶意脚本会从网站服务器返回浏览器加载、执行，攻击者利用恶意脚本将用户的Cookie等信息上传到恶意服务器。
反射性XSS攻击
用户打开含有恶意代码的URL时，网站服务器从URL中取出恶意代码，并返回给浏览器，然后恶意代码被执行时，攻击者就能做一些恶意操作。
基于DOM的XSS攻击
基于DOM的XSS攻击不涉及web 服务器，攻击者利用各种办法将恶意脚本注入到用户页面，比如通过网络劫持在页面传输过程中修改HTML页面的内容。
如何防止XSS攻击
- 服务器对输入脚本进行过滤或转码。
存储型XSS攻击的发生是由于攻击者从网站服务器上提交恶意脚本，在服务端对提交的恶意脚本进行转码，恶意脚本就不会在浏览器执行。
- 使用csp
页面是允许加载第三方资源的，若是第三方资源含有恶意代码，就有可能造成XSS攻击，而XSS攻击是为了获取用户的关键数据的。那么，限制页面加载其他域下的资源文件，禁止向第三方域提交数据不就好了吗？CSP就是为了解决这个而生的。
CSP有以下作用：
- 限制加载其他域下的资源文件
- 禁止向第三方域提交文件
- 使用httpOnly属性
使用 HttpOnly 标记的 Cookie 只能在 HTTP 请求过程中使用，所以无法通过 JavaScript 来读取 Cookie。
