2015/04/07
PHPを使わずにmetaタグやogタグを取得する方法
あらゆるサイトのHTMLをパースしてデータ(画像やmeta、ogなど)を取得したかったのだが
1つのサービスから特定のサイトを何回もこのような形でアクセスすると、ブロックされてしまう可能性が高いので
クライアント側からアクセスすることができないかと思い、サンプルを作ってみた。
基本的にjsでクロスドメインの処理はできないので、今回は
jquery.xdomainajax.js
をつかって制限を回避した。
ダウンロードはこちら
https://github.com/padolsey-archive/jquery.fn/tree/master/cross-domain-ajax
JSの読み込み
|
1 2 | <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/jquery.xdomainajax.js"></script> |
クロスドメインは意識せず、単純にjquery.xdomainajax.jsを読み込むだけでよい。
指定したデータを取得
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | $.ajax( { type: 'GET', url: ”http://hogehoge.com/index.html", complete: function( d ) { // そのままだとheadタグ内を取得できないのでdivで囲う var r = $( "<div>" + d.responseText + "</div>" ); // title $( "#title" ).val( r.find( "title" ).html() ); // description $( "#description" ).val( r.find( "meta[name='description']" ).attr( "content" ) ); // keywords $( "#keywords" ).val( r.find( "meta[name='keywords']" ).attr( "content" ) ); // ……………省略 // icon $( "#icon" ).val( r.find( "link[rel='icon']" ).attr( "href" ) ); // apple-touch-icon-precomposed $( "#apple-touch-icon-precomposed" ).val( r.find( "link[rel='apple-touch-icon-precomposed']" ).attr( "href" ) ); } } ); |
見てもらうとわかるが、jQueryのセレクタでクロスドメインのデータを取得することができる。
すごく簡単で便利なのだが、1つ注意点としては、
クロスドメインは必ずしも安全ではないということ。
特に今回のようにユーザーにドメインを指定させてアクセスさせる場合
間違って悪意あるサイトにアクセスしてしまえば、サーバーやユーザーに影響が出ることも考えられる。
しかもユーザーとしてはこちらが用意したプラットフォーム上でのアクションという認識なので
悪いのはこちら側となる。
jquery.xdomainajax.jsはYQLというYahoo!のAPIを使用しているということも
一応知った上で利用したほうがよいだろう。
Author Profile
SHARE
