大数跨境

如何阻止 Sniply 和类似服务对你的内容进行框架嵌入

如何阻止 Sniply 和类似服务对你的内容进行框架嵌入 电商实践
2019-03-19
2
导读:Sniply、Backly 等社交分享工具会将其他公司的广告直接叠加在你精心制作的高人气内容之上。但你不必坐视不管,有办法阻止这些服务对你的内容进行“框架化”(framing)。

Sniply、Backly 等社交分享工具会将其他公司的广告直接叠加在你精心准备的高人气内容之上。但你不必坐视不管,有办法阻止这些服务对你的内容进行“框架化”处理。

但首先,值得考虑的是你是否真的想要屏蔽这些社交分享工具。毕竟,它们正在为你的网站带来流量。Sniply 及类似服务处于关于内容策展边界的一场长期争论的中心。

让我们先从了解这些服务的工作原理开始。Sniply 和 Backly 都提供了很好的解释性视频。

Sniply 视频中的旁白说道:“Sniply 是一款营销工具,可以帮助你在分享的每个链接中推动转化。”

视频继续说道:“假设你看到一篇很棒的文章……与其像往常一样直接分享它,你可以使用 Sniply 在页面本身附加一个自定义的行动号召(call to action)。”

用户复制文章的 URL 并粘贴到 Sniply 中。然后,这些用户可以添加自定义的行动号召,例如“访问我的网站”或“了解为什么这篇文章完全错误”。

Sniply 为包含新消息的页面创建一个框架,然后提供一个缩短后的 URL。Sniply 用户可以将这个新的短链接粘贴到社交媒体帖子等地方。当有人点击时,他们会看到文章以及新的 Sniply 广告。

Sniply 可以创建一个显示关于自行车通勤者税收减免文章内容框架,并在框架的左下角放置一则广告,从而可能将读者引导至另一个网站。

如果你的公司认为每一笔流量都是好流量,那么就没有理由屏蔽 Sniply 或其任何替代方案。值得一提的是,许多营销行业专家都是 Sniply 的粉丝。

然而,也存在一些严重的缺点。举一个极端的例子:这里有一个针对一篇关于 2019 年美国国会提议为自行车通勤者提供新税收减免的文章所做的 Sniply 片段。该文章托管在一个直接面向消费者的自行车零售网站上。添加到该页面上的 Sniply 可能会承诺加倍税收减免(如果可能的话),并将链接指向竞争对手的自行车店。

这个假设性的例子表明,即使是竞争对手也有可能在其零售商的内容上方投放广告。

Sniply 及其用户可能在利用你的内容进行变现。他们还可能通过与你的业务建立虚假关联,利用你的品牌资产进行销售。因此,你的企业必须做出决定:像 Sniply 这样的服务是否对你的公司有利?

如果你决定 Sniply 及类似服务不适合你的公司,以下是防止它们以框架形式展示你内容的方法。

HTTP 响应头

防止公司的内容在 iframe 或类似元素中显示的最有效方法可能是添加 X-Frames-Options HTTP 响应头。

该指令告知 Google Chrome 或 Mozilla Firefox 等 Web 浏览器是否可以在 、

此指令应放置在你的 Web 服务器上。

如果你的 Web 服务器使用 Nginx,你需要在 conf 文件夹中的 nginx.conf 文件里添加以下行:

add_header X-Frame-Options deny;

同样地,如果你的服务器运行的是 Apache 2,你可以将以下行放在服务器的 httpd.conf 文件中:

Header set X-Frame-Options "deny"

还有多种其他方法来应用 X-Frame-Options 指令。

互联网工程师 Tom Cook 在 2016 年的一篇 Medium 帖子中描述了如何向静态网站添加 HTTP 头(如 X-Frame-Options)。此外,还有一些包和扩展程序可以提供帮助。例如,如果你的公司网站基于 Node 和 Express 构建,你可以使用 Frameguard 来为你的网站添加此指令。

你可能需要开发人员的一点帮助,但添加 X-Frame-Options 指令将阻止大多数工具(如 Snip.ly)将你的网页嵌入框架中。

值得一提的是,X-Frame-Options 指令有三个选项:

  • deny
  • sameorigin
  • allow-from

对于大多数网站来说,deny 是最佳选择。它会阻止浏览器在框架中显示您网站的任何内容。sameorigin 指令也是一个不错的选择,因为它只允许您的内容在自己的网站页面中被嵌入框架。

最后,allow-from 允许来自指定域名的框架和嵌入。

添加 X-Frame-Options 指令后,您可以通过浏览器的开发者工具查看页面的标头来检查它。在 Chrome 中,通过 alt+单击任意位置并选择“检查”来打开开发者工具。然后打开“Network”(网络)标签页,点击左侧的网站 URL,并在页面中间选择标头。

Web 浏览器的开发者工具会显示是否设置了 X-Frame-Options 指令。点击图片以放大。

使用 JavaScript

您还可以防止 Sniply、Backly 或类似服务对您的网站页面进行框架嵌入,通过 JavaScript。

网页是 HTML 文档。HTML 文档包含一个文档对象模型(DOM),它相当于页面的某种地图。JavaScript 使用 DOM 来查找和更改网页的部分内容。

在 DOM 中,脚本可以访问许多有用的属性,包括 top 和 self。

top 属性将返回 DOM 中最顶层的窗口(如果有的话)。self 属性返回 DOM 中的当前窗口或框架。

当你的页面直接从服务器加载时,top 的值和 self 的值是相同的。因此,如果它们不同,你的页面就知道它是在一个框架内加载的,并可以采取一些行动。有许多方法可以编写脚本来执行此检查。

这里有一个来自作家兼开发者 Chris Coyier 的示例,该示例可以跳出 iframe 并重新加载页面:

if (top.location != self.location) { top.location = self.location.href; }

这段来自 Mozilla Developers Network 的脚本也会让您知道您的页面不在 DOM 的最顶层:

if (window.parent.frames[0] != window.self) { // this window is not the first frame in the list }

这个最后的例子来自一篇关于跳出框架脚本的维基百科文章:

<style> html{display:none;} </style> <script> if(self == top) { document.documentElement.style.display = 'block'; } else { top.location = self.location; } </script>

这些方法中的任何一种在大多数情况下都能起作用。请记住,用户可以关闭 JavaScript。因此,有可能有少量链接仍然会将您的页面嵌入到框架中。

退出 Sniply

Sniply 知道其服务并不总是受欢迎,因此提供了相当简便的退出方式。为此,请在文档头部添加一个客户元标签,然后在 Sniply 网站上验证该标签。

该公司将阻止任何未来的链接在您的网站上生效。以下是需要放置在网站页面 head 部分的标签:

<meta name="sniply-options" content="block" />

其他服务在如何退出允许您的网站被嵌入框架方面并不那么明确。但您可以向 Backly 等服务发送邮件,请求其手动移除您公司的网站。

【声明】内容源于网络
0
0
电商实践
电商实践
内容 8053
粉丝 0
电商实践 电商实践
总阅读37.4k
粉丝0
内容8.1k