广州企业网站公司,建设银行网站每天几点更新,网页搜索神器,山东川畅科技网站设计## 浏览器的同源策略
浏览器的同源策略是一种安全机制#xff0c;旨在保护用户的信息安全和隐私。它限制了一个网页的脚本只能与来自同一源的资源进行交互#xff0c;即同源策略要求页面中加载的所有资源#xff08;包括脚本、样式表、图片等#xff09;必须来自相同的**域…
## 浏览器的同源策略
浏览器的同源策略是一种安全机制旨在保护用户的信息安全和隐私。它限制了一个网页的脚本只能与来自同一源的资源进行交互即同源策略要求页面中加载的所有资源包括脚本、样式表、图片等必须来自相同的**域名、协议、端口**。 同源策略的存在是基于以下安全考虑 * 保护用户隐私: 同源策略防止来自不同源的脚本获取用户敏感信息比如 Cookie、LocalStorage 和 SessionStorage 等。
* 防止跨站请求伪造CSRF: 如果不限制跨域请求恶意网站就可以利用用户的登录状态发起对其他网站的请求从而导致 CSRF 攻击。
* 防止跨站脚本攻击XSS: 同源策略可以防止恶意网站将恶意脚本注入到另一个域上的页面中从而避免对用户的攻击。
* 保护服务器的数据安全: 同源策略可以保护服务器的数据不被其他域的恶意脚本盗取或篡改。
虽然同源策略在保护用户安全和隐私方面非常重要但同时它也会对一些合法的跨域资源请求造成限制这就需要使用 CORS 等机制来安全地实现跨域资源共享。 ## 跨域资源共享
跨域资源共享Cross-Origin Resource Sharing简称CORS是一种机制允许在一个网页应用程序中请求来自另一个域的资源即允许在一个域上使用其他域的资源。CORS的出现是为了解决网页应用程序对其他域资源的访问受到同源策略Same-Origin Policy限制的问题。 同源策略是浏览器安全模型的一部分它限制了来自不同源域、协议或端口的页面之间的交互。这个策略的目的是防止恶意网站利用用户登录状态、cookie 等敏感信息。虽然这在安全上是有益的但对于某些情况下需要跨域资源访问的网页应用程序来说这会成为一个障碍。 跨域资源共享通过在服务器端添加一些特殊的 HTTP 头部允许浏览器绕过同源策略的限制从而允许跨域请求。通过配置 CORS服务器可以告诉浏览器哪些源是被允许访问资源的以及允许的 HTTP 方法。
主要原因包括
* 分布式架构现代网络应用程序通常采用分布式架构可能需要从不同的服务器获取资源而不仅限于同一个域。
* 共享资源某些资源可能在不同的域上并且需要被其他域的应用程序使用。例如图像、视频或 API。
* 合作开发跨域资源共享也可以促进不同团队之间的合作开发允许他们在不同的域上进行开发并共享资源。
总的来说CORS 是为了提高 Web 应用程序的灵活性和互操作性同时仍然保持了足够的安全性。 ## 和跨域资源共享相关的HTTP标头字段
跨源资源共享标准新增了一组 HTTP 标头字段允许服务器声明哪些源站通过浏览器有权限访问哪些资源。分为两类响应头字段请求头字段。 ### 响应头字段
* Access-Control-Allow-Origin
语义通知浏览器可以允许正式请求发向哪些源origin。
语法
shell
Access-Control-Allow-Origin: * # 通配符允许所有源
Access-Control-Allow-Origin: origin # 只能为单个源不能为多个
Access-Control-Allow-Origin: null # 可以为null * Access-Control-Allow-Methods
语义 preflight request预检请求的返回响应头字段定义正式请求可以向跨域服务器发送哪些请求头方法
语法
shell
Access-Control-Allow-Methods: method, method, ... # 逗号隔开 * Access-Control-Allow-Headers
语义 preflight request预检请求的返回响应头字段定义正式请求可以向跨域服务器发送哪些请求头字段
语法
shell
Access-Control-Allow-Headers: header-name[, header-name]* # 逗号隔开
Access-Control-Allow-Headers: * # 可以为通配符支持正式请求传任何头字段 tips: Accept、Accept-Language、Content-Language、Content-Type只限于解析后的值为 application/x-www-form-urlencoded、multipart/form-data 或 text/plain 三种 MIME 类型不需要在这个首部特意列出默认会添加。 * Access-Control-Max-Age
语义表示preflight request 预检请求的返回结果即 Access-Control-Allow-Methods 和Access-Control-Allow-Headers 提供的信息可以被缓存多久
语法
shell
Access-Control-Max-Age: delta-seconds # 单位为秒 tips: delta-seconds根据浏览器版本不同缓存时间不同在 Firefox 中上限是 24 小时 即 86400 秒。 在 Chromium v76 之前 上限是 10 分钟即 600 秒)。 从 Chromium v76 开始上限是 2 小时即 7200 秒)。 Chromium 同时规定了一个默认值 5 秒。 如果值为 -1表示禁用缓存则每次请求前都需要使用 OPTIONS 预检请求。 * Access-Control-Allow-Credentials
语义用于在请求要求包含 credentialsRequest.credentials 的值为 include时告知浏览器是否可以将对请求的响应暴露给前端 JavaScript 代码。 浏览器仅在响应标头 Access-Control-Allow-Credentials 的值为 true 的情况下将响应暴露给前端的 JavaScript 代码。
Credentials 可以是 cookies、authorization headers 或 TLS client certificates。
语法
shell
Access-Control-Allow-Credentials: true tips: 跨域后端响应的Access-Control-Allow-Credentials header 与前端请求的XHR 或 Fetch request中都要配置浏览器才会允许正式请求携带credentials到跨域端 * Access-Control-Expose-Headers
语义 如果跨域服务器设置返回该字段正式请求会收到该响应字段允许服务器指示哪些正式请求的响应标头可以暴露给浏览器中运行的js脚本
语法
shell
Access-Control-Expose-Headers: [header-name[, header-name]*] # 逗号分隔
Access-Control-Expose-Headers: * # 通配符指示浏览器允许js脚本读取所有响应头 ### 请求头字段
* Access-Control-Request-Headers
语义 preflight request预检请求中用于通知服务器在正式请求中会采用哪些请求头。
语法
shell
Access-Control-Request-Headers: header-name, header-name, ... * Access-Control-Request-Method
语义 preflight request预检请求中用于通知服务器在正式请求中会采用哪种 HTTP 方法。因为预检请求所使用的方法总是 OPTIONS 与实际请求所使用的方法不一样所以这个请求头是必要的。
语法
shell
Access-Control-Request-Method: method ## 简单请求和非简单请求 浏览器跨域之前的请求可以分为**简单请求**和**非简单请求**两种简单请求实现浏览器跨域仅需要一次request-response非简单请求实现浏览器跨域需要两次request-response含有预检请求的跨域请求都是非简单请求
### 简单请求
满足如下两个条件
* 方法为 GET, HEAD, POST 其中一种
* 除了被浏览器自动设置的请求头
Accept, Accept-Language, Content-Language, Content-Type只允许如下三种text/plain, multipart/form-data, application/x-www-form-urlencodedRange只允许简单的范围标头值 如 bytes256- 或 bytes127-255 ### 非简单请求
不满足简单请求的条件都是非简单请求 ## 演示
以华为云APIG提供的跨域资源共享方案为例来展示实现跨域的细节待补充 js
var xhr new XMLHttpRequest();
xhr.open(GET, https://example.com/api/data, true);
xhr.withCredentials true; // withCredentials 标志设置为 true从而向服务器发送 Cookies
// 发送请求
xhr.send();
// 处理响应
xhr.onload function () {
if (xhr.status 200) {
// 打印响应头
for (var key in xhr.getAllResponseHeaders()) {
console.log(key : xhr.getResponseHeader(key));
}
// 打印响应体
console.log(xhr.responseText);
} else {
console.error(请求失败。 返回状态为 xhr.status);
}
};
// 处理网络错误
xhr.onerror function () {
console.error(网络错误);
}; ##### 参考文档
[CORS官方文档](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)
[华为云apig官方文档](https://support.huaweicloud.com/usermanual-apig/apig-ug-0002.html
)
