XSS之同源、跨域、内容安全策略

一、什么是同源策略

HTML的同源策略是浏览器的一个重要的安全机制，它用于限制一个源的网页如何与另一个源的资源进行交互，以此来减少夸站脚本攻击(XSS)和跨站请求伪造(CSRF)等安全风险。

• 同源的定义
  若两个URL的协议（protocol）、域名（domain）、端口（port）都相同，那么就认为它们是同源的，只要有其中一个参数不一样就是认为是非同源的

二、什么是跨域

跨域指的是浏览器从一个源(协议、域名、端口)的页面去请求另一个源的资源时，由于浏览器的同源策略，这种请求会收到限制，此时从一个源的页面去请求另一个源的资源就会产生跨域的问题

常见场景

• 不同域名
  从 https://www.example1.com 页面请求 https://www.example2.com 的资源.
• 不同端口
  http://localhost:8080 页面请求 http://localhost:3008 的资源。
• 不同协议
  http://example.com 页面请求 https://example.com 的资源。

跨域带来的问题

• AJAX请求受限
  使用 XMLHttpRequest 或 Fetch AP|进行跨域请求时，浏览器会阻止请求，除非服务器端进行了相应的配置。
• DOM无法共享
  不同源的页面无法直接访问彼此的 DOM 元素
• 数据存储无法共享
  不同源的页面无法访问彼此的 Cookie、LocalStorage 和 IndexedDB 等数据存储

如何解决跨域问题

• JSONP（JSON with Padding）
  利用 script 标签不受同源策略限制的特点，通过动态创建 script 标签来实现跨域数据请求。不过，它只支持 GET 请求。
• CORS（跨域资源共享）
  是一种现代的跨域解决方案，需要服务器端设置响应头，明确允许哪些源可以访问其资源。
• 代理服务器
  在同源的服务器上设置代理，将请求转发到目标服务器，再将响应返回给客户端。

三、什么是内容安全策略(CSP)

CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。我们知道前端有个很著名的”同源策略”,简而言之,就是说一个页面的资源只能从与之同源的服务器获取,而不允许跨域获取.这样可以避免页面被注入恶意代码,影响安全.但是这个策略是个双刃剑,挡住恶意代码的同时也限制了前端的灵活性,那有没有一种方法既可以让我们可以跨域获取资源,又能防止恶意代码呢?答案是当然有了,这就是csp,通过csp我们可以制定一系列的策略,从而只允许我们页面向我们允许的域名发起跨域请求,而不符合我们策略的恶意攻击则被挡在门外.从而实现

• 工作原理
  网站通过发送一个 CSP 头部，来告诉浏览器什么是被授权执行的与什么是需要被禁止的。其被誉为专门为解决XSS攻击而生的神器。CSP 的实质就是白名单制度，开发者明确告诉客户端，哪些外部资源可以加载和执行，等同于提供白名单。它的实现和执行全部由浏览器完成，开发者只需提供配置。
• 常用字段