首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

​现代浏览器内部揭秘(第一部分)

如果你曾对浏览器是如何将代码转化为具有功能的网站,或者你并不确定为何建议使用某一技术来提升性能,那么本系列就是为你准备的。...与 CPU 不同,GPU 擅长同时处理跨内核的简单任务。顾名思义,它最初是为解决图形而开发的。这就是为什么在图形环境中“使用 GPU” 或 “GPU 支持”都与快速渲染和顺滑交互有关。...关于如何构建 web 浏览器并不存在标准规范。一个浏览器的构建方法可能与另一个迥然不同。 在本博客系列中,我们使用下图所示的 Chrome 近期架构进行阐述。...如果你想要了解有多少进程运行在你的 Chrome 浏览器中,可以点击右上角的选项菜单图标,选择更多工具,然后选择任务管理器。...如果某个标签页失去响应,你可以关掉这个标签页,此时其它标签页依然运行着,可以正常使用。如果所有标签页都运行在同一进程上,那么当某个失去响应,所有标签页都会失去响应。这样的体验很糟糕。 ?

69920

高级谷歌分析的技巧与窍门

分享知识可以帮助我们更好的利用它,这也是此文的目的。我会分享一些关于高级细分方面的技巧,例如如何进行多目标转化跟踪以及跨网域跟踪的窍门。...跨网域跟踪 GA的跟踪Cookie属于第一方Cookie,这意味着它们只能由设置它们的网站使用。如果访问者离开站点去访问其他网域的网站,跟踪Cookie将无法正常工作。...例如,如果您的网站通过另一个网站实现第三方付款,那么您需要使用跨网域跟踪来有效保留引荐。...要进行跨网域跟踪,需要在两个域中都部署Google Analytics(分析)跟踪代码(GATC),同时第三方站点不能禁止查询字符串参数。...想象一下,我们的主域名是www.seogadget.co.uk,第三方支付网站是www.moneyforfabian.com,然后应用以下配置: 示例1 =如果您的网站使用标准锚标签在域间传递访问者,请使用

