URLチェックについて

Question

javascriptでURLをチェックする関数を作成したのですが、URLの形式ではないものがチェックを通過してしまっている状況です。
以下のような形でcheck_url関数に対して、http://gdnoalgadaなどの文字列を検査してもtrueとなってしまいif文内の条件式の中が実行されませんでした

if (!check_url('http://gdnoalgada')){
console.log('hogehoge')
}
 check_url(url) {
        let re = /https?://[-_.!~*'()a-zA-Z0-9;/?:@&=+$,%#\u3000-\u30FE\u4E00-\u9FA0\uFF01-\uFFE3]+/g;
        return re.test(url);
      },

こちらの問題を解消する方法につきまして、ご助言頂けましたら幸いです

※追記
URLの定義としましては、WEBサイトのアドレスを想定し、「.com」や「.jp」,「.net」などのトップレベルドメインがついているものに限定したいと考えています

Comments

[m.ts10806]

「どこまでをURLとして受け入れるか」を定義しないといけないのでは。
例示のものだけだと抜けが出るように思います。実際問題、http://localhostのようなものもあるわけですし。

[m.ts10806]

個人的には「URL インターフェイスで解析できないもの」にするかなと。
https://developer.mozilla.org/ja/docs/Web/API/URL
正規表現使わなくて良いですし。（例示のものはtrueです。）

[jjj001]

なるほど！
しかしフィルターの制限を「 URL インターフェイスで解析できないもの」とした場合、http://testこちらのようなアドレスが通ってしまう点が問題なのですよね。。

[yambejp]

http://192.168.1.1
的なIPアドレスしてもダメなのでしょうか？

[jjj001]

> http://192.168.1.1
そうですね...
URLの打ち込みでIPアドレスを直打ち込みする人は少ないと思うので、今回の仕様からははずそうと思っています

Answer 1

new URL

new URL を利用して検証。

'use strict';
function sample1 (string) {
  const url = new URL(string);

  switch (url.protocol) {
    case 'https:':
    case 'http:':
      const hostname = url.hostname;
      const i = hostname.indexOf('.');
      return i !== -1 && i !== 0 && i !== hostname.length - 1;
  }

  return false;
}

console.assert(sample1('http://localhost') === false);
console.assert(sample1('https://.foo') === false);
console.assert(sample1('https://bar.') === false);
console.assert(sample1('http://example.com') === true);
console.assert(sample1('https://baz.example') === true);
console.assert(sample1('ftp://example.com') === false);

<input type="url">

<input type="url"> を利用して検証。

• 4.10.5.1.4 URL状態（type=url） - HTML Standard 日本語訳

'use strict';
const sample2 = ((baseInput)=>{
  return function sample2 (string) {
    const input = baseInput.cloneNode(false);
    input.value = string;

    return input.validity.valid;
  };
})((()=>{
  const input = document.createElement('input');

  input.type = 'url';
  input.pattern = 'https?://[^#?/.]+\..+';

  return input;
})());

console.assert(sample2('http://localhost') === false);
console.assert(sample2('https://.foo') === false);
console.assert(sample2('https://bar.') === false);
console.assert(sample2('http://example.com') === true);
console.assert(sample2('https://baz.example') === true);
console.assert(sample2('ftp://example.com') === false);

正規表現

正規表現でも実装できますが、非常に複雑化する為、お勧めしません。
簡略化を試みる場合は妥協が必要になります。

• rfc3986.js - GitHub Gist

<script src="./rfc3986.js"></script>
<script>
'use strict';
function sample3 (string) {
  const rfc3986 = new RFC3986;

  return new RFC3986().isAbsoluteURI(string) && /https?://[^#?/.]+..+/.test(string);
}

console.assert(sample3('http://localhost') === false);
console.assert(sample3('https://.foo') === false);
console.assert(sample3('https://bar.') === false);
console.assert(sample3('http://example.com') === true);
console.assert(sample3('https://baz.example') === true);
console.assert(sample3('ftp://example.com') === false);
</script>

Re: jjj001 さん

Comments

[jjj001]

ご丁寧、ご親切にご回答頂きありがとうございます。
せっかくご回答くださったのに、今更ながら申し上げるのは本当に、申し訳ないのですが実は「http://」はついておらずとも、簡単にユーザーにURLを入力させる為、ページスピードインサイトhttps://developers.google.com/speed/pagespeed/insights/ のような形でドメインのみで判定できるようにしたいと考えておりました。
その為、think49さんに頂いた回答を元に以下のように作成してみました

const inputUrl = 'http://test.com'
const test = isHttpUrlWithDomain(inputUrl)
console.log(test)

function isHttpUrlWithDomain (string) {
let re = /^http(|s)://.+/;
let isProtocol = re.test(string);
if(isProtocol){
console.log(string)
const url = new URL(string);
return url.hostname.includes('.');
}else{
console.log(string)
checkUrl = 'http://' + string
const url = new URL(checkUrl);
return url.hostname.includes('.');
}

}

こちら、一点問題があるのですが、仮に「inputUrl 」の値が「test.」であった場合、ドットと記入されている為、「test」の値は「true」となってしまいます。
こちら細かくやればきりがないかもしれないのですが、ここまでは気にする程ではありませんでしょうかね...?

[think49]

「https://.foo」と「https://bar.」をNGにする事は <input type="url"> と「正規表現」のコードでは実装できていました。
new URLのコードでも同様に扱うには、indexOfで "." の位置を検出すれば良いでしょう(修正済)。

> http://」はついておらずとも、簡単にユーザーにURLを入力させる

index.html が http://index.html になるので、TLDをホワイトリストで指定するなりしないと誤検出する気はします。

[jjj001]

ありがとうございます！
> index.html が http://index.html になるので、TLDをホワイトリストで指定するなりしないと誤検出する気はします。
こちらそうですね。index.htmlとなってしまう点は、関数が複雑になってしまうような気がしていて、どうするか要検討かなと思っています...
自分は、修正頂いた「new URL」を使った形、プラスドメインのみで検索(httpをつけず検索可能）できる方法で実装できたらと考えているのですが、正規表現だとコード量的には少ないので、どちらにするか迷う所ですね...
ただ正規表現のコードとinpu type=urlを用いたコードはほとんど分かっていないので、それを実装するのもどうなのかなというのはあります...

[jjj001]

一旦は、new URLの形で実装してみて、「http://index.html 」こちらのような形は一旦許容する形で実装し、ホワイトリストを作成するかどうかは後々検討していきたいと思います

[jjj001]

new urlのロジックで少々気になったのですが、「 i !== hostname.length - 1　」こちらでは何に対するチェックを行っているのでしょうか...?

[think49]

不明点があれば、まずはリファレンスを確認してください
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
String.prototype.indexOf() は、値が見つからない場合は -1 を返します。
"http://example" で false を返すには、この判定が必要になります。