Chrome

最近在我的项目中遇到了一个问题，我的项目里有一个受权页面是在快手页面进行受权的，这个受权页面放在了iframe当中来做。客户反馈关上受权页面之后，快手间接进入登录界面，而且在里面的页面曾经登录的也被革除掉登录状态进入登录页面了。 问题剖析首先在本人的页面点击受权发现没有问题，在共事的电脑上却呈现同样的问题。而且都是chrome 84，win10零碎。 发现在控制台有这样几条信息： A cookie associated with a cross-site resource at http://kuaishou.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.{loginUrl: "https://ad-login.e.kuaishou.com?sid=kuaishou.ad.ds…owUrl%3Dhttp%253A%252F%252Fad.e.kuaishou.com%252F", result: 109, error_msg: "网络连接失败，请刷新以后页面。"}看到快手在受权中应用了不通的几个域名，而后在外面获取不到登录信息。想起来2月份看到说chrome不反对第三方cookie的事件。然而还不能确定，因为在我的电脑上也有这条信息。 搜了搜iframe外面怎么设置反对第三方cookie获取的办法，然而没有找到。 只能是服务端设置：SameSite=None; Secure 才能够。因为是第三方的页面，所以也搞不了。 ...

最近在我的项目中遇到了一个问题，我的项目里有一个受权页面是在快手页面进行受权的，这个受权页面放在了iframe当中来做。客户反馈关上受权页面之后，快手间接进入登录界面，而且在里面的页面曾经登录的也被革除掉登录状态进入登录页面了。 问题剖析首先在本人的页面点击受权发现没有问题，在共事的电脑上却呈现同样的问题。而且都是chrome 84，win10零碎。 发现在控制台有这样几条信息： A cookie associated with a cross-site resource at http://kuaishou.com/ was set without the `SameSite` attribute. It has been blocked, as Chrome now only delivers cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.{loginUrl: "https://ad-login.e.kuaishou.com?sid=kuaishou.ad.ds…owUrl%3Dhttp%253A%252F%252Fad.e.kuaishou.com%252F", result: 109, error_msg: "网络连接失败，请刷新以后页面。"}看到快手在受权中应用了不通的几个域名，而后在外面获取不到登录信息。想起来2月份看到说chrome不反对第三方cookie的事件。然而还不能确定，因为在我的电脑上也有这条信息。 搜了搜iframe外面怎么设置反对第三方cookie获取的办法，然而没有找到。 只能是服务端设置：SameSite=None; Secure 才能够。因为是第三方的页面，所以也搞不了。 ...