1.4K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    浏览器原理之跨域?跨站?你真的不懂我!

    主要是讲清楚什么是跨域,同源策略的定义和产生的原因,以及什么是站点,站点与域又有啥区别?...当我们理解了基本的概念之后,我会带大家梳理浏览器允许HTML加载、引用哪些资源,以及哪些资源会导致跨域,哪些不会。  开始吧~又要开始长篇~大论了。一、URL到底是什么?  嗯?你不是要讲跨域么?...1、跨域  我们了解了域名是啥,域是啥。那如果要问你跨域的原因是啥?我相信你,肯定知道,哎呀,不就是同源策略么?嗯……没错,就是同源策略,但是,你知道为什么要有同源策略?...2)跨站  不知道站点这个概念大家是否有过接触,相比于域,在我们的工作中接触到站点这个名词其实并不多。但是由于我们要聊跨域,就不得不带一点站点,让大家搞清楚什么是站点,以及跨站点又是怎么跨的。  ...另外,在很多场景下或者服务器设计上,都可能需要跨域发起ajax请求,如果不能跨域请求,将大大限制网站的设计能力,所以,又有了跨域资源共享(CORS),使用该机制可以进行跨域访问控制,从而使跨域数据传输得以安全进行

    2.1K30

    .NET Core实战项目之CMS 第十四章 开发篇-防止跨站请求伪造(XSRFCSRF)攻击处理

    这里统一说明一下,是因为我的代码是跟着博客的进度在逐步完善的,等这个系列写完的时候才代表这个CMS系统的完成!因此,现在这个CMS系统还是一个半成品,不过我会尽快来完成的!...什么是跨站请求伪造(XSRF/CSRF) 在继续之前如果不给你讲一下什么是跨站请求伪造(XSRF/CSRF)的话可能你会很懵逼,我为什么要了解这个,不处理又有什么问题呢?...其他安全隐患,比如 SQL 脚本注入,跨站域脚本攻击等在近年来已经逐渐为众人熟知,很多网站也都针对他们进行了防御。然而,对于大多数人来说,CSRF 却依然是一个陌生的概念。...既然跨站请求伪造(XSRF/CSRF)有这么大的危害,那么我们如何在ASP.NET Core中进行处理呢?...,然后给大家讲解了如何进行跨站点请求伪造的处理,后面引出了在ASP.NET Core中如何对其进行处理的!

    4K20

    现代浏览器探秘(part 1):架构

    如果你想知道浏览器是如何将你的代码转换为功能性网站的,或者你想知道为什么需要使用某些特定技术来提高性能,那么本系列非常适合你。...与CPU不同,GPU擅长处理简单任务,但同时跨多个核心。 顾名思义,它最初是为处理图形而开发的。 这就是为什么在图形环境中“使用GPU”或“GPU支持”与快速渲染和平滑交互相关联。...如果两个进程需要通信,他们可以通过使用进程间通信(IPC)来实现。 许多程序都是以这种方式工作的,因此如果一个工作进程失去响应,则可以重新启动它,而不会停止运行程序的其他进程。 ?...图6:通过IPC进行通信的独立进程示意图 浏览器架构 那么如何使用进程和线程构建Web浏览器? 好吧,它可能是一个具有许多不同线程的进程,或是许多具有少量线程的通过IPC进行通信的不同进程。 ?...这将打开一个窗口,其中包含当前正在运行的进程列表以及它们使用的CPU/内存量。 Chrome中多进程架构的好处 前面我曾提到Chrome使用多个渲染器进程。

    1.1K20

    【万字爆肝】带你了解浏览器原理

    当然这里不仅仅只有html文件类型,如果是其它文件类型,比如zip或者其它的内容,则浏览器会交给下载管理器进行对应资源的下载 这个时候通常也会进行浏览器的安全检查,两方面检查 如果这个站点和已知的恶意站点匹配...,则网络线程发出警告,表明这是一个恶意站点 image.png 还有一个检查的点大家都比较熟悉,那就是跨域问题的检测,跨域本质是浏览器的安全检查机制,如果发现请求的URL的协议域名端口任意一个和当前站点不同即为跨域...,这个检查也会在这个阶段,确保敏感的跨站点的数据不会进入渲染进程 所以我们要明确的一点是,跨域是浏览器的安全策略,是浏览器拦截的,如果你用抓包工具的话,会发现数据其实已经给到我们了,当然post请求还会存在一个预检的过程...我们再看一下在这基础如何访问另一个页面 访问不同站点 在当前标签页,我们进行另一个页面访问的时候,浏览器进程会重复上面的过程。...刚踏上开发之路时,我几乎只关注怎样去写代码、怎样提升自己的生产效率。诚然,这些事情很重要,但与此同时我们也应当思考浏览器会怎么去处理我们书写的代码。现代浏览器一直致力探索如何提供更好的用户体验。

    50930

    万字好文带你了解浏览器原理

    如果是搜索的字段,则通过浏览器中设置的使用那种搜索引擎,进行对应的站点跳转图片不论是搜索还是站点访问,最终都会走站点访问的逻辑,当你在地址栏输入【你好】之后,回车,它也会变成相应的站点url图片如何判断是否是...当然这里不仅仅只有html文件类型,如果是其它文件类型,比如zip或者其它的内容,则浏览器会交给下载管理器进行对应资源的下载这个时候通常也会进行浏览器的安全检查,两方面检查如果这个站点和已知的恶意站点匹配...,则网络线程发出警告,表明这是一个恶意站点图片还有一个检查的点大家都比较熟悉,那就是跨域问题的检测,跨域本质是浏览器的安全检查机制,如果发现请求的URL的协议域名端口任意一个和当前站点不同即为跨域,这个检查也会在这个阶段...,确保敏感的跨站点的数据不会进入渲染进程所以我们要明确的一点是,跨域是浏览器的安全策略,是浏览器拦截的,如果你用抓包工具的话,会发现数据其实已经给到我们了,当然post请求还会存在一个预检的过程,防止抓到数据...刚踏上开发之路时,我几乎只关注怎样去写代码、怎样提升自己的生产效率。诚然,这些事情很重要,但与此同时我们也应当思考浏览器会怎么去处理我们书写的代码。现代浏览器一直致力探索如何提供更好的用户体验。

    1.1K112

    在浏览器上,我们的隐私都是如何被泄漏的?

    事实上,密码管理器的潜在漏洞早已为人所知,过去的漏洞多是因为跨站点恶意脚本(XSS)攻击所造成的的密码泄漏。...“.pl” 国家/地区代码顶级域。...OnAudience 声称只使用匿名数据,但电子邮件地址不是匿名的。如果攻击者想要确定用户是否在数据集中,他们可以对用户的电子邮件地址进行简单地散列,并搜索与该散列关联的记录。...研究人员表示,跨站点脚本攻击(XSS)也会从密码管理器中窃取密码,危险性更高,原因有两个: 与 Cookie 盗用相比,XSS 获取的密码可能具有更大的破坏性,因为用户通常在不同的站点重用密码; 由于...但是,如果发布者直接嵌入第三方脚本,而不是将其隔离,则该脚本被视为来自发布者的来源。因此,发布者(及其用户)完全失去了同一起源策略的保护,也就没有任何东西能阻止脚本泄露敏感信息。

    1.7K100

    从零实现的浏览器Web脚本

    window与unsafeWindow,那么如何实现一个完全隔离的window沙箱环境就值的探索,再比如在Web页面中是无法跨域访问资源的,如何实现在Inject Script中跨域访问资源的CustomEvent...UserScript 在最初GreaseMonkey油猴实现脚本管理器时,是以UserScript作为脚本的MetaData也就是元数据块描述,并且还以GM.开头提供了诸多高级的API使用,例如可跨域的...此外在很久之前我一直好奇在GreasyFork上是如何实现用户脚本的安装的,因为实际上我并没有在那个安装脚本的按钮之后发现什么特殊的事件处理,以及如何检测到当前已经安装脚本管理器并且实现通信的,之后简单研究了下发现实际上只要用户脚本是以...,在后边实例一节中我会介绍下我个人进行脚本分发的最佳实践。...来实现跨域接口的访问,而且我们之前也提到了脚本是运行在用户页面也就是作为Inject Script执行的,所以是会受到跨域访问的限制的。

    83350

    计算机萌新的成长历程——初识C语言16

    这里我的理解是原本很活跃的对象,在使用static后就安静下来了。感觉更不好理解了对吧,这个活跃指的是什么,这个安静又是指什么?...这个函数进行内部链接,使它能在这个源文件内部使用,那下面问题来了,我们运行后的结果会是 什么呢?...这里也很好的印证了局部变量是自动创建自动销毁的。如果我们在局部变量a的前面加一个static关键字,结果又会如何呢?...这个结果进一步说明了全局变量的作用域是整个工程,只不过在不同项目之间需要使用的话需要用到关键字extern——引入外部符号,那如果我们给全局变量a前面加上static,结果又会如何呢?...通过上面的测试,我们验证了static的第二个作用:static在修饰全局变量时,会限制全局变量的作用域; 3.static修饰函数——改变了函数的链接属性 通过前面的分享,我们学会了如何使用自定义函数

    18720

    使用 Docker 搭建你的Wiki(TiddlyWiki)

    如果你有阅读过我之前写的文章,那么参考本篇文章将文章搭建起来,应该只需要3分钟或者更少,如果你没有看过,那么可以点击本文相关的文章标签,阅读过往的文章。...官方演示站点 简体中文站点 繁体中文站点 本文将使用 Node.js 模式进行 Wiki 站点的建设,一来性能更好,二来可以让整个应用变为同构类型,二次开发效率也更高,三来,单文件版本应该不需要一篇实践文档...(我使用 Traefik 提供服务发现,如果你不会操作,请访问我的历史文章,了解 Traefik 如何使用。)...其他插件的下载配置也类似,回到首页,我们可以看到界面右侧的工具栏已经变成中文。 而文章内容使用什么语言书写,便会显示什么内容,如果你想做多语言站点,可以摸索一下,TiddlyWiki 同样支持。...接下来我会继续介绍几种不同的 Wiki 系统的安装配置、魔改— EOF

    1.4K20

    WP SEO 技巧:链接建设第三部分 -- 如何实际创建链接

    这是关于链接建设系列文章的第三部分。我将会涉及到实际上的如何在你的站点上创建链接的最终的想法。最初的两篇日志我们向大家介绍了每个人都应知道的链接是怎么工作以及如何创建外部链接。 我将涉及两个主要领域。...哪些是你应该做的,哪些是你不应该做的。 链接建设和你应该做的事情。 链接建设需要巧妙,创意,以及社会化工程,为什么我说社会化工程?...提供给朋友一些对他们有用的帮助。有时他们会链回你的网站作为感谢。我就这样干过是因为朋友帮我写代码或者校对站点中的文章。 最后关于你应该做的事情,我曾经告诉过别人最重要的技巧就是:内容是王。...我会写一些我不喜欢的东西,但是这个站点的一部分,我需要更新他。 第二,不要怨恨。不要写一些其他站点抹黑或者攻击其他人。其实这个会让你作为一个作者失去信用,你会因此失去读者因为他们不像访问这些垃圾。...如果你有什么问题请留言,感谢阅读,我会继续给大家翻译 WordPress SEO 技巧的文章。

    34030

    你不可不知的WEB安全知识(第一部分:HTTPS, TLS, SSL, CORS, CSP)

    不同类型的Web安全 HTTPS TLS SSL CORS CSP OWASP (安全风险) >> 我将在本系列的第二部分中讲解它 哈希算法 >> 我会在本系列的第二部分中讲解它 MD5 SHA...TLS和SSL有什么区别 SSL是TSL的旧版本,在国际互联网工程任务组(IETF)继Netscape之后负责SSL的发展,其名称已更改,如今一些开发人员使用SSL和TLS来指代同一事物。...CORS 跨域资源共享(CORS)是一种机制,它使用HTTP报头来指定哪些外源可以访问本地资源,以及如何访问它,这意味着我们可以为允许的跨域访问我们的资源列出一个白名单。...跨站脚本攻击(XSS):它是一个漏洞,允许黑客网站中注入恶意代码,并且用于使客户端执行该代码以获取敏感数据(例如Cookie,会话信息和特定于站点的信息),这是因为Web应用未使用足够的验证或编码,用户的浏览器无法检测到恶意脚本不可信...如果它与主机建立了任何不允许连接,浏览器将响应400错误,示例:connect-src ‘self’; 多标签指令定义: default-src ‘none’; script-src ‘self’; connect-src

    1.3K31

    解决 用 Nginx 处理 跨域问题

    教你 如何 快速 用 Nginx 轻松搞定跨域问题 当你遇到跨域问题,不要立刻就选择复制去尝试。请详细看完这篇文章再处理 。我相信它能帮到你。...当网站8080去访问服务端接口时,就产生了跨域问题,那么如何解决?...是否允许跨域使用cookies,如果要跨域使用cookies,可以添加上此请求响应头,值设为true(设置或者不设置,都不会影响请求发送,只会影响在跨域时候是否要携带cookies,但是如果设置,预检请求和正式请求都需要设置...报错内容也讲的很清楚,在这个预请求中,PUT方法是不允许在跨域中使用的,我们需要改下Access-Control-Allow-Methods的配置(缺什么加上么,这里我只加了PUT,可以自己加全一点),...情况5: 最后再说一种情况,就是后端处理了跨域,就不需要自己在处理了(这里吐槽下,某些后端工程师自己改服务端代码解决跨域,但是又不理解其中原理,网上随便找段代码黏贴,导致响应信息可能处理不完全,如method

    1.8K22

    关于Django上线后的CSRF问题

    首先在宝塔上安装Python项目管理器,采用如下配置,能够快速搭建Django项目。 然后进行映射域名,启动项目,发现只要含有表单的页面都出现CSRF错误的信息。...由于Django的防CSRF是默认开启的,所以如果表单内没有添加{% csrf_token %}会导致报错。...但这又会引出一个新问题,因为Django系统自带的admin应用是包含{% csrf_token %}的,所以还要改系统生成的代码会十分麻烦。...如果你按照正常的流程搭建网站,出现CSRF报错,可能是你开启了SSL,也就是https,这里牵扯到一个跨域的问题。...{% csrf_token %}就是为了防止跨域请求的,而https与http并不是同一个域(可以去搜索跨域相关的知识),因此猜测是开启了https的问题,解决办法如下: 打开站点设置->反向代理->配置文件

    24520

    解决ajax跨域问题【5种解决方案】「建议收藏」

    大家好,又见面了,我是你们的朋友全栈君。 什么是跨域问题? 跨域问题来源于JavaScript的”同源策略”,即只有 协议+主机名+端口号 (如存在)相同,则允许相互访问。...,即一般的ajax是不能进行跨域请求的。...但 img、iframe 、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用标签的开放策略,我们可以实现跨域请求数据,当然这需要服务器端的配合。...当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的JavaScript代码。...同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。)

    12.9K20

    防盗链

    这个东西 看到这个不禁回想起跨域,可是我想了想 以前说过img标签是自动配置好了跨域的 那我就直接去访问一下那个图片的url吧 然后就是这个样子的 哎很奇怪的就是 直接访问地址可以成功访问到图片...但是这又好像是个重定向 因为状态码是304 我我我真是百思不得其姐 然后就是一顿asking debug 问了很多群里的大佬们 和各位javaer们 最后得出的结论是 这是一个防盗链 那什么是防盗链呢...其实,index.html在被解析时,浏览器会识别页面源码中的img,script等标签,标签内部一般会有src属性,src属性一般是一个绝对的URL地址或者相对本域的地址。...而A站点,希望在自己的网站上面也展示这些图片,直接使用: 这样,大量的客户端在访问A站点时,实际上消耗了B站点的流量,而A站点却从中达成商业目的...这样的A站点着实令B站点不快的。如何禁止此类问题呢?

    1.7K20

    跨域访问和防盗链基本原理

    一、什么是防盗链 网站资源都有域的概念,浏览器加载一个站点时,首先加载这个站点的首页,一般是index.html或者index.php等。...这样的A站点着实令B站点不快的。如何禁止此类问题呢?...但是很多时候,我们都需要发起请求到其他站点动态获取数据,并将获取到底数据进行进一步的处理,这也就是跨域访问的需求。 现在从技术上有几个方案去解决这个问题。...,加载过来的脚本中如果有定义的函数或者接口,可以在本地使用,这也是我们用得最多的脚本加载方式。...一次具体的跨域访问的流程为: ? 因此权限控制交给了服务端,服务端一般也会提供对资源的CORS的配置。 跨域访问还有其他几种方式:本站服务端代理、跨子域时使用修改域标识等方法,但是应用场景的限制更多。

    2.3K100

    Web安全(一)---浏览器同源策略

    #2 跨域 #2.1 解决跨域的方法 #2.2 跨域资源共享(CORS) # CORS方法如何携带Cookie #2.3 Nginx反向代理 Web安全(一) — 浏览器同源策略 #1 什么是浏览器同源策略...,除了上述的几个标签可以跨域加载外,其他出现跨域请求时,请求会发到跨域的服务器,并且会服务器会返回数据,只不过浏览器"拒收"返回的数据 #1.2 同源策略的限制 浏览器的同源策略目的是为了保护用户的信息安全...,为了防止恶意网站窃取用户在浏览器上的数据,如果不是同源的站点,将不能进行如下操作 : Cookie、LocalStorage 和 IndexDB 无法读写 DOM 和 Js对象无法获得 AJAX请求不能发送...跨域 跨域资源共享(CORS) Nginx反向代理 nodejs中间件代理跨域 WebSocket协议跨域 下面主要讲两个平时我常用的解决跨域的方法 CORS 和 Nginx反向代理 #2.2 跨域资源共享...:x-requested-with,content-type //允许的请求头字段 # CORS方法如何携带Cookie 如果使用CORS解决跨域问题,除了后端服务器需要配置以上信息外,前端也需要进行如下配置

    4.2K30

    ASP.NET安全

    这些Roles默认匹配到我们web服务器的Windows Group或者是域管理器里面的用户组。 ?...在Forms认证中, ASP.NET为我们提供了一个角色管理器(role provider)我们可以通过它来方便和将我们的角色信息存储到SQL中,并且进行管理。我们只需要点击一个按钮即可: ?...只需要简单的一句话,就可以移除所有的有害代码,是不是感觉又被Microsoft搞蠢了? CSRF跨站请求伪造   跨站请求伪造也是一种危险的主流攻击。...试想一下,某个用户登录到网站想修改一些个人信息,如果服务器端使用了Forms认证,那么在这个用户登录之后就会得到一个包含身份信息的cookie并且在后面所有这个站点下的请求中传递。...如果浏览器端依然保留着我的身份信息,那在我访问其他恶意的站点的时候。

    2.7K80
    领券