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

前端路由的原理及应用

前端路由的起源 传统的web开发中,并没有前端路由这个概念。那么前端路由是如何出现的呢? 早期的路由都是后端来实现的,根据用户访问的地址的不同,浏览器从服务器请求对应的资源或页面展示给用户。...当页面数据量大,结构复杂的时候,随之造成服务器的压力也比较大,而且用户访问速度也比较慢。 ajax,全称Asynchronous Javascript And XML,是浏览器实现异步加载的一种方案。...使用浏览器访问网页时,如果网址URL中带有hash,页面就会定位到id(或者name)与hash值一样的元素的位置; hash还有一个另一个特点,hash的改变不会使页面重新加载; 浏览器不会把hash...并且,当页面发生跳转触发hashchange事件时,我们可以在对应的事件处理函数中注册ajax等操作从而改变页面内容。那么如何改变hash呢?...当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

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

    Web Hacking 101 中文版 十三、子域劫持

    报告日期:2016.2.29 奖金:未公开 描述: 我不知道这是否符合子域劫持的技术定义(如果有的话),但是我觉得这是个重大的发现,让 Philippe 能够以最少的交互劫持任意 Facebook 账户...如果你曾经浏览器过某个站点,它让你使用你的 Google、Facebook、Twitter 以及其他账户来登录,你就使用了 OAuth。 现在,假设你注意到了这里的潜在利用。...重要结论 我觉得你可能想知道,为什么这个例子会包含在这本书的这个章节。对我来说,最重要的结论就是。要考虑到在渗透过程中如何利用一些遗留资源。在这一章的上一个例子中,DNS 指向了不再继续使用的服务。...总结 当一个站点已经创建了无用的 DNS 记录,指向三方服务提供商,子域劫持真的不难以完成。...这些东西的用法都包含在这本书的工具一章。 此外,就像前面那个 Facebook 访问 Token 的示例那样,当你考虑这种类型的漏洞时,扩展你的领域,并且考虑目标上存在什么过时的遗留资源。

    1.2K40

    单页面应用history路由实现原理

    history对象属性 window 对象通过 history 对象提供了对浏览器的回话历史的访问(不要与 WebExtensions history搞混了,我们要说的这个history变化时是不会请求服务器的...()是不会触发的,后面会介绍如何监听pushState事件。...注意,调用 pushState() 后浏览器并不会立即加载这个URL,但可能会在稍后某些情况下加载这个URL,比如在用户重新打开浏览器时。新URL不必须为绝对路径。...page=3, state: {"page":3} history当前状态 页面加载时,或许会有个非null的状态对象。...那么当页面重新加载时,页面会接收一个onload事件,但没有 popstate 事件。然而,假如你读取了history.state属性,你将会得到如同popstate 被触发时能得到的状态对象。

    3.3K10

    Caddy的简单用法

    # 示例1:加载当前目录下名称为Caddyfile的配置文件启动caddy,并且监控到配置文件改变的时候,自动重新加载配置。...-overwrite 用格式化后的结果,覆盖你的配置文件 # 整个命令很简单,比如我想用这个命令把我的配置文件美化下,并且把美化的结果覆盖我的配置文件 caddy fmt --overwrite...} 如上示例,定义了两个站点,一个是 localhost,一个是 localhost:1234,执行 caddy start 启动,两个地址都可以访问。...从上面的配置可以看到,要配置多个站点,就需要使用 {} 把每个站点括起来,而只有一个站点的时候,就不需要了。...example.com,实际访问的是 127.0.0.1:8080/app/ 的内容 proxy / 127.0.0.1:8080/app/ ## WebSocket 代理配置 ###

    22010

    Web Security 之 CORS

    Cross-origin resource sharing (CORS) 在本节中,我们将解释什么是跨域资源共享(CORS),并描述一些基于 CORS 的常见攻击示例,以及讨论如何防御这些攻击。...当收到 CORS 请求时,将请求头中的 origin 与白名单进行比较,如果在白名单中,则在 Access-Control-Allow-Origin 头中返回请求的 origin 以允许其跨域访问。...当内部浏览器可以访问不受信任的外部域时,仅仅依靠网络配置来保护内部资源是不够的。...同源策略是如何实施的? 同源策略通常控制 JavaScript 代码对跨域加载的内容的访问。通常允许页面资源的跨域加载。...由于历史遗留,在处理 cookie 时,同源策略更为宽松,通常可以从站点的所有子域访问它们,即使每个子域并不满足同源的要求。你可以使用 HttpOnly 一定程度缓解这个风险。

    1.3K10

    Apache基础教程:软件安装和故障排查

    没有服务器的同学可以在这里购买,不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验,学会安装后在购买服务器。 如何使用此教程: 每个部分都可以独立使用,因此可以跳到与您的需求相关的部分。...为静态网站创建文档根目录 使用Apache构建网站时,开发人员经常使用单个站点或域的虚拟主机。为document root创建目录,此目录为Apache服务内容时首先检查的目录。.../www/example.com/public_html 允许对常规Web目录的读访问权限: sudo find /var/www -type d -exec chmod 775 {} \; 请注意,您的权限可能会根据您的需求和用例而变化...configtest 重要文件和目录 当您使用Apache时,您可能会遇到以下目录和文件: 内容 /var/www/html:此目录包含您站点的Web内容,并且是默认根目录。...它符合完整配置,所以当Apache启动或重新加载时,它会读取此目录中的配置文件和链接。

    1.1K20

    如何在Debian 9上安装Nginx

    您可以按照Debian 9的初始服务器设置教程了解如何设置它们。 没有服务器的同学可以在这里购买,不过我个人更推荐您使用免费的腾讯云开发者实验室进行试验,学会安装后再购买服务器。...我们不是修改/var/www/html,而是在我们的example.com站点内用/var/www创建一个目录结构,如果客户端请求与任何其他站点不匹配,则将/var/www/html保留为要提供的默认目录...: sudo chmod -R 755 /var/www/example.com 接下来,使用网页nano或你喜欢的编辑器创建一个示例index.html: nano /var/www/example.com.../html/index.html 在里面,添加以下示例HTML: Welcome to Example.com!...为了让Nginx提供此内容,必须使用正确的指令创建服务器块。

    8.7K70

    如何在Ubuntu 16.04上设置Apache虚拟主机

    配置的每个域都会将访问者定向到保存该站点信息的特定目录,从不指示同一服务器也负责其他站点。只要您的服务器可以处理负载,此方案就可以在没有任何软件限制的情况下进行扩展。...在本指南中,我们将向您介绍如何在Ubuntu 16.04 VPS上设置Apache虚拟主机。在此过程中,您将了解如何根据所请求的域向不同的访问者提供不同的内容。...稍后我们将展示如何编辑本地主机文件,以便在使用虚拟值时测试配置。这样您就可以在家用计算机上测试配置,即使您的内容无法通过域名提供给其他访问者。...第一步 - 创建目录结构 我们要采取的第一步是创建一个目录结构,该结构将保存我们将为访问者提供的站点数据。...sudo chown -R $USER:$USER /var/www/test.com/public_html 当您按Enter键时,该$USER变量将采用您当前登录的用户的值。

    2.3K30

    练习使用 Linux 的 grep 命令

    *pdf example.html http://example.com/linux_whitepaper.pdf http://example.com/bsd_whitepaper.pdf http:...//example.com/important_security_topic.pdf 输出是一系列的 URL,每行一个。...*pdf \ example.html | curl --remote-name 这条命令可以下载每一个文件,然后以各自的远程文件名命名保存在我的硬盘上。 这个例子中我的搜索模式可能很晦涩。...那是因为它用的是正则表达式,一种在大量文本中进行模糊搜索时非常有用的”通配符“语言。 正则表达式 没有人会觉得 正则表达式(regular expression)(简称 “regex”)很简单。...然而,我发现它的名声往往比它应得的要差。诚然,很多人在使用正则表达式时“过于炫耀聪明”,直到它变得难以阅读,大而全,以至于复杂得换行才好理解,但是你不必过度使用正则。

    1K20

    如何在Ubuntu 16.04上设置Nginx服务器块(虚拟主机)

    示例配置 出于演示目的,我们将使用我们的Nginx服务器设置两个域。我们将在本教程中使用的域名是example.com和test.com。...第二步:为每个站点创建示例页面 现在我们已经设置了目录结构,让我们为每个站点创建一个默认页面,以便我们可以显示一些内容。...这不允许其他访问者正确查看您的网站,但它可以让您独立访问每个网站并测试您的配置。这基本上可以通过拦截通常用于解析域名的DNS请求来实现。...相反,我们可以在请求域名时设置我们希望本地计算机访问的IP地址。 注意 在这些步骤中确保您在本地计算机上运行,而不是VPS服务器。...假设我的服务器的公共IP地址是203.0.113.5,我将添加到我的文件的行看起来像这样: 127.0.0.1 localhost . . . ​ 203.0.113.5 example.com www.example.com

    4.9K10

    使用浏览器的 Reporting API 上报站点错误

    Reporting API 定义了一个新的 HTTP Header,Report-To,它让 Web 开发人员以自定义的方式来将浏览器的警告和错误发送到指定服务器。...例如,假设你的新站点依赖 document.write() 来加载关键脚本。来自世界各地的新用户要访问你的站点,但是他们使用的连接可能比你的测试环境要慢得多。...进行设置可让你对你的网站更放心,当真实用户访问你的网站时,没有发生任何可怕的事情。如果当他们确实遇到无法预料的错误时,你会知道的。...浏览器如何发送报告 浏览器会定期批处理报告,并将其发送到你配置的报告URL。...下面是一个CSP报告的示例: POST /csp-reports HTTP/1.1 Host: example.com Content-Type: application/reports+json [

    2.5K30

    Web Hacking 101 中文版 十二、开放重定向漏洞

    这个漏洞用于钓鱼攻击,便于让用户无意中浏览恶意站点,滥用给定站点的信任并将用户引导到另一个站点,恶意站点作为重定向目的地,可以将其准备成合法站点的样子,并尝试收集个人或敏感信息。...domain_name=example.com,它会重定向到http://example.com/admin。 恶意用户能够在该域部署站点,并尝试对无意识的用户执行钓鱼攻击。...重要结论 我这里再说一遍,不是所有漏洞都很复杂。这里的开放重定向只需要将重定向参数修改为外部站点。 2....这种类型的漏洞依赖信任的滥用,其中受害者被诱导来访问攻击者的站点,并认为他们正在浏览他们认可的站点。 通常,当 URL 作为参数传递给 Web 请求时,你可以发现它们。...当你寻找漏洞时,识别站点所用的工具和服务,以及有时在被认可和接受之前,你需要坚持并清晰展示漏洞。

    80530

    BlackHat2020议题之Web缓存投毒

    指定的请求对应的资源文件了,就直接从缓存服务器返回一个响应给用户,如果缓存服务器上还没有该资源则把这个请求转发到Web服务器,让Web服务器响应该请求 那么有人又要问了: 那cache key是根据什么规则生成的呢...>alert(1)"/> 很明显,这是一个存在xss的恶意响应 当其他用户下一次正常访问/en?...q=axin" 但是,当站点在形成cache key的过程中移除掉整个query字符串的情况下,我们就不能够再使用这种方式识别动态站点了,因为你再怎么更改参数甚至是添加一个参数都会得到相同的响应,你不由得会开始思考人生...x=1 vcd=1234 cid=__ Ruby on Rails案例 在测试某一个目标时,我通过扫描器发现了一个奇怪的现象,但是,我又没有找到可利用的缓存点,于是我看了一下目标站点的缓存实现源代码。...bar=x HTTP/1.1 Host: example.com Origin: http://evil.com 但是,我试了一下,发现这两个请求并不一致,于是我发邮件让cloudflare纠正他们的文档

    1K20

    BlackHat2020议题之Web缓存投毒

    指定的请求对应的资源文件了,就直接从缓存服务器返回一个响应给用户,如果缓存服务器上还没有该资源则把这个请求转发到Web服务器,让Web服务器响应该请求 那么有人又要问了: 那cache key是根据什么规则生成的呢...>alert(1)"/> 很明显,这是一个存在xss的恶意响应 当其他用户下一次正常访问/en?...q=axin" 但是,当站点在形成cache key的过程中移除掉整个query字符串的情况下,我们就不能够再使用这种方式识别动态站点了,因为你再怎么更改参数甚至是添加一个参数都会得到相同的响应,你不由得会开始思考人生...x=1 vcd=1234 cid=__ Ruby on Rails案例 在测试某一个目标时,我通过扫描器发现了一个奇怪的现象,但是,我又没有找到可利用的缓存点,于是我看了一下目标站点的缓存实现源代码。...bar=x HTTP/1.1 Host: example.com Origin: http://evil.com 但是,我试了一下,发现这两个请求并不一致,于是我发邮件让cloudflare纠正他们的文档

    1.3K20

    如何在一个Ubuntu 18.04服务器上将Nginx配置为Web服务器和Apache的反向代理

    Apache和Nginx是目前比较流行的两种常用于PHP的开源Web服务器。当托管具有不同要求的多个网站时,在同一虚拟机上运行它们会很有用。...根据Web应用程序的不同,可能需要更改代码以保持Apache反向代理感知,尤其是在配置SSL站点时。...为避免这种情况,您将安装一个名为mod_rpaf的Apache模块,该模块会重写某些环境变量,让Apache看起来似乎是在直接处理来自Web客户端的请求。 我们将在一台服务器上托管四个域名。...您将看到以下结果: 此外,通过访问每个站点的info.php文件来确保PHP正常工作。...步骤10 - 使用Nginx提供静态文件(可选) 当Nginx代理对Apache域的请求时,它会将该域的每个文件请求发送给Apache。

    4.8K01

    Nginx配置各种响应头防止XSS,点击劫持,frame恶意攻击

    特别的:如果想让浏览器只汇报日志,不阻止任何内容,可以改用 Content-Security-Policy-Report-Only 头。 指令值 指令示例 说明 img-src 允许任何内容。...进一步提高通信的安全性。 上面是我自己的理解,下面是owasp中文站点关于hsts的描述: HSTS的作用是强制客户端(如浏览器)使用HTTPS与服务器创建连接。...服务器开启HSTS的方法是,当客户端通过HTTPS发出请求时,在服务器返回的超文本传输协议响应头中包含Strict-Transport-Security字段。非加密传输时设置的HSTS字段无效。...在接下来的一年中,如果 example.com 服务器发送的TLS证书无效,用户不能忽略浏览器警告继续访问网站。 HSTS可以用来抵御SSL剥离攻击。...#替换); # HTTP X-XSS-Protection 响应头是 Internet Explorer,Chrome 和 Safari 的一个特性, # 当检测到跨站脚本攻击 (XSS)时,浏览器将停止加载页面

    4.6K50

    一文详解Nginx安全加固

    以下是如何配置的具体示例代码以及一个实际案例说明。...按照上述配置,当你尝试直接访问http://example.com/.git/ 或 http://example.com/.htaccess 时,Nginx会返回403 Forbidden错误,从而保护这些敏感资源不被公开访问...下面,我将通过具体的代码示例和实际案例来详细说明这个过程。 获取并安装SSL证书 首先,你需要从一个可信的证书颁发机构(CA)获取SSL证书。...和根路径(root) 当使用alias时,确保正确地添加斜杠以避免潜在的目录遍历漏洞: location /static/ { # 注意这里的斜杠 alias /var/www/static_files...日志安全 在Nginx中,通过配置访问日志和错误日志,可以有效地记录用户行为和系统状态,这对于安全分析至关重要。下面我将提供具体的代码示例来说明如何配置这些日志。

    30421
    领券