前言晚期浏览器的页面是运行在 UI线程 上的，为了在页面中引入JavaScript，不便JS操作DOM，JS也须要运行在和页面雷同的线程中，所以JS是单线程的。 一、基本概念事件循环系统由主线程、调用栈、宏工作、微工作、音讯队列等形成。 主线程：UI线程调用栈：一种数据结构、用来治理在主线程上执行的函数的调用关系音讯队列：用于寄存期待主线程执行的宏工作 ‘事件’列表 工作：UI线程每次从音讯队列中取出事件、执行事件的过程称为一次工作宏工作：音讯队列中期待被主线程执行的事件、宏工作蕴含鼠标、键盘、触控板事件微工作：一个须要异步执行的函数、执行的机会在主线程执行完结之后、以后宏工作完结之前 常见宏工作有：主js、UI渲染、setTimeout、setInterval、setImmediately、requestAnimationFrame、I/O等 常见微工作有：process.nextTick()、promise.then()（new Promise不算！）、Object.observe()等 二、事件循环生命周期=> 初始化 1、从音讯队列中取出工作2、全局执行上下文压入调用栈中3、在全局上下文中创立微工作队列=> 执行工作 事件执行中：1、减少新的上下文到调用栈中2、执行函数中的代码3、封装新的事件并增加到音讯队列中事件执行后：1、在函数执行完结后将以后函数的执行上下文从调用栈中弹出2、查问并执行全局上下文中的微工作队列3、垃圾回收？=> 完结以后事件 从音讯队列中取出新的事件开始执行、周而复始图文解说备注：本文章局部图片来自 《极客工夫：图解 Google V8》，如有侵权，请告知删除，感激！ 用以下代码为例，了解事件循环机制:function foo() { console.log('setTimeout star'); out && out(); console.log('Promise star'); pro && pro(); console.log('bar star'); bar && bar();}function bar() { console.log('bar');}function pro() { Promise.resolve().then(res => { console.log('Promise'); });}function out() { setTimeout(function() { console.log('setTimeout:'); }, 100);}foo();从音讯队列中取出foo()事件创立调用栈并将全局执行函数上下文压入栈中：将foo函数执行上下文压入栈中：执行console.log('setTimeout star');：将out函数执行上下文压入栈中：将setTimeout的回调函数封装成一个新的事件100ms后增加到音讯队列中：out函数执行完结、将out函数上下文从调用栈弹出：执行console.log('Promise star');：将pro函数执行上下文压入栈中：将微工作增加到调用栈中全局执行上下文的微工作队列中：pro函数执行完结、将pro函数上下文从调用栈弹出：执行console.log('bar star');：将bar函数执行上下文压入栈中：执行console.log('bar');：bar函数执行完结、将bar函数上下文从调用栈弹出从全局执行函数上下文中将微工作队列中得函数取出，执行console.log('Promise');完结以后事件、当从setTimeout事件增加到音讯队列后取出事件，执行console.log('setTimeout'); 三、常见关联问题堆栈溢出function foo() { foo();}foo()上述代码中foo函数中调用了本身，依据下面咱们理解的事件循环机制，咱们会发现在执行foo函数的过程中，主线程会一直的向调用栈中压入foo函数的执行上下文，而因为foo函数始终没有执行完结，所以函数上下文并不会从调用栈中移除，然而调用栈的容量是无限的，所以就会造成调用栈的溢出。 面对此类问题，咱们有两种解决方案：1、宏工作异步调用 function foo() { setTimeout(function() { foo(); }, 0);}// 这里间接给出代码，能够根据上述内容分析为什么这样就不会造成堆栈溢出（我是不会抵赖本人懒得写了~）// 另外须要留神，即使这样能够不造成堆栈溢出，但咱们仍旧不举荐这样写，大量的事件阻塞了音讯队列中其余事件的执行2、按条件完结调用——递归函数 ...

前言晚期浏览器的页面是运行在 UI线程 上的，为了在页面中引入JavaScript，不便JS操作DOM，JS也须要运行在和页面雷同的线程中，所以JS是单线程的。 一、基本概念事件循环系统由主线程、调用栈、宏工作、微工作、音讯队列等形成。 主线程：UI线程调用栈：一种数据结构、用来治理在主线程上执行的函数的调用关系音讯队列：用于寄存期待主线程执行的宏工作 ‘事件’列表 工作：UI线程每次从音讯队列中取出事件、执行事件的过程称为一次工作宏工作：音讯队列中期待被主线程执行的事件、宏工作蕴含鼠标、键盘、触控板事件微工作：一个须要异步执行的函数、执行的机会在主线程执行完结之后、以后宏工作完结之前 常见宏工作有：主js、UI渲染、setTimeout、setInterval、setImmediately、requestAnimationFrame、I/O等 常见微工作有：process.nextTick()、promise.then()（new Promise不算！）、Object.observe()等 二、事件循环生命周期=> 初始化 1、从音讯队列中取出工作2、全局执行上下文压入调用栈中3、在全局上下文中创立微工作队列=> 执行工作 事件执行中：1、减少新的上下文到调用栈中2、执行函数中的代码3、封装新的事件并增加到音讯队列中事件执行后：1、在函数执行完结后将以后函数的执行上下文从调用栈中弹出2、查问并执行全局上下文中的微工作队列3、垃圾回收？=> 完结以后事件 从音讯队列中取出新的事件开始执行、周而复始图文解说备注：本文章局部图片来自 《极客工夫：图解 Google V8》，如有侵权，请告知删除，感激！ 用以下代码为例，了解事件循环机制:function foo() { console.log('setTimeout star'); out && out(); console.log('Promise star'); pro && pro(); console.log('bar star'); bar && bar();}function bar() { console.log('bar');}function pro() { Promise.resolve().then(res => { console.log('Promise'); });}function out() { setTimeout(function() { console.log('setTimeout:'); }, 100);}foo();从音讯队列中取出foo()事件创立调用栈并将全局执行函数上下文压入栈中：将foo函数执行上下文压入栈中：执行console.log('setTimeout star');：将out函数执行上下文压入栈中：将setTimeout的回调函数封装成一个新的事件100ms后增加到音讯队列中：out函数执行完结、将out函数上下文从调用栈弹出：执行console.log('Promise star');：将pro函数执行上下文压入栈中：将微工作增加到调用栈中全局执行上下文的微工作队列中：pro函数执行完结、将pro函数上下文从调用栈弹出：执行console.log('bar star');：将bar函数执行上下文压入栈中：执行console.log('bar');：bar函数执行完结、将bar函数上下文从调用栈弹出从全局执行函数上下文中将微工作队列中得函数取出，执行console.log('Promise');完结以后事件、当从setTimeout事件增加到音讯队列后取出事件，执行console.log('setTimeout'); 三、常见关联问题堆栈溢出function foo() { foo();}foo()上述代码中foo函数中调用了本身，依据下面咱们理解的事件循环机制，咱们会发现在执行foo函数的过程中，主线程会一直的向调用栈中压入foo函数的执行上下文，而因为foo函数始终没有执行完结，所以函数上下文并不会从调用栈中移除，然而调用栈的容量是无限的，所以就会造成调用栈的溢出。 面对此类问题，咱们有两种解决方案：1、宏工作异步调用 function foo() { setTimeout(function() { foo(); }, 0);}// 这里间接给出代码，能够根据上述内容分析为什么这样就不会造成堆栈溢出（我是不会抵赖本人懒得写了~）// 另外须要留神，即使这样能够不造成堆栈溢出，但咱们仍旧不举荐这样写，大量的事件阻塞了音讯队列中其余事件的执行2、按条件完结调用——递归函数 ...

TLS 1.0 and TLS 1.1 政策变更告诉：https://chromestatus.com/feat...告诉内容： In M-84, Chrome will show a full page interstitial warning on sites that do not support TLS 1.2 or higher.翻译下，即 在 Chrome 84 里，chrome 会对不反对 TLS1.2 的站点，插入一个正告简要解释下，对于 https 的链接，其中的平安层协定是基于 TLS 的，以后的不少站点，在服务器的配置都是 TLS1.2（十年前就进去了）及以上的，然而也有局部遗留站点是基于 TLS1.0 和 1.1 的，而 TLS1.0 和 1.1 又有不少安全漏洞，思考到基于 TLS1.0 和 1.1 的链接占比只有 0.5%，所以 chrome 感觉当初废除的机会到了。 影响范畴基于 TLS1.0 和 1.1 的站点，如果你在 chrome 84 里间接拜访可能会这样 如果你有申请这样的脚本文件，天然会申请失败。 实际上，如果你的 chrome 在 72 以上，最好是靠近 84，那你当初就能在管制台上看到这样的正告 ...

技术编辑：徐九丨发自 思否编辑部 熟练运用 Chrome 扩展程序的朋友，应该都知道谷歌曾引入过一个密码检查的扩展，以便用户检查密码是否被泄露，并且还能检测并检测我们的用户名和密码是否因为在某些网站或者应用程序上使用从而被黑客窃取。 为了进一步方便用户使用，谷歌将这项功能集成到了名为「密码泄露检测」的 Chrome 密码管理器中。 如何检测密码是否被泄露 使用 Google 账户登录 Chrome 后，进入浏览器的设置界面，点击「安全检查」中的「立即检查」按钮，即可自动检测密码是否被泄露。 如果出现泄露的情况，点击查看即可了解具体是那些平台的账号和密码被泄露。 密码检查的技术原理Google 在设计「密码检查」时充分考虑了隐私权问题。该功能不会报告有关我们的帐号、密码或设备的任何识别信息。但会报告与显示不安全凭据的查询次数以及所涉网域相关的匿名信息，以提高网站的覆盖率。 根据官方的说明文档，我们整理出密码安全检查功能会存储以下信息： 扫描到的使用不安全密码的登录次数；如果密码安全检查发现输入的密码和用户名不安全，则会生成针对相应信息的经过哈希处理的部分代码，并将此部分代码存储到我们的 Chrome 浏览器中。不过他人无法利用此部分代码重新创建我们的信息的完整版本；感兴趣的朋友可以访问 https://support.google.com/ac...，详细了解“密码检查”的工作原理。

调试器安装GitHub下载安装git clone https://github.com/vuejs/vue-devtools 安装依赖和打包进入目录 cd vue-devtools安装依赖 npm i 或 cnpm i (npm较慢)打包 npm run build在vue-devtools文件夹下：shells>chrome>manifest.json，将配置里的persistent的值修改为true设置进入谷歌的扩展程序 -》 开启开发者模式 -》 加载已解压的扩展程序 -》 选择“vue- devtools>>shells>>chrome” ，将chrome文件夹导入 ，完成即可。 配置好了以后,控制台如果还没有vue选项，就在代码 main.js 文件 写入以下代码 Vue.config.devtools = true;

CSS 关于背景渐变和自动全屏主编在css开发时发现了一个致命的问题：在设置了背景颜色渐变后好不容易调成了全屏覆盖但按下了F11的时候崩溃的世界开始了所以这篇文章主要介绍CSS背景渐变色和自动全屏适应背景渐变色本文只介绍线性渐变背景渐变相信大家也都不陌生先看下图小编配的这个色也还可以哈 代码如下body{ background-image: -webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904)); //60deg代表渐变色的角度 大家可以自己试试看 //渐变色便是后面两个配色的结果 当然也可以设置第三个}背景全屏上面大家也看到了渐变背景没有全屏 这样也是很影响美观了但这时候肯定有人说 小编你没设置宽高啊 好那我们就来一个宽高看看效果body{ background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904)); min-height:648px;}效果如下：那么问题来了 当我按下F11最大化窗口的时候：显然问题并没有彻底解决那么下面为各位奉上自适应屏幕代码 body{ background-image:-webkit-linear-gradient(60deg,rgba(218, 169, 215, 0.637),rgba(128, 174, 235, 0.904)); background-position: center 0; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -ms-background-size: cover;}//小编测试了谷歌浏览器和星愿浏览器 都是可以自动适配的//大家可以带回去多做实验效果图如下: 好了 本文的内容就到这里了希望主编有帮到你

平时常用的工具类网页、SPA 应用（Single Page Application），还在打开浏览器、再找书签么？ Chrome 可以帮您安装快捷图标，直接双击打开就好了。 Chrome Apps打开 Chrome 浏览器，输入 chrome://apps ，即可打开应用页面： 还可以选择在系统应用里安装快捷图标， macOS 如下： 以后，这些常用网页，就可以直接双击打开了。 安装一个 Chrome AppStep 1. Chrome 打开某个网页，如： https://simpleicons.org Step 2. Chrome 右上角「More」，选择「More Tools」，再选择「Create Shortcut」 即会弹出如下对话框。 Step 3. 勾选「Open as window」，允许独立窗口打开网页。然后「Create」 Step 4. Chrome Apps 里就会新增一个应用图标，可双击打开 这样，就可以将常用网页整理到一个 Chrome Apps 页面里了。 Step 5. 系统应用里也会创建一个它的快捷图标，可双击打开 macOS 如下： Step 6. 双击快捷图标，打开这个 Chrome App 试试看 是个独立窗口呢。 结语Q: Windows 桌面建立一个个网页快捷方式，不是一样的么？ ...

作为前端开发，了解浏览器发送http请求是很有必要的。HTTP请求的7个步骤1.建立TCP链接 2.浏览器发送请求（GET/sample/hello.jsp HTTP/1.1） 3.浏览器发送请求头（request header） 4.服务器发送应答（HTTP/1.1 200 OK） 5.服务器发送应答头（response header） 6.服务器发送数据 7.服务器关闭TCP连接 浏览器中，network的请求信息以及header的每一项代表什么意思General部分: Request URL : 资源的请求url Request Method : HTTP方法 Status Code : 响应状态码 200（状态码） OK（原因短语） 301 - 资源（网页等）被永久转移到其它URL 404 - 请求的资源（网页等）不存在 500 - 内部服务器错误 Response Headers:Content-Encoding:gzip ——压缩编码类型 Content-Type:text/html ——服务端发送的类型及采用的编码方式 Date:Tue, 14 Feb 2017 03:38:28 GMT ——客户端请求服务端的时间 Last-Modified:Fri, 10 Feb 2017 09:46:23 GMT ——服务端对该资源最后修改的时间，GMT是格林尼治标准时间 Server:nginx/1.2.4 ——服务端的Web服务端名 Transfer-Encoding:chunked ——分块传递数据到客户端 Request Headers:Accept:text/html ——客户端能接收的资源类型 Accept-Encoding:gzip, deflate ——客户端能接收的压缩数据的类型 Accept-Language:en-US,en;q=0.8 ——客户端接收的语言类型 ...