jsonp

前端常见跨域解决方案

此生再无相见时 提交于 2020-12-19 06:37:14
什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为: 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名,不同文件或路径 允许 http://www.domain.com/lab/c

CSRF漏洞

北慕城南 提交于 2020-12-17 23:19:28
CSRF漏洞原理: CSRF是跨站请求伪造,不攻击网站服务器,而是冒充用户在站内的正常操作。通常由于服务端没有对请求头做严格过滤引起的。CSRF会造成密码重置,用户伪造等问题,可能引发严重后果。 我们知道,绝大多数网站是通过cookie等方式辨识用户身份,再予以授权的。所以要伪造用户的正常操作,最好的方法是通过XSS或链接欺骗等途径,让用户在本机(即拥有身份cookie的浏览器端)发起用户所不知道的请求。CSRF攻击会令用户在不知情的情况下攻击自己已经登录的系统。 CSRF攻击的目的是滥用基本的Web功能。如果该网站可以使服务器上的状态变化,如改变受害者的电子邮件地址或密码,或购买的东西,强迫受害人检索数据等等。CSRF攻击会修改目标状态。在这一过程中,受害者会代替攻击者执行这些攻击,攻击者中不会收到响应,受害者会代替攻击者执行这些攻击。   在跨站点请求伪造(CSRF)攻击中,攻击者经由用户的浏览器注入网络请求来破坏用户与网站的会话的完整性。浏览器的安全策略允许网站将HTTP请求发送到任何网络地址。此策略允许控制浏览器呈现的内容的攻击者使用此用户控制下的其他资源。   需要对页面参数做修改时,可以使用burpsuite生成的csrf poc,从而进行poc测试,测试完成之后一定要验证,浏览器执行了我们生成的poc测试,令数据产生变化。   csrf可以和XSS联系在一起

SpringBoot(十七)_springboot跨域处理

北慕城南 提交于 2020-12-07 01:40:29
本文转自: Vi的技术博客 什么是跨域 首先,我们需要了解一下一个URL是怎么组成的: // 协议 + 域名(子域名 + 主域名) + 端口号 + 资源地址 http: + // + www.baidu.com + :8080/ 只要协议,子域名,主域名,端口号这四项组成部分中有一项不同,就可以认为是不同的域,不同的域之间互相访问资源,就被称之为跨域。 随着前后端分离开发的越来越普及,会经常遇到跨域的问题,当我们在浏览器中看到这样的错误时,就需要意识到遇到了跨域: XMLHttpRequest cannot load http://目标地址No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页面地址' is therefore not allowed access. 解决跨域的几种方案 首先,我们使用vue-cli来快速构建一个前端项目,然后使用axios来向后台发送ajax请求。然后在控制台中打印出返回信息。这里就不再多做赘述,后面我会单独写一篇文章来讲一下如何使用vue-cli快速创建一个vue项目。 这里不再讲解使用jsonp的方式来解决跨域,因为jsonp方式只能通过get请求方式来传递参数,而且有一些不便之处。

springboot跨域处理

