编辑 - 安全风险

Question

在我的网络应用程序中，用户可以将文本发布到Feed，文本可能包含网址。我的代码扫描URL并替换它们指向URL的锚标签。我想更改此设置，以便我的代码可以检测URL是否指向图像，如果是，则在锚标记内呈现图像标记，而不仅仅是URL文本。

我可以在服务器端代码上执行此操作，方法是向URL发送一个快速的“HEAD”请求，以查看响应中Content-Type的内容，并且这可以正常工作。但是，由于显而易见的原因，它不能很好地扩展。

如果我可以将此逻辑推送到客户端的浏览器上，那会更好。我想使用JavaScript + jQuery将'HEAD'请求发送到指定的URL，并从响应中读取Content-Type标头。

我知道跨域请求是个问题。我可以以某种方式使用JSONP吗？我有什么选择？

编辑 - 安全风险

我的问题得到了一些很好的答案，但我想用大胆的字母指出一些东西。正如亚当在评论中指出的那样，这是一种安全隐患。如果您可以保证图像的URL都来自可信域，那么您最好使用此解决方案。但是，在我的场景中，用户可以输入他们想要的任何URL。这意味着他们可以创建自己需要基本身份验证的站点，然后当jQuery运行以在创建的图像上设置src属性时，会向用户显示用户名/密码对话框，这显然是巨大风险。

Answer 1

您可以尝试将其加载到隐藏的img元素中：

$('<img />').attr('src', url).load(function () { 
    alert('url contains an image'); 
}).error(function () {
    alert('url is no image');
});

Answer 2

您可以创建一个javascript Image对象，您将尝试加载所有链接：

myImageObject = new Image();

// handle an URL
myImageObject.onload = function(e) {
    alert('it is an image');
}

myImageObject.src = 'http://www.google.bg/images/srpr/logo3w.png';

jsFiddle example

Answer 3

检查他们给你的字符串是否以.jpg，.png，.gif等结尾。如果它以任何扩展名结束，就像它的图像一样。如果不是它，它是一个普通的URL。

Answer 4

试试这个：

使用AJAX加载URL，然后调用getResponseHeader（）以获取内容类型。

在jQuery中：

$.ajax({
  url: "www.example.com/SomeImage.jpg",
  success: function(output, status, xhr) {
    if(xhr.getResponseHeader("Content-Type")== "image/jpeg") {
      // insert image into page
    }
    else {
      // render url text
    }
  }
});

Answer 5

您可以使用XMLHttpRequestObject.open("HEAD", url);和XMLHttpRequestObject.getAllResponseHeaders();使用ajax调用获取标头信息，但这仅适用于您自己的域或Access-Control-Allow-Origin:标头设置。

JSONP使用script标记，我很确定它无法获取任何标题信息。

如何使用JavaScript + jQuery确保URL是图像？

编辑 - 安全风险

5 个答案: