标签： rel

发布于

Tabnabbing 攻击 (利用 window.opener.location = …)：如何通过 rel=’noopener’ 或 rel=’noreferrer’ 防御？

各位同学，晚上好！我是你们的老朋友，今天咱们聊聊一个Web安全的“小玩意儿”——Tabnabbing，以及如何用 rel=’noopener’ 和 rel=’noreferrer’ 这两个好兄弟来保护我们的网站。 Tabnabbing：潜伏的“钓鱼”攻击 Tabnabbing，也叫 Reverse Tabnabbing，简单来说，就是利用 window.opener 这个属性，把用户已经打开的、信任的页面偷偷替换成一个钓鱼页面。想象一下，用户在一个看起来安全的网站上点击了一个链接，打开了一个新标签页。当用户回到之前的标签页时，却发现页面被替换成了假冒的登录页面，要求重新输入密码。用户一看，“哎？难道我刚才的操作session过期了？”然后乖乖地输入了密码… 悲剧就发生了。 为什么会发生这种事？window.opener 在搞鬼！ 当你使用 <a href=”…” target=”_blank”> 打开一个新标签页时，新标签页的 window 对象会有一个 opener 属性，指向打开它的那个标签页的 window 对象。这意味着，新标签页可以通过 window.open …

继续阅读“Tabnabbing 攻击 (利用 window.opener.location = …)：如何通过 rel=’noopener’ 或 rel=’noreferrer’ 防御？”

发布于

HTML5 `rel` 属性：理解 `preload`, `preconnect`, `prefetch` 的深层优化

HTML5 rel 属性：别让你的网页输在起跑线上！preload、preconnect、prefetch 的深层优化 想象一下，你辛辛苦苦装修了一家咖啡馆，咖啡豆是精选的，咖啡机是顶级的，甜点是米其林级别的，结果客人来了，坐下之后，你才开始磨豆子、热牛奶、装饰蛋糕…客人等得花儿都谢了，体验能好吗？ 网页也是一样的道理。用户访问你的网站，结果浏览器慢吞吞地加载资源，图片半天刷不出来，字体歪七扭八，交互卡顿… 体验能好吗？用户很可能直接关掉网页，去看别人的咖啡馆了。 所以，优化网页加载速度，就像提前准备好咖啡馆的一切，让客人一来就能享受。而 HTML5 的 rel 属性，就是你手中的魔法棒，能让你提前告诉浏览器：“嘿，这些资源很重要，赶紧准备好！” 今天我们就来聊聊 rel 属性中三个非常有用的值：preload、preconnect 和 prefetch，看看它们到底有什么用，怎么用才能让你的网页速度飞起。 1. preload: “这位爷，您要的资源已经备好！” preload 的作用很简单，就是告诉浏览器：“这个资源很重要，赶紧下载，而且最好在渲染页面之前就下载好。” 想象一下，你 …

继续阅读“HTML5 `rel` 属性：理解 `preload`, `preconnect`, `prefetch` 的深层优化”