JavaScript 如何验证 URL

耘者發表於 2023-2-23 22:36:00

<h2 id="前言">前言</h2>
当开发者需要为不同目的以不同形式处理URL时，比如说浏览器历史导航，锚点目标，查询参数等等，我们经常会借助于JavaScript。然而，它的频繁使用促使攻击者利用其漏洞。这种被利用的风险是我们必须在我们的JavaScript应用程序中实现URL验证的原因。
URL验证检查URL是否遵循正确的URL语法，也就是每个URL必须具备的结构。URL验证可以使我们的应用程序免遭基于URL的漏洞，比如恶意脚本注入和服务器端请求伪造（SSRF）。当我们在获取远程资源时没有应用安全编码惯例来验证用户提供的URL时，恶意行为者可以采用SSRF攻击。
<h2 id="url验证">URL验证</h2>
URL验证的存在是为了加强安全，防止可能存在的漏洞，并消除运行代码时产生的任何错误的机会。但是我们应该在什么时候使用URL验证，在这个过程中我们要验证什么呢？我们应该在所有必须识别和验证诸如网页、图片、gif和视频等资源的软件中实施URL验证。
一个典型的URL包括多个片段，比如协议、域名、主机名、资源名、URL源、端口等等。这些用来告诉浏览器如何追踪指定的资源。我们可以以不同的方式来验证URL：
<ul>
<li>使用正则字面量和构造函数</li>
<li>URL构造函数</li>
<li><code>isValidURL</code>方法</li>
<li>Input元素</li>
<li>Anchor标签方法</li>
</ul>
一个典型的URL验证方案接收来自用户的输入，然后对其进行解析，以识别其各个组成部分。验证方案可以确保所有的URL组件符合互联网标准。例如，如果需要，它可以检查URL是否使用安全协议。
主机名验证首先是将主机名分成独立的标签，以确保它们符合顶级域名规范。一个典型的主机名由至少两个用点分隔的标签组成。例如，www.snyk.com 有 "www"、"snyk"和 "com"的标签。每个标签只能由一个字母数字字符或一个连字符组成，无论大小写。然后，验证方案可以确保主机名与URL的允许列表相匹配，以确保只允许指定的URL，并且允许的URL不会被错误地取消资格。
默认情况下，URL中使用的大多数资源的路径都是允许的。然而，端口只能在1到65536的范围内。任何超出这个范围的东西都应该抛出一个错误。我们还可以检查数字IP地址，以判断它是一个IPV4地址还是IPV6地址。
最后，我们也可以检查URL的用户名和密码。这个功能有助于遵守公司政策和凭证保护。
现在，你已经有了这些基础知识，让我们来看看使用javascript的URL验证吧。
<h2 id="如何执行url验证">如何执行URL验证</h2>
在JavaScript中，执行URL验证最简单的方式是使用<code>new URL</code>构造函数。除此之外，它还得到了Node.js运行时和大多数浏览器的支持。
基本语法如下：
<pre><code class="language-jsx">new URL (url)
new URL (url , base)
</code></pre>
如果提供相对URL，JavaScript只需要<code>base</code>元素。如果不提供相对URL，默认为<code>undefined</code>。另外，如果提供一个具有绝对URL的<code>base</code>元素，JavaScript会忽略<code>base</code>元素。
为了验证URL，可以使用以下代码：
<pre><code class="language-jsx">function checkUrl (string) {
let givenURL ;
try {
 givenURL = new URL (string);
} catch (error) {
 console.log ("error is", error);
return false;
}
return true;
}
</code></pre>
该函数用于检查URL的有效性。当URL有效时返回<code>true</code>，否则返回<code>false</code>。
<ul>
<li>如果你传递<code>www.urlcheck.com</code>给该函数会返回<code>false</code>。因为该参数并不是一个有效的URL。正确版本应该是<code>https://urlcheck.com</code>。</li>
<li>另一个例子是<code>mailto:John.Doe@example.com</code>。这是一个有效的URL，但如果移除了冒号，JavaScript就不再认为它是一个URL了。</li>
<li>第三个例子是<code>ftp://</code>。这不是一个有效URL，因为没有包含主机名。如果你添加两个点（<code>..</code>），就会变成有效URL。因为点会被认为是一个主机名，也就是说<code>ftp://..</code>变成了一个有效的URL。</li>
</ul>
重要的是要记住，非常规的、但完全有效的URL是存在的！它们可能对从事这些工作的开发人员来说是意外的，但在其他方面是完全合适的。例如，以下两个URL都会返回真值：
<ul>
<li><code>new URL("youtube://a.b.c.d");</code></li>
<li><code>new URL("a://1.2.3.4@1.2.3.4");</code></li>
</ul>
这些例子提醒我们，开发者应该依靠URL验证原则，而不是专注于惯例。
如果你想确保有效的URL包含一些特定的URL方案，你可以使用以下函数：
<pre><code class="language-jsx">function checkHttpUrl(string) {
let givenURL;
try {
 givenURL = new URL(string);
} catch (error) {
 console.log("error is",error)
return false;
}
return givenURL.protocol === "http:" || givenURL.protocol === "https:";
}
</code></pre>
该函数验证URL，然后检查URL是否使用HTTP或者HTTPS。在这里，<code>ftp://..</code>会被认为是无效的，因为它不包含HTTP或者HTTPS，而<code>http://..</code>依旧有效。
使用<code>URL</code>构造函数的一些其他方式包括：
<pre><code>let m = '<https://snyk.io>';
let a = new URL("/", m);
</code></pre>
上述示例使用了<code>base</code>元素。记录下这个值，我们就可以得到<code>https://snyk.io/</code>。
要返回一个URL对象而不指定<code>base</code>参数的话，语法是：
<pre><code class="language-jsx">let b = new URL(m);
</code></pre>
为了给主机添加一个路径名，我们的代码结构如下：
<pre><code class="language-jsx">let d = new URL('/en-US/docs', b);
</code></pre>
存储在变量<code>d</code>上的URL是<code>https://snyk.io/en-US/docs</code>。
URL模块的另一个功能是，它实现了WHATWG URL API，它遵守WHATWG的URL标准，供浏览器使用：
<pre><code class="language-jsx">let adr = new URL("<https://snyk.io/en-US/docs>");
let host = adr.host;
let path = adr.pathname;
</code></pre>
在上面的例子中，我们创建了一个名为<code>adr</code>的URL对象。接着，代码获取URL的主机和路径名，分别是<code>snyk.io</code>和<code>/en-US/docs</code>。最后，我们可以将URL和允许列表或者黑名单进行对比，确保只有特定URL是被允许的。
<h2 id="如何使用正则验证">如何使用正则验证</h2>
另一种验证URL的方法是使用正则表达式（regex）。我们可以使用Regex来检查URL是否有效。
使用regex进行URL验证的JavaScript语法是：
<pre><code class="language-jsx">function isValidURL(string)
{
 var res =
 string.match(/(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9-
 ]+\.[^\s]{2,}|www\.+
 \.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))+\.[^\s]{2,}|w
 ww\.+\.[^\s]{2,})/gi);
 return (res !== null);
};
</code></pre>
来测试一些URL：
<pre><code class="language-jsx">var tc1 = "<http://helloworld.com>"
console.log(isValidURL(tc1));
</code></pre>
regex定义的URL语法检查URL是否以<code>http://</code>或<code>https://</code>或子域开始，以及是否包含域名。控制台上的语句结果是<code>true</code>，因为它遵循了由regex定义的URL语法。相反，下面的语句将返回一个<code>false</code>，因为它没有以任何允许的方案或子域开始，也不包含域名：
<pre><code class="language-jsx">var tc4 = "helloWorld";
console.log (isValidURL(tc4));
</code></pre>
上面的正则表达式相对简单，但仍然难以驾驭。这也是一个容易出错的方法，因为一个正则表达式不能充分处理验证URL的规则。它最多只能做到匹配有效的URL。此外，当一个正则表达式要么包含复杂的验证逻辑，要么收到冗长的输入字符串时，执行验证检查就变得很耗时。
为了满足定义的正则表达式验证检查，浏览器必须在输入字符串中进行数以百万计的回溯。如此多的回溯检查可能会导致"灾难性的回溯"，这种现象是复杂的正则表达式会冻结浏览器或使CPU核心进程爆满。
<h2 id="安全使用javascript">安全使用JavaScript</h2>
正如SSRF被添加到新的OWASP Top 10中所证明的那样，URL验证对于JavaScript应用程序的安全性已经变得越来越关键。幸运的是，我们可以通过在服务器端验证URL来帮助缓解此类攻击。此外，根据验证和处理URL的首选方式来使用<code>new URL</code>函数会非常有益。
在看到<code>new URL</code>函数的一些使用案例后，我们学习了如何用正则表达式验证一个URL--并看到了为什么这种方法很麻烦而且容易出错。
URL的安全风险与其说是关于其有效性，不如说是关于危险的URL方案。因此，我们需要确保让服务器端的应用程序进行验证。攻击者可以绕过客户端的验证机制，所以仅仅依靠它并不是解决办法。
以上就是本文的所有内容，如果对你有所帮助，欢迎点赞、收藏、转发~
<ul>
<li>本文译自：https://snyk.io/blog/secure-javascript-url-validation/</li>
<li>作者：Mannan Tirmizi</li>
</ul> 
来源：https://www.cnblogs.com/chuckQu/p/17149735.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript 如何验证 URL