Question

如何检查特定URL字符串是否来自与当前页面相同的源/主机？例如，如果我想绑定到链接，但只防止链接到同一主机的默认值...

Answer 1

来自RFC 6454的Origin定义：

粗略地说，两个URI是相同的一部分如果它们具有相同的原点（即代表相同的原则）方案，主机和端口。

所以我们需要比较来自两个URI的方案，主机和端口，如果它们相同，则这两个URI是相同的原点。

正在运行的代码段：

function isOriginSameAsLocation(url) {
  var pageLocation = window.location;
  var URL_HOST_PATTERN = /(\w+:)?(?:\/\/)([\w.-]+)?(?::(\d+))?\/?/;
  var urlMatch = URL_HOST_PATTERN.exec(url) || [];
  var urlparts = {
      protocol:   urlMatch[1] || '',
      host:       urlMatch[2] || '',
      port:       urlMatch[3] || ''
  };

  function defaultPort(protocol) {
     return {'http:':80, 'https:':443}[protocol];
  }

  function portOf(location) {
     return location.port || defaultPort(location.protocol||pageLocation.protocol);
  }

  return !!(  (urlparts.protocol  && (urlparts.protocol  == pageLocation.protocol)) &&
              (urlparts.host     && (urlparts.host      == pageLocation.host))     &&
              (urlparts.host     && (portOf(urlparts) == portOf(pageLocation)))
          );
}

Answer 2

这是一个简单的jQuery代码段，它将仅在单击外部URL链接时调用的事件上CONDITION。

评估URL的逻辑是：

跳过本地路径
如果完整网址和主机相同则跳过

我认为这将适用于许多简单的用例。

preventDefault()

Answer 3

假设您当前页面的链接是：

<a href="current.html" id="redirect">HomePage</a>

您点击随机链接：

<a href="random.html" id="rdm">HomePage</a>

然后编写一个javascript函数：

＆＃13;

function check(){
  if(document.getElementById("rdm").toString().indexOf("current")<0){
                 
    // do something  
         
    /*If it returns a negative value it means that the link we
     clicked does not contain the string 'current'(as our host is 
     current.html) i.e.the link is not our host link */
  else{
  
            // do something else
      }

＆＃13;

希望它有所帮助。

Answer 4

你可以parse each link，然后比较＆＃34;主机名＆＃34;由window.location.hostname返回的组件。

＆＃13;

;(function(){
    "use strict";
    
    var parseUrl = function(link){
        var a = document.createElement('a');
        a.href = link;
        return a;
    };
    
    var isSameOrigin = function(url1,url2) {
        return (url1.hostname === url2.hostname);
    };
    
    var localClick = function(ev){
        ev.preventDefault();
        alert('you clicked a local link');
    };
    
    var currentPage = window.location || window.document.location;

    document.addEventListener('DOMContentLoaded',function(){
        
      var els = document.querySelectorAll("a");
      for (var i=0;i<els.length;i++) {
          var el = els[i];        
          var othercell = el.parentNode.nextSibling.nextSibling;
          var isLocal = isSameOrigin( parseUrl(el.href), currentPage );
          othercell.innerHTML = isLocal;
          if (isLocal) {
             // now bind to the element
             el.addEventListener('click',localClick);  
          }
      }
    
    });
  
})();

＆＃13;

th {
  text-align: left; background-color: #ddd;
}

＆＃13;

<table>
  <tr>
      <th>link</th>
      <th>is same origin?</th>
  </tr>
  <tr>
      <td><a href="http://varsity.com">Varsity</a></td>
      <td></td>
  </tr>
  <tr>
      <td><a href="http://google.com">Google</a></td>
      <td></td>
  </tr>
  <tr>
      <td><a href="http://stacksnippets.net">Stack Snippets</a></td>
      <td></td>
  </tr>
  <tr>
      <td><a href="http://jsfiddle.net">JS Fiddle</a></td>
      <td></td>
  </tr>
  <tr>
      <td><a href="http://null.jsbin.com">JS Bin</a></td>
      <td></td>
  </tr>	  
</table>

＆＃13;

这是js bin上的相同代码：

http://jsbin.com/cigewa/1/edit?js,output

Answer 5

didxga的答案应该在客户端上花费更少的精力，而code monk的答案将我带到一个更干净的解决方案。

function doSomething(url) {
  // assuming we are in a function where we want to check the same origin
  var link = document.createElement('a');
  link.href = url;
  if (link.host !== location.host) {
    alert('url is invalid');
    return;
  }

  // do something...
}

请注意，我将window.location与location一起使用。您可能需要支持无法实现该功能或在父作用域中具有位置变量的浏览器。

Answer 6

这是一个简短但有效的解决方案，是在发现“检查锚标签的主机”方法在IE11中不起作用之后提出的：

  function sameSite(uri) {
    var matches = uri.match(/^(https?:)?\/\/([^\/]+)/);
    if (!matches) {
      // If URI is not absolute or protocol-relative then it is always same-origin
      return true;
    }
    return window.location.host === matches[2];
  };

如果uri引用与当前页面相同的站点（主机和端口相同），则返回true。跨浏览器的实施，至少回溯到IE11。

关于端口号，只要URI在不明确指定端口号为80（HTTP）或443（HTTPS）时是一致的，这将是匹配的，通常是这样，所以我不必理会特殊逻辑，用于在默认端口显式或非显式时处理默认端口。我认为这不太可能在实践中出现，但是如果您需要的话，这里还有其他答案。

Answer 7

这是一个更现代的版本：

function sameOrigin(uri1, uri2=false){
  if(!uri2) uri2 = window.location.href;
  uri1 = new URL(uri1);
  uri2 = new URL(uri2);
  if(uri1.host !== uri2.host) return false;
  if(uri1.port !== uri2.port) return false;
  if(uri1.protocol !== uri2.protocol) return false;
  return true;
}

console.log(sameOrigin("https://google.com"));
console.log(sameOrigin("https://stacksnippets.net"));

Answer 8

您可以使用http://example.com/hello-world从window.location.host获取当前页面的主机IE example.com。有了它，你可以看到一个字符串，IE是要测试的URL，包含该字符串。

   function sameOrigin( url ) {
        var host = window.location.host;
        var sameOrigin = url.indexOf(host);
        if ( sameOrigin >= 0 ) {
            return true;
        }
    }

javascript如何检查网址是否与当前网页相同？

8 个答案: