使用 URL 重定向时如何防止消息传递应用程序链接预览答案

【问题标题】：How to prevent messaging app link previews when using a URL redirect使用 URL 重定向时如何防止消息传递应用程序链接预览
【发布时间】：2021-09-06 12:28:02
【问题描述】：

我的网络应用具有将用户重定向到外部链接的功能。通过 SMS 发送此链接时，多个应用程序（iMessage、Google Messages 等）会创建一个链接预览，以显示用户被重定向到的页面。考虑到应用程序的功能，这种重定向是非常不可取的。

我很想完全阻止链接预览，但是我意识到这可能不在我的控制范围内。

是否可以阻止链接预览从服务器端导航到重定向的网站？

例子：

www.mywebapp.com

www.redirect.com

是否可以 (a) 完全阻止链接预览或 (b) 将预览限制为 www.mywebapp.com 而不是 www.redirect.com（同时保持自动 URL 重定向）？

注意：this 和 this 不要回答我的问题

【问题讨论】：

生成预览触发器是自动操作吗？如果为真，则您违反了 HTTP 和 Web 应用程序的一条非常重要的规则：GET 请求必须是安全的。
@Evert 我不明白你的问题
如果生成预览的应用程序的用户代理与用户单击链接时的用户代理不同，您也许可以使用它来生成自己的预览而不是重定向

标签： javascript node.js angular typescript redirect

【解决方案1】：

这是整个过程的 100 英尺视图，以及建议和参考资料

偷偷摸摸的重定向

一般来说，sneaky-redirection, or cloaking 是不受欢迎的，如果被发现会带来搜索引擎排名惩罚 - 这通常是好的，因为否则不法分子会在各处利用它而不受惩罚。除了你的动机之外的所有判断（我相信这是无可非议的）客户端 javascript 重定向 是你最好的选择。服务器端解决方案，如PHP library，可用于向机器人屏蔽内容，但这会产生新问题。 setTimeout 结合 window.location.href（仍然是 Angular 2+ 中的方式）或动态编写的元标记，如 <meta http-equiv="refresh" content="2;url=http://example.com/" />

重定向细微差别...

缓解整个问题的一种方法是在这些重定向页面上提供最少的内容。除了应该为链接预览设置（即使是动态地）的开放图形标签之外，您还可以将重定向视为插页式广告 - 可能是一个 15 秒的品牌消息，之后会解析为重定向。这可能会稍微安抚一下 Google 之神，增强您的品牌并解决问题。

链接预览是如何生成的？

链接预览是通过open-graph tags 生成的，它们已经（或正在@share-time）编入索引。您的 Angular 脚本需要将这些标签写入每个（重定向）页面的网页标题，例如 <meta property="og:title" content="{{og.title}}" />。这个article 介绍了众多可用的 og 标签，但基本上它们看起来像这样：

<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Open Graph Protocol for Facebook explained with examples" />
<meta property="og:description" content="What is Open Graph Protocol and why you need it? Learn to implement Open Graph Protocol for Facebook on your website. Open Graph Protocol Meta Tags." />
<meta property="og:url" content="https://www.optimizesmart.com/how-to-use-open-graph-protocol/" />
<meta property="og:site_name" content="Optimize Smart" />
<meta property="article:publisher" content="https://www.facebook.com/optimizesmart/" />
<meta property="article:section" content="Facebook Tracking" />
<meta property="og:updated_time" content="2021-06-22T14:17:32+01:00" />
<meta property="og:image" content="https://www.optimizesmart.com/wp-content/uploads/2010/07/open-graph-protocol.jpg" />
<meta property="og:image:secure_url" content="https://www.optimizesmart.com/wp-content/uploads/2010/07/open-graph-protocol.jpg" />
<meta property="og:image:width" content="711" />
<meta property="og:image:height" content="309" />
<meta property="og:image:alt" content="Open Graph Protocol" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="#Open #Graph #Protocol for #Facebook explained with examples" />
<meta name="twitter:description" content="What is Open Graph Protocol and why you need it? Learn to implement Open Graph Protocol for Facebook on your website. Open Graph Protocol Meta Tags." />
<meta name="twitter:site" content="@optimizesmart" />
<meta name="twitter:creator" content="@optimizesmart" />
<meta name="twitter:image" content="https://www.optimizesmart.com/wp-content/uploads/2010/07/open-graph-protocol.jpg" />

但我的应用程序都是 javascript 生成的 - 我如何创建一个可索引的页面来托管我的开放图形标签？

您可以使用 Prerender 等无头动态呈现服务来索引您的页面。我将它们用于我的 Angular 应用程序，效果很好。他们有不同协议的库，用于将您的内容缓存到他们的服务 - 对我来说，只要我想更新有问题的缓存页面，只需更新我的 .htaccess (apache) 并发送对他们 API 的调用即可。 .htaccess（如下所示）在页面访问时自动索引我的内容，但我发现我必须预设缓存页面，因为人们在没有访问的情况下链接到它们 - 或者因为我已经更新了页面并需要刷新缓存。在 PHP 中，就是这么简单：

  function cachePrerenderUrl($url_to_cache) {
    $url = "http://api.prerender.io/recache";
    $token = "***************";
    $data = array(
        "prerenderToken" => $token,
        "url" => $url_to_cache,
    );
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_USERPWD, '*******:********');
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_TIMEOUT, 30);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
    $result = curl_exec($ch);
    curl_close($ch);
    return $result;
}

.htaccess 看起来像这样：

<IfModule mod_proxy_http.c>
        RewriteCond %{HTTP_USER_AGENT} baiduspider|facebookexternalhit|twitterbot|rogerbot|linkedinbot|embedly|quora\ link\ preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator [NC,OR]
        RewriteCond %{QUERY_STRING} _escaped_fragment_
         RewriteCond %{REQUEST_URI} /n/
        # Only proxy the request to Prerender if it's a request for HTML
        RewriteRule ^(?!.*?(\.js|\.css|\.xml|\.less|\.png|\.jpg|\.jpeg|\.gif|\.pdf|\.doc|\.txt|\.ico|\.rss|\.zip|\.mp3|\.rar|\.exe|\.wmv|\.doc|\.avi|\.ppt|\.mpg|\.mpeg|\.tif|\.wav|\.mov|\.psd|\.ai|\.xls|\.mp4|\.m4a|\.swf|\.dat|\.dmg|\.iso|\.flv|\.m4v|\.torrent))(index\.php)?(.*) http://service.prerender.io/%{REQUEST_SCHEME}://%{HTTP_HOST}/$3 [P,L]
    </IfModule>

【讨论】：