时光毁灭记忆、已成空白 提交于 2020-12-05 19:56:17
一、什么是跨域(CORS)   跨域(CORS)是指不同域名之间的互相访问,本地服务器去访问另一个服务器的资源,这个时候就会出现跨域访问的问题,是由浏览器对于JavaScript所定义的安全限制策    同域:     - 同一协议, 如http或https     - 同一IP地址, 如192.168.1.2     - 同一端口, 如8080      以上三个条件中有一个条件不同就会产生 跨域问题 二、跨域解决方案   1.前端解决方案     1.1 使用 JSONP 来支持跨域的请求     1.2 使用NodeJS服务器做为服务代理   2.后端解决方案    这里有三种配置方式    2.1 配置过滤器 @Configuration public class GlobalCorsConfig { @Bean public CorsFilter corsFilter() {   CorsConfiguration config = new CorsConfiguration();   config.addAllowedOrigin("*");   config.setAllowCredentials(true);   config.addAllowedMethod("*");   config.addAllowedHeader("*");   config

什么是单点登录?单点登录的三种实现方式

喜你入骨 提交于 2020-12-03 06:22:28
单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁,例如像阿里巴巴这样的网站,在网站的背后是成百上千的子系统,用户一次操作或交易可能涉及到几十个子系统的协作,如果每个子系统都需要用户认证,不仅用户会疯掉,各子系统也会为这种重复认证授权的逻辑搞疯掉。实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他系统如何验证这个信任的有效性,因此要点也就以下两个: 存储信任 验证信任 如果一个系统做到了开头所讲的效果,也就算单点登录,单点登录有不同的实现方式,本文就罗列我开发中所遇见过的实现方式。 以Cookie作为凭证媒介 最简单的单点登录实现方式,是使用cookie作为媒介,存放用户凭证。 用户登录父应用之后,应用返回一个加密的cookie,当用户访问子应用的时候,携带上这个cookie,授权应用解密cookie并进行校验,校验通过则登录当前用户。 不难发现以上方式把信任存储在客户端的Cookie中,这种方式很容易令人质疑: Cookie不安全 不能跨域实现免登 对于第一个问题,通过加密Cookie可以保证安全性,当然这是在源代码不泄露的前提下。如果Cookie的加密算法泄露,攻击者通过伪造Cookie则可以伪造特定用户身份

vue的封装

一个人想着一个人 提交于 2020-11-28 13:11:04
vue的封装 封装的意义 提高代码的可读性 提高代码的可维护性 减少代码的书写 封装 // src/api/http.js import axios from 'axios' axios.defaults.baseURL = "http://127.0.0.1:8000/" // axios.defaults.baseURL = "http://172.16.240.175/:8000/" //全局设置⽹络超时 axios.defaults.timeout = 10000; //设置请求头信息 axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json'; axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token,如果存在,则统⼀在http请求的header都加上 token,不⽤每次请求都⼿动添加了 const token = localStorage.getItem("token") // console.log(token) if (token) { config.headers.Authorization

跨域三种方式

吃可爱长大的小学妹 提交于 2020-11-28 04:18:18
一、什么是跨域,跨哪些域   协议(http、https) 域名(ip) 端口号(80、8080) 二、前后端分离为什么要跨域   如果前后端没分离那么都在同一个服务器中,请求协议、域名以及端口一致自然不存在跨域问题   前后台分离之后前后台有可能分开部署,也有可能使用不同端口,会存在跨域问题 三、跨域实际上是浏览器级别的限制   我们在发出请求以及获取响应的时候实际上是成功了,但是由于浏览器做了拦截处理,所以无法获取数据 四、跨域知道的有三种 1、jsonp 只能适用get请求 $.ajax({ url: "http://localhost:8080/aaaaa", type: "GET", dataType: "jsonp", //指定服务器返回的数据类型 success: function (data) { alert(“success”); } }) 2、添加<meta http-equiv="Access-Control-Allow-Origin" content="*" /> 只能适用同一个域 3、cors(Cross-origin resource sharing),,,从服务端设置跨域信息 可以支持get、post、head、delete请求类型   注意在发起delete请求的时候会先询问服务器是否支持delete请求,如果不支持的话会发送options请求

laravel 5.5 oauth2.0 跨域问题解决方案

孤街醉人 提交于 2020-11-27 04:32:06
一、laravel-Cors 安装 在终端执行安装命令如下: composer require barryvdh/laravel-cors 添加服务提供商 在Laravel配置文件 app.php 的 providers 数组中添加如下配置: Barryvdh\Cors\ServiceProvider::class, 发布配置文件 执行在终端执行发布配置文件命令如下: php artisan vendor:publish --provider= "Barryvdh\Cors\ServiceProvider" 执行后会在laravel目录下的config目录中新增 cors.php 配置文件,如下图 至此 laravel-Cors 安装完成。 备注 什么是跨域 跨域是指从一个域名的网页去请求另一个域名的资源。比如从 www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域 为什么浏览器要限制跨域访问 原因就是安全问题:如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。 为什么要跨域 既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是b.a.com ,而应用是放在c.a.com , 这时想从b.a.com去访问

字节跳动 前端校招 一二三面+hr面

霸气de小男生 提交于 2020-11-25 05:28:12
https://juejin.im/post/5e61136ee51d4527196d6019 tip: 一二三面连着面的,中间有10分钟休息时间,面试官都很和善的,不会给太大的压力,不过字节的每一个问题都会问的很深,很深。。。感觉到了跟大佬的差距O(∩_∩)O😄 一面 (视频面 1小时35分钟) 20年3月1日 自我介绍 vue和react有什么区别,更喜欢用哪个,为什么 react hook熟悉吗,解决了什么问题,用react hook写一个用户鉴权的组件,所有其他组件都要经过它验证(auth是一个promise) 为什么请求放在useEffect里,放在外面和放里面有什么区别?在useEffect里想使用async/await怎么用 谈了谈useLayoutEffect和useEffect具体执行时机 算法,一个树结构,有id和一个子节点数组,要求在所有子节点上增加一个属性为父节点的parentId async/await和promise性能差异, 我提到了堆栈追踪,在本人发表的其他文章里有写到 react写一个时间选择组件,先设计要传什么样的props接口,说明原因,外部组件如何使用(其实就是考封装组件库), 如果是手机端的,无线滚动的效果具体如何实现 CommonJS和ES6模块化有什么区别,设计一个方法,让CommonJS导出的模块也能改变其内部变量 webpack

JS前端面试题(三)

蓝咒 提交于 2020-11-15 11:47:47
文章目录 61.new的原理是什么?通过new的方式创建对象和通过字面量创建有什么区别? 62.prototype 和 proto 区别是什么? 63.使用ES5实现一个继承? 64.取数组的最大值(ES5、ES6) 65.ES6新的特性有哪些? 66.promise 有几种状态, Promise 有什么优缺点 ? 67.Promise构造函数是同步还是异步执行,then呢 ?promise如何实现then处理 ? 68.Promise和setTimeout的区别 ? 69.如何实现 Promise.all ? 70.如何实现 Promise.finally ? 71.如何判断img加载完成 72.如何阻止冒泡? 73.如何阻止默认事件? 74.ajax请求时,如何解释json数据 75.json和jsonp的区别? 76.如何用原生js给一个按钮绑定两个onclick事件? 77.拖拽会用到哪些事件 78.document.write和innerHTML的区别 79.jQuery的事件委托方法bind 、live、delegate、on之间有什么区别? (1)、bind 【jQuery 1.3之前】 (2)、live 【jQuery 1.3之后】 (3)、delegate 【jQuery 1.4.2中引入】 (4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】 80