文章分类 - 网络安全-跨域
摘要:实现原理 原理就是通过 url 带 hash ,通过一个非跨域的中间页面来传递数据。 实现流程 开始 a.html 给 c.html 传一个 hash 值, 然后 c.html 收到 hash 值后,再把 hash 值传递给 b.html 最后 b.html 将结果放到 a.html 的 hash
阅读全文
摘要:document.domain 该方式只能用于二级域名相同的情况下, 比如 a.test.com 和 b.test.com 适用于该方式。 只需要给页面添加 document.domain ='test.com' 表示二级域名都相同就可以实现跨域。 www. baidu. com . 三级域 二级域
阅读全文
摘要:postMessage window.postMessage() 方法可以安全地实现跨源通信。 通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为 https),端口号(443 为 https 的默认值),以及主机 (两个页面的模数 Document.domain设置为相同
阅读全文
摘要:websocket WebSocket 规范定义了一种 API,可在网络浏览器和服务器之间建立“套接字”连接。简单地说:客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据 客户端代码 <body> <script> let socket = new WebSocket('ws://lo
阅读全文
摘要:客户端 <body> <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script> <script> function doFront(a, b) { console.log(a); console.log(b)
阅读全文
摘要:JSONP 主要就是利用了 script 标签没有跨域限制的这个特性来完成的。 使用限制 仅支持 GET 方法,如果想使用完整的 REST 接口,请使用 CORS 或者其他代理方式。 流程解析 1.前端定义解析函数(例如 jsonpCallback=function()) 2.通过 params 形
阅读全文
摘要:Nginx 则是通过反向代理的方式,(这里也需要自定义一个域名)这里就是保证我当前域,能获取到静态资源和接口,不关心是怎么获取的。 Step-1: 配置host 127.0.0.1 leslie.test Step-2: 配置nginx server { listen 80; server_name
阅读全文
摘要:代理的思路,利用服务端请求不会跨域的特性,让接口和当前站点同域 代理前 代理后 a. cli工具中的代理 webpack(4.x): 在webpack中可以配置 proxy来快速获得接口代理的能力 devServer: { port: 8000, proxy: { "/api": { target:
阅读全文
摘要:如下是一个需要执行预检请求的 HTTP 请求 web端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
阅读全文
摘要:注意 withCredentials (一) 当前端配置 withCredentials=true 时, 后端配置 Access-Control-Allow-Origin 不能为*, 必须是相应地址 (二) 当配置 withCredentials=true 时, 后端需配置 Access-Contr
阅读全文
摘要:1.CORS - 跨域资源共享 跨域资源共享式一种机制, 它使用额外的HTTP 头来告诉浏览器 让运行在一个origin(domain)上的Web应用准许访问来自不同源(other domain)服务器上的指定的资源(httt://www.xxx.com/page去访问 http://www.yyy
阅读全文
摘要:前序 本文中,web端地址为localhost:8000 服务端地址为localhost:8080 一: 什么是跨域? 1.同源策略(Same origin policy) 跨域问题其实就是浏览器的同源策略所导致的 同源策略是一个重要的安全策略, 它用于限制一个origin 的文档或者它加载的脚本如
阅读全文