32 | 同源策略:为什么XMLHttpRequest不能跨域请求资源–Web页面安全 浏览器安全分为三大块:Web页面安全、浏览器网络安全、浏览器系统安全。 同源策略 页面中最基础、最核心的安全策略:同源策略(same-origin policy) 如果两个URL协议相同、域名相同、端口相同,就称为这两个URL同源 同源策略就是说:相同源之间可以操作DOM、读取互相之间的Cookie、indexDB、locationStorage等页面数据以及网络层面共享。 也就解释了为什么同源策略限制了X
例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:
作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书前面的部分也多多少少提到一些前端优化方法,这也是我们一直在关注的一件重要事情。配合各种方式、手段、辅助系统,前端优化的最终目的都是提升用户体验,改善页面性能,我们常常竭尽全力进行前端页面优化,但却忽略了这样做的效果和意义。先不急于探究前端优化具体可以怎样去做,先看看什么是前端性能,应该怎样去了解和评价前端页面的性能。 通过性能测速和分析,我们基本可以
下面是一些提高网页访问速度的常用方法: (1)合并压缩JS/CSS (2)使用CSS sprites (3)避免使用CSS表达式 (4)精简HTML CSS JS代码大小 (5)避免JS的复杂计算和DOM操作,减少页面的重绘重排 (6)JS尽量放到页面底部 (7)合并AJAX请求 (8)TAB页异步或延迟加载 (9)非关键图片尽量延迟加载,如头像 (10)压缩图片质量 (11)设置较长的客户端缓存过期时间 (12)设置GZIP压缩 (13)cookie隔离 (14)适当使用多域名增加并行加载 (15)重点优
前端的性能优化是一个很宽泛的概念,最终目的都是为了提升用户体验,改善页面性能。面试的时候经常会遇到问谈谈性能优化的手段,这个我分几大部分来概述,具体细节需要自己再针对性的去搜索,只是提供一个索引(太多了写不过来+主要是懒得写)。这里PC端和移动端分开说了,业务场景不同,需要考虑各自的优化手段
本文介绍了腾讯在登录态隔离场景下,将传统的cookie替换为p_skey以及实现ptlogin登录态的方案。通过该方案,可以大幅降低XSS漏洞的影响,提高系统的安全性。同时,该方案也解决了跨域请求中cookie无法携带p_skey的问题。
目前腾讯的web业务都是共享skey作为登录态凭证,skey这个cookie打在*.qq.com一级域名下,被qzone.qq.com、mail.qq.com、t.qq.com等各web类业务共享。一旦某个业务出现xss漏洞,恶意脚本可能访问其他所有以skey为登录凭证的web业务的接口,例如广发微博,或者盗取用户邮件正文等私密信息;恶意脚本还能收集skey这个票据,然后伪造请求,达到窥探用户隐私或者发送广告的目的。登录态隔离,通过公司统一登录平台(ptlogin)下发业务私有的p_skey作为用户登录态凭证,不再让skey成为畅游qq各业务的通行证,有利于大幅降低xss漏洞的影响。
为什么不用 iframe,这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案,自然是有原因的,并不是为了 "炫技" 或者刻意追求 "特立独行"。
协议、域名 和 端口 都相同的两个 URL 同源,默认可以相互访问资源和操作 DOM,两个不同源之间通过安全策略制约隔离 DOM、页面数据和网络通信来保障隐私和数据安全。
受新冠疫情影响,Chrome 稳定版本的更新直接跳过 v82 来到 Chrome 83,因此很多原本在 Chrome 82上就要正式发布的功能也悉数积攒到了本次更新的 Chrome 83 中。
随着公司业务的不断发展壮大,需要一套稳妥的发布方案,如果发布的新版本服务有问题能及时撤回,不至于造成太大范围的影响;
| 导语 在过去,浏览器沙箱(sandbox)主要应用在前端安全领域,随着应用架构复杂,微前端方案的出现,js运行环境沙箱在浏览器中的需求越来越多。特别是近几年比较火的微前端领域,js沙箱是其比较核心一个技术点,是整个微前端方案的实现的关键点之一。 微前端对于沙箱的诉求 沙箱在微前端架构中不是必须要做的事情,因为如果规范做的足够好,是能够避免掉一些变量冲突读写,CSS 样式冲突的情况。但是如果你在一个足够大的体系中,仅仅通过规范来保证应用的可靠性面临较大的风险,还是需要技术手段去治理运行时的一些冲突问题
事务最经典也经常被拿出来说例子就是转账了。假如小明要给小红转账1000元,这个转账会涉及到两个关键操作就是:将小明的余额减少1000元,将小红的余额增加1000元。万一在这两个操作之间突然出现错误比如银行系统崩溃,导致小明余额减少而小红的余额没有增加,这样就不对了。事务就是保证这两个关键操作要么都成功,要么都要失败。
一周的面试题有点多,希望你能够转发收藏起来,方便自己后面有时间可以更好的回顾备忘,也当做是对我们的一点支持,谢谢!
沙箱或称沙盒,即sandbox,顾名思义,就是让程序跑在一个隔离的环境下,不对外界的其他程序造成影响,外界无法修改该环境内任何信息,沙箱内的东西单独属于一个世界,通过创建类似沙盒的独立作业环境,在其内部运行的程序并不能对硬盘产生永久性的影响。举个简单的栗子,其实我们的浏览器,Chrome 中的每一个标签页都是一个沙箱(sandbox)。渲染进程被沙箱(Sandbox)隔离,网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信,通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中,从而限制这些代码访问隔离区之外的资源。
CSRF(Cross Site Request Forgery)跨站域请求伪造是一种网络攻击方式。
导语:说起当前最火的技术,除了最新的区块链,AI,还有一个不得不提的概念是Serverless。Serverless作为一种新型的互联网架构直接或间接推动了云计算的发展,从AWS Lambda到各厂商争先推出Serverless服务框架,Serverless一路高歌。在这个风口,前端好像都要做点什么?
YApi 是高效、易用、功能强大的 api 管理平台,旨在为开发、产品、测试人员提供更优雅的接口管理服务。可以帮助开发者轻松创建、发布、维护 API,YApi 还为用户提供了优秀的交互体验,开发人员只需利用平台提供的接口数据写入工具以及简单的点击操作就可以实现接口的管理。
两栏布局是主内容区为主,左(右)侧有一栏,(将侧边区块
Izy发现,当我们通过第三方APP“快手”,将信息分享到微博时,信息内容就会造成一个XSS。当用户在ipad版微博客户端上查看这条微博的时候,即触发。我们这次的目的就是让这个存储型XSS变成蠕虫。
导语: 说起当前最火的技术,除了最新的区块链,AI,还有一个不得不提的概念是Serverless。Serverless作为一种新型的互联网架构直接或间接推动了云计算的发展,从AWS Lambda到各厂商争先推出Serverless服务框架,Serverless一路高歌。在这个风口,前端好像都要做点什么?
本文由 IMWeb 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 导语:说起当前最火的技术,除了最新的区块链,AI,还有一个不得不提的概念是Serverless。Serverless作为一种新型的互联网架构直接或间接推动了云计算的发展,从AWS Lambda到各厂商争先推出Serverless服务框架,Serverless一路高歌。在这个风口,前端好像都要做点什么? 目录: 一、Serverless简介 二、一个轻量web Application迁移实践
我相信,每一位开发同学,多多少少都想参与或负责一个高并发的系统。一来,可以增加自己实际的项目经验,拥有应对高并发场景的解决方案。二来,有一个高并发的项目经验,无疑是自己简历的一个大大的加分项。
在 import Vuex 后,会实例化其中的 Store 对象,返回 store 实例并传入 new Vue 的 options,也就是 options.store。
同源:如果两个页面拥有相同的协议(如http,https等),端口(80,443)和域名(www.happyjava.cn),那么这两个页面就属于同一个源。
Node.js是基于chrome浏览器中的v8引擎而构建的js运行时环境, 并提供了一系列的工具模块和一个包管理工具npm. Node脱离于浏览器运行, 并提供了一系列自带的os相关接口, 从而使其能像传统后端语言一样操作文件、获取os相关信息等.
沙箱,即sandbox,顾名思义,就是让你的程序跑在一个隔离的环境下,不对外界的其他程序造成影响,通过创建类似沙盒的独立作业环境,在其内部运行的程序并不能对硬盘产生永久性的影响。 举个简单的栗子,其实我们的浏览器,Chrome 中的每一个标签页都是一个沙箱(sandbox)。渲染进程被沙箱(Sandbox)隔离,网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信,通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中,从而限制这些代码访问隔离区之外的资源。
1 介绍JavaScript的基本数据类型 Number、String 、Boolean 、Null、Undefined Object 是 JavaScript 中所有对象的父对象 数据封装类对象:Object、Array、Boolean、Number 和 String 其他对象:Function、Arguments、Math、Date、RegExp、Error 新类型:Symbol
近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合适的匹配,这样就是近年来流行的“响应式web设计”。 响应式web设计是一种纯前端技术js、css等实现的针对不同设备访问同一网址看到不同的布局,是页面内容更适合当前设备阅读。但这个不是本文的重点,重点还是放在nginx如何实现上来。 本文要讲的的是如何使用nginx区分pc和手机访问不同的网站,是物理上完全隔离的两套网站(一套移动端、一套pc端),这
在前端项目开发完成,我们肯定是需要对前端的项目进行测试优化。我们可以先用一些第三方工具对网站进行分析。工具例如
前端页面资源如何分享,常见的有iframe,其次是js-sdk。这两类的在地图类工具经常用。微前端是最佳比较火的方式。本篇是他们的对比分析。
Promise本身是同步的立即执行函数, 当在executor中执行resolve或者reject的时候, 此时是异步操作, 会先执行then/catch等,当主栈完成后,才会去调用resolve/reject中存放的方法执行,打印p的时候,是打印的返回结果,一个Promise实例。
随着项目复杂度的提升以及用户体量的增大,前端安全变得越来越重要。平时系统运行正常,一旦出现安全问题,轻者部门扣分,严重的可能对公司造成严重损失。了解一些常见漏洞,平时coding时注意,防患于未然。
大型组织的组织结构、软件架构在不断地发生变化。移动优先(Mobile First)、App中台(One App)、中台战略等,各种口号在不断的提出、修改和演进。同时,业务也在不断地发展,导致应用不断膨胀,进一步映射到软件架构上。
作者:sigmaliu,腾讯文档 AlloyTeam 开发工程师 0. 前言 腾讯文档列表页在不久前经历了一次完全重构后,首屏速度其实已经是不错。但是我们仍然可以引入 SSR 来进一步加快速度。这篇文章就是用来记录和整理我最近实现 SSR 遇到的一些问题和思考。虽然其中有一些基础设施可能和腾讯或文档强相关,但是作为一篇涉及 Node、React 组件、性能、网络、docker 镜像 、云上部署、灰度和发布等内容的文章,仍然可以小小地作为参考或者相似需求的 Checklist。 就是这样一个页面,内
浏览器跨标签页通信是指在同一个浏览器窗口中的多个标签页之间进行数据交流和信息传递的过程。通常情况下,每个标签页都是一个独立的浏览器上下文,它们之间是相互隔离的,无法直接访问对方的数据或进行通信。
在之前的文章中我经常提到一个臭名昭著的漏洞:Spectre 漏洞,详细可以了解下面这篇文章:
近日,红芯浏览器“套壳”一事被网络舆论炒的沸沸扬扬。红芯浏览器被官方标榜为“安全、稳定、可控的企业浏览器”,其中“自主可控”一项已经被舆论所质疑,但是被官方放在第一项进行宣传的“安全”是否属实呢?
哈喽各位《code 秘密花园》的订阅者们,一年一度的年更系列又来了。关注我的老粉都知道,每到年末我会对前端生态在这一年的重大变化做一次总结,之前的总结:
下表给出了与 URL http://store.company.com/dir/page.html 的源进⾏对⽐的示例:
在之前的文章中,我们已经深入剖析了微前端究竟是什么,可以带来什么收益,现在让我们复习一下微前端的概念:
自从 2014 年 HTML5 正式推荐标准发布以来,HTML5 增加了越来越多强大的特性和功能,而在这其中,工作线程(Web Worker)概念的推出让人眼前一亮,但未曾随之激起多大的浪花,并被在其随后工程侧的 Angular、Vue、React 等框架的「革命」浪潮所淹没。当然,我们总会偶然看过一些文章介绍,或出于学习的目的做过一些应用场景下的练习,甚或在实际项目中的涉及大量数据计算场景中真的使用过。但相信也有很多人和我一样茫然,找不到这种高大上的技术在实际项目场景中能有哪些能起到广泛作用的应用。
在了解跨域之前,我们必须要了解一下同源策略。 跨域问题其实就是浏览器的同源策略造成的。
来源:微信公众号:Coding学院(ID:ke-coding) 目录 ---- 一、小程序介绍和演示 二、小程序架构 三、小程序视图层 四、小程序逻辑层 五、小程序开发经验 正文 ---- 一、小程序特点 二、小程序架构 三、小程序视图层 1.View - WXML WXML(WeiXin Markup Language) 支持数据绑定 支持逻辑算术、运算 支持模板、引用 支持添加事件(bindtap) 2.View - WXSS WXSS(WeiXin Style Sheets) 支持大部分CS
题目的答案提供了一个思考的方向,答案不一定正确全面,有错误的地方欢迎大家请在评论中指出,共同进步。
将前端应用分解成一些更小、更简单的能够独立开发,测试、部署的小块,而在用户看来仍然是内聚的单个产品。微前端的三个要素,即:独立运行、独立开发(与技术栈无关,应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合)、独立部署
领取专属 10元无门槛券
手把手带您无忧上云