如何执行ajax调用链接的跨域 html页面,并获得此链接页面的元标记的内容?
目标是获得例如OpenGraph-Image的URL -就像Facebook或Google+正在做的那样-从任何可能的URL/网站。我交付URL (decURL
),然后脚本应该从这个远程URL/页面的元数据中获得og:image-URL。
下面的代码只适用于相同的域/本地-但我需要它跨域工作,所以我可以输入任何URL,脚本将得到我的og:image…
$.get(decURL, function(data){
var $ogImage = $(data).filter("meta[property='og:image']").attr('content');
$imgPlaceholder.prepend($articleImage.attr('src',$ogImage));
$imgField.val($ogImage);
});
出于安全原因,大多数浏览器都有意限制这种功能(请阅读同源策略,它旨在限制的一些攻击类型- XSS和CSRF -以及绕过它的方法,包括CORS,如果您控制了两个服务器环境)。
既然你不属于按书办事的范畴,通过实现CORS等,你必须走很长的路。从本质上讲,为了能够抓取任何站点的元数据,您需要从服务器进行抓取。
在这种情况下,服务器实际上是一个客户端,因此不会受到这些策略的限制(听起来很混乱,但基本上服务器以与浏览器客户端完全相同的方式向另一个服务器请求页面)。
根据你想做的事情,你可能想让它作为一个代理或作为一个单独的应用程序。
作为一个独立的应用程序,你会写一个简单的脚本,运行在服务器上的某个地方,并为你做扫描,把结果在数据库在你自己的环境,你的浏览器可以访问(这或多或少是Facebook的方式)。
作为代理,您将编写类似的脚本,但不是由cron作业或基于时间的触发器触发,并将结果保存在DB中,而是由来自前端的请求触发,去抓取另一个页面,扫描元数据,然后将其返回给浏览器客户端。
这样做的主要缺点是每次请求时都会给服务器增加额外的负载,这意味着您需要小心不要使主机环境过载。这大概就是为什么FB等会走"服务器应用"路线的原因。
这听起来很痛苦,但实际上把它放在一起是相当微不足道的,如果你想能够扫描任何东西,而不仅仅是你自己做的或可以让别人配置的东西,真的没有别的选择。