ic_ee

什么是Tabnabbing?如何保护你的Elementor网站免受其害?

什么是Tabnabbing?如何保护你的Elementor网站免受其害?我最近看到了 “tabnabbing “这个词。简而言之,tabnabbing是一种操纵网页的钓鱼式攻击。它对你的网站(以及它的声誉)和你的访问者都是有害的。自然,我想更多地了解一下:作为网站所有者,我们应该如何保护我们的访问者?所以我做了一点调查……在这篇短文中,hostgator美国服务器将更详细地解释什么是Tabnabbing,以及您可以做什么来缓解它。

到底什么是Tabnabbing?

Tabnabbing是一种钓鱼式攻击,当网站访问者单击新标签或新窗口中打开的链接时,可能会发生这种攻击。该操作使黑客有机会将网站重新定向到一个完全由他们所控制的重复站点。

Tabnabbing的意义何在?

目的很简单。黑客将访问者链接到一个重复的网站,希望获得登录的详细信息和其他敏感信息。推荐阅读:《在WordPress中使用Elementor [初学者指南]》

新标签中的JavaScript可以做普通JavaScript可以做的任何事情。它可以操纵页面,改变数据,发送请求,读取该网站的cookies等。它还可以获得父窗口的详细信息并对其进行修改。例如,它可以将原始页面重定向到一个假页面(看起来是合法的),并要求访问者提供他们的凭证。

什么是Tabnabbing?如何保护你的Elementor网站免受其害?

这种情况非常危险。

你能做些什么来防止标签被窃取?

作为网站访问者,防止Tabnabbing非常困难,因为很少有受害者点击看似可疑的链接会导致这种情况。然而,作为一个网站的创建者,有一些事情你还是可以留意到的。

Rel=”noopener”

首先,也是最重要的是,始终确保你的外部链接是指向有信誉的来源。其次,在新标签页中打开的外部网站链接一般都应该有一个rel=”noopener “属性。这使新标签页的开启者没有被设置,因此,JavaScript将无法访问打开它的标签。

Rel=”noreferrer”

同样,在链接上添加rel=”noreferrer”,通过省略referrer,从而指示浏览器不要通知新标签的网站服务器访客来自哪个页面。推荐阅读:《如何从Elementor切换到WordPress Gutenberg编辑器》

关于相关链接的说明

我们已经联系了一些相关平台,以确认rel=”noreferrer “属性是否会影响其追踪。以下是我们被告知的情况。

  • 当使用专业插件直接链接跟踪时,[带有此属性的相关链接将受到影响,因为它依赖于提供给信用联盟的URL。。否则,cookies应该仍然能够被添加到访问者的浏览器中,这就是在整个网站上追踪联盟ID的方式,并得以在购买/转换时被使用。
  • 使用这个属性不会影响我们追踪的准确性。
  • 如果客户使用了有效的合作伙伴跟踪链接,即使推荐人的URL为空,该操作仍将具有属性。没有引用域则意味着它是 “直接流量”。直接流量是指有人在其网络浏览器中输入了一个URL。这很可能是由于人们复制了合作伙伴跟踪链接并将其粘贴到他们的网络浏览器中造成的,如果他们是从Facebook的帖子中获取链接,就很可能是这种情况。您并不总是能在该部分中找到引用域,因为它取决于客户用于生成操作的方法。

总而言之,一般情况下,noreferrer属性不会影响您的相关链接。然而,在某些情况下,它可能还是会影响到您,因此在设置属性时请确保与您的联盟伙伴核实了情况。

WordPress

Gutenberg编辑器(或块状编辑器)自动为新浏览器标签中打开的链接设置rel=”noopener noreferrer”。WordPress专门引入了这个功能,以解决上述的安全漏洞。

下面是外部链接在HTML中的例子。

Elementor

不幸的是,Elementor并没有自动设置这些属性。如果你用这个流行的页面生成器创建或运行你的网站,它会很容易被忽视。然而,这里有一个变通的办法。

当在 Elementor 中创建一个指向外部资源的链接时,点击链接字段右侧的齿轮图标,您会打开 Elementor 部件中的自定义属性部分。

在这里添加rel|noopener noreferrer并保存您的工作。

在前端,源代码显示rel=”noopener noreferrer “属性已被分配。

我们联系了Elementor,了解他们对tabnabbing的看法。以下是编辑产品负责人Shilo Eish Yemini @ Elementor的看法。

  • Elementor到现在为止还没有默认添加这种行为,是为了避免在未经同意的情况下损害现有的网站,从而避免损害网站的追踪问题。
  • 从 Chromium 88 版本开始,默认情况下,带有 target=”_blank “的锚点将自动获得 noopener 行为。
  • 正如[这篇]有趣的文章所提到的,我们允许用户手动添加这些`rel`属性。换句话说,我们将很快为所有的外部链接添加`noopener`属性,以确保传统的浏览器访问者不会受到影响。由于它们都有着类似的目的,我们并不会自动添加 “noreferrer”,以防止现存的网站追踪问题。

总结

如果您正在使用 Elementor,我推荐您修改一下您的页眉、页脚、侧边栏、广告和模版,以确保第三方页面的链接在 rel 属性中能够用 noopener 和 noreferrer 值。推荐相关阅读:《WordPress的全站编辑:它的地位和未来》

ic_ee

如何从Elementor切换到WordPress Gutenberg编辑器

你很快就会明白人们为什么使用Elementor。它速度很快。反应灵敏。它使得人们可以通过简单的拖放创建漂亮的WordPress网站。同时,作为动态内容的仓库,在不知道创建代码的情况下,几乎没有更好的方法来创建令人眼前一亮的网站。hostgator美国VPS主机分享如何从Elementor切换到WordPress Gutenberg编辑器:

那么,为什么有些人会转而使用WordPress Gutenberg编辑器呢?有几个原因:

内容优化。在Gutenberg Editor中发布动态内容很容易,并且仍然可以在Google PageSpeed的见解洞见上仍然能获得高分。使用Elementor,你通常需要额外的页面优化,如删除素材以匹配这些结果。推荐阅读:《在WordPress中使用Elementor [初学者指南]》

如何从Elementor切换到WordPress Gutenberg编辑器

页面大小。由于Gutenberg较少依赖素材脚本,所以加载速度更快,创建的页面也更轻。也可以说它遵循“少即是多”的原则。

速度随着页面大小的减少,速度也相应提高。正如Deepak Ghimire在Medium中所指出的,“速度很重要!而现在,对谷歌来说很重要!”Ghimire认为页面速度是他改用Gutenberg的主要原因之一。

此外,Elementor的价格波动。不知道是否会有新一轮涨价。同时,Gutenberg可以免费使用。

考虑到这一点,如果你正在考虑从Elementor切换到WordPress Gutenberg编辑器,以下是你需要采取的步骤。

WordPress Gutenberg编辑器切换至Elementor:如何进行切换

不要被你看到的步骤列表吓倒。这只是一种帮助你准备逐步转换的方法。根据你在Elementor中使用的主题,该过程可能比你想象的要简单得多。但彻底地检查一遍从来都没有坏处。

1.准备:计划转换并存储备份

第一步就是准备。在你执行任何事情之前做好计划,因为有些更改可能是不可逆的。

在此阶段,请确保保存了需要永久存储的内容。没有理由让网站被一个简单的转换毁掉,但备份也不会有什么坏处,以防万一。

你也应该研究一下运行的Elementor版本。例如,Blocksy主题很容易进行转换,你甚至可以在站点上继续运行该主题。

注意:如果想在网站的性能上做一个前后对比的测试,准备阶段是进行速度测试的时候,并了解你所处的阶段。

2.准备好模拟网站上的所有内容

提前准备好切换到Gutenberg的一个原因是:你需要考虑客户。如果很多人都指望网站在某个特定的时间上线,不要用它来更新网站。

但不要挂起“我们关闭了”的标志,不如考虑利用模拟网站来解决这些难题。一个网站一周的宕机可能会对SEO和受众忠诚度造成毁灭性的影响。

3.删除Elementor或页面生成器

移除页面生成器是第一步,但是请记住:如果你使用的是轻量级的Elementor主题,比如Blocksy,那么你可能可以继续使用。推荐阅读:《如何选择WordPress主题【九个需要注意的事项】》

4.安装Gutenberg Blocks Editor

清除了旧设计后,你可以自由安装Gutenberg Blocks Editor。如果你使用的是旧的动态内容,你可能需要将这些内容编辑到Gutenberg Blocks Editor中,使它们看起来完全符合网站的需要。

然而,Gutenberg在重要的动态内容方面做得很好,你可能只需要做一些调整,以确保相应的“块”符合网站的意图。

5.优化速度

在新站点上运行速度测试,并将其与旧站点进行比较。如果一切顺利的话,你应该注意到在第一步中,你得到的结果有了实质性的速度提升。

同时使用Elementor和WordPress Gutenberg怎么样?

你可能已经注意到,在某些情况下,你可以同时使用Elementor和Gutenberg。称之为“两全其美”。如果你更喜欢Elementor的页面设计,但更喜欢Gutenberg的动态编辑,那么你没有理由,必须二选一。

以下是一些实现的方法:

坚持使用简单Elementor主题

对于拖放式网页设计师来说,在海量Elementor主题中不断滚动搜索“完美主题”很有诱惑力,但是这可能会适得其反。你想要的是一个简单的主题。你稍后可以在它的基础上进行构建,更简单的主题正如WPApprentice所说的那样可以让“Elementor完成它的任务”,。

简单来说:运行Elementor越容易,你就会发现它越容易与Gutenberg集成。

为了帖子关闭Elementor

进入:

Elementor>设置

在“帖子类型”中,取消选中“帖子”框。

保存设置。

你希望立即执行此操作的原因是:如果你计划使用Gutenberg Editor,那么你应该尽快开始使用编辑器。关闭Elementor的“后期编辑”并进入下一步操作。

使用Elementor的“专业主题”构建器

至此,主站点的外观有了大致的了解。现在使用Elementor’s Pro Theme Builder为帖子和页面创建模板。

基本方法是什么?安装了Gutenberg之后,就在里面创建和编辑帖子。Gutenberg将使用你放入Gutenberg的动态内容“填充”Elementor设计的模板。如果听起来有点复杂,可以这样想:Elementor是框架,Gutenberg是其中的内容。

切换到Gutenberg或者HostGator

无论是完全切换至Gutenberg或混合使用,这可能比你想象的要容易。好处很简单:更快的性能,更少的代码,更好的搜索引擎结果。但是,你越早进行转换并开始在Gutenberg中规划帖子,你就会发现在未来管理动态内容就越容易。

而且,让WordPress托管在HostGator上也不会有什么坏处,这有助于你轻松地迁移到Gutenberg,只需点击几下鼠标即可。推荐相关阅读:《WordPress主题隐藏的功能你都知道吗?(一)》

ic_ee

在WordPress中使用Elementor [初学者指南]

当你想创建一个新的网站,会有很多不同的选择。你可以选择不同的内容管理系统(CMS)、网站构建器等。一个更独特和强大的组合是使用WordPress CMS,加上一个像Elementor网站构建器。这样就两全其美了,既拥有提供内容管理权力的WordPress,又拥有定制能力的拖放式网站构建器。

如果不确定Elementor是否是适合自己需要的拖放式页面构建器,那么请继续阅读下去。

下面将了解Elementor插件的详细信息,可以在WordPress增加的附加功能,使用该插件的优缺点,最后将学习如何在WordPress网站上使用该插件。推荐阅读:《如何利用WordPress网站构建器轻松建立网站》

Elementor是什么?

简单地说,Elementor是一个WordPress页面构建器插件。页面构建器功能让使用者能够控制网站的所有视觉元素,以及创建自定义布局、设计和页面。

在WordPress中使用Elementor [初学者指南]
在WordPress中使用Elementor [初学者指南]
  Elementor本身并不是一个真正的主题,而是与任何现有的WordPress主题相匹配。然后将使用该插件来自定义现有页面,向站点添加新的小部件和设计选项,等等。

它配备了各种不同的小部件和预先构建的内容布局。所以,不必从头开始建立网站。相反,使用由专业人员构建的预先构建的站点Elementor。

另外,在建立网站的时候,插件使用拖放功能。这使得完成设计任务变得非常简单和直观。只需选择、拖放,就可以完成整个站点的构建。

免费版与专业版:两者有什么区别?

和大多数WordPress插件一样,这个插件有免费版和高级版。这样的话,就可以随着使用者对插件熟悉程度的增加,在需要更多更丰富的功能的时候选择付费升级。

Elementor插件的免费版本比大多数高级插件有更多的功能。尽管如此,升级到Elementor Pro还有更充分的理由。

首先,高级版本有一些额外的特性,这些特性更容易创建工作流。这对于正在构建客户端网站的开发人员和设计人员非常有用,因为这可以构建整个主题。

还可以访问更大的小部件库、全天候支持、动态内容块、集成等等。

对于那些建立第一个站点的人来说,免费版本可能已经足够了。但是,如果需要更高级的特性和站点功能,可能需要考虑升级。推荐阅读:《选择WordPress主题应该需要注意哪些事项》

Elementor与Gutenberg编辑器:究竟哪个更好?

最新发布的Gutenberg块编辑器是所有运行最新版WordPress网站的原生版本。这个更新的可视化编辑器使用块系统来帮助可视化地构建页面并创建唯一的内容。

因此,WordPress Gutenberg编辑器的加入的确提供了以前只有通过安装Elementor这样的插件才能现的功能。但是,它仍然不像其他WordPress页面构建插件那样强大。

以下是每个插件提供的功能简介:

Gutenberg块编辑器:

  •   使用拖放编辑器创建自定义页面和文章
  •   从二十多个不同的内容块中进行选择,例如图像、视频、文本、按钮、表格等
  •   使用拖放编辑器轻松地重新排列和插入新块
  •   从每个内容块的自定义选项列表中选择

Elementor插件:

  •   超过三十种不同的内容小部件可供选择
  •   每个Elementor的大量自定义选项库
  •   能够创建具有多种内容形式的复杂布局
  •   高级内容功能,如图像传送带、地图等
  •   对站点Elementor(如间距、填充和边距)的控制
  •   对正文以外的内容(如页眉和页脚部分)进行设计和控制

那么,应该用哪个编辑器来建立WordPress站点呢?没有现成的答案。它最终取决于网站所有者的喜好以及网站目标。

如果已经在使用Elementor构建站点,那么可能希望继续使用它。切换编辑工具可能会打乱已经创建的布局和功能。

然而,如果想在两者之间做出选择,那么WordPress编辑器是一个很好的起点,因为它简单易用,而且提供了内置模板。如果喜欢使用Gutenberg来构建站点,可以随时升级到使用Elementor以获得更大的灵活性和功能。这完全取决于对现有网站的定制程度。

需要使用Elementor来建立WordPress网站吗?

不需要使用Elementor来构建站点。许多WordPress用户更喜欢使用大多数主题自带的定制选项。

大多数标准的WordPress主题都会有一系列的设计和定制调整。这包括上传徽标、更改字体、颜色等等。

还可以通过主题配备的小部件自定义外观。

网站所有者可以改变网站的外观,但也有限制。这就是为什么通常要选择一个WordPress主题,因为这可以确定网站的基本设计风格。

Elementor最适合那些想要完全控制网站外观的人。或者,已经达到了现有WordPress主题的定制限制,并且想进一步开发的网站所有者。

使用像Elementor这样的页面构建器插件的优缺点

构建站点的WordPress页面构建器有很多。它们并不适合所有用户,有特定的优势,也有一些缺点。

以下是Elementor的优点和缺点。

Elementor的优点

  •   这是一个免费的插件!大多数用户可以免费建立好自己的网站,而不必升级到专业版。
  •   对于一个免费的插件而言,它有非常丰富的功能。免费版上设置的功能可与许多付费插件相媲美。
  •   实时编辑器允许对站点进行更改,并实时查看更改效果,因此不必在多个屏幕之间来回切换。
  •   可以编辑和查看站点、桌面、移动设备和平板电脑上的呈现效果,并对每个版本进行独特的更改。
  •   对站点的控制级别非常详细,并且能够调整间距和填充文本。

Elementor的缺点:

  •   Elementor是一个功能强大的编辑器,但是由于具有所有的灵活性和自定义选项,很难每件事都做到完美。
  •   有时,页面可能有不同的内容覆盖层,查找要编辑的区域既困难又耗时。
  •   由于能够完全控制网站的外观,网站所有者可能会花太多的时间纠结于小细节,而不是将注意力集中在更重要的事情上。
  •   虽然使用起来很直观,但是Elementor提供的大量功能和定制选项要求网站所有者必须投入充足的时间来学习插件的工作原理。
  •   如果使用Elementor构建站点,则需要安装插件,否则将丢失所有设计和自定义设置。

如何将Elementor与WordPress主题结合使用

如果想在网站上使用Elementor,那么请继续阅读这一节的内容。下面将介绍插件的安装和设置,并分享一些基础知识。

由于Elementor是一个WordPress插件,启动和运行都非常简单。只需要在网站上安装WordPress和一个基本的主题就可以开始了。Elementor兼容海量主题。但是,有些主题比其他主题更合适。

找到了一个合适的主题之后,那么开始建立网站吧!

1.安装Elementor插件

若要安装插件,就需要登录到WordPress仪表板。

然后导航到“插件”》“添加新插件”,搜索Elementor插件。

接下来,在名为Elementor Page Builder的插件上单击“立即安装”和“激活”。

现在,在WordPress仪表板的左侧有一个名为“Elementor”的选项卡。推荐阅读:《使用WordPress网站构建器插件的好处》

2.Elementor设置菜单

Elementor的主优势体现在在文章和页面上。但是,用户可能仍然需要浏览“设置”菜单。

若要打开“常规设置”菜单,请单击“Elementor”>“设置”。

在这里可以选择想用插件编辑的文章类型,设置字体间距,设置颜色默认值,以及调整响应设置。

另一个可能想了解的选项卡(设置正下方)是角色管理器。该功能可以指定哪些用户可以使用Elementor编辑站点。

3.在Elementor中构建页面

现在是时候在Elementor中构建第一个页面了。导航到“页面”>“添加新内容”,然后单击“使用Elementor编辑”以启用页面构建器。这个打开之后,会看到一个类似的页面如下。

Elementor上有三个主要构建块:节、列和小部件:

节是最高级别的,是列和小部件的容器。

列是包含小部件的单独部分。

小部件是独立的Elementor。

开始之前,请单击左侧的一个Elementor并将其拖到页面上。这将打开另一组选项,具体取决于添加的Elementor。

如图所示,我们添加了一个内部区域,然后在每个这些内部区域中,添加了图像和按钮。根据配备的自定义选项,可以对每个选项进行修改。

如果不想从头开始构建页面,那么可以从内容块和已经创建的整个页面中进行选择。若想访问这些文件夹,请单击任何白色文件夹图标。

然后选择“块”,插入已经创建的内容块:

或者,选择“页面”将预生成的页面插入到站点中。

大多数用户可能更喜欢使用预构建的内容块和页面,因为它可以加快网站构建过程,但也可以使用Elementor重新开始创建页面。

编辑完页面后,只需点击屏幕底部的绿色“发布”按钮。

4.Elementor定制选项

在Elementor中编辑页面时,可以访问三个不同的内容类别。使用免费版本,可以访问基本内容部分。

下面列出了一些最常用的基本小部件:

  •   标题
  •   文本
  •   视频
  •   按钮
  •   地图
  •   图标
  •   星级评定
  •   证明
  •   社交图标
  •   侧边栏

免费版本的插件总共提供了三十个不同的元素。如果想要更多的小部件,那么需要升级到专业版。

然而,可以用一个免费的插件完成很多事情。甚至可以模仿一些Elementor Pro元素,只不过需要更长的时间来创建。

还需要注意的是,其他第三方的WordPress插件仍然可以工作,并与使用Elementor构建的网站集成。因此,不必完全依赖Elementor进行站点的视觉定制。

总而言之:与Elementor一起前行

以上就是Elementor能为网站所有者和WordPress网站做的所有事情。如果想完全控制网站的设计,那么Elementor可以做到,即使是使用免费版本的插件。

本指南旨在让用户开始使用Elementor。用户还可以完成很多事情,比如创建可重复使用的页面模板,甚至定制WooCommerce产品页面(如果正在创建电子商务商店的话)。

总的来说,Elementor是最好的WordPress页面构建器之一,可以轻松地以拖放方式构建网站。它在易用性和仍然提供深层特性之间达到了一个很好的平衡。推荐相关阅读:《5大WordPress拖放页面构建器》