【Javascript】CORSを回避してAJAX通信をする

はい、とても久しぶりですね。DAFUさんです。

今年から私も大学生になったわけですが、大学の課題をいちいち見に行くのがめんどくさいのでChrome拡張で通知するようにしようとしました。

その時にCORSを回避してGETするために作ったのが元です。

CORSとは

CORSとは、Cross-Origin Resource Sharingの略で、セキュリティ機能の一つです。

これを設定すると、別ドメインからのデータの読みこみをコントロールすることが出来ます。

参考：MDN

MDN Web Docs

 

1 tweet

282 users

454 pockets

オリジン間リソース共有 (CORS)

https://developer.mozilla.org/ja/docs/Web/HTTP/CORS

オリジン間リソース共有(Cross-Origin Resource Sharing)(CORS) は、追加の HTTP ヘッダーを使用して、あるオリジンで動作しているウェブアプリケーションに、異なるオリジンにある選択されたリソースへのアクセス権を与えるようブラウザーに指示するための仕組みです。

コード

解説

簡単に言ってしまうとリファラを書き換えて同一オリジンからのリクエストに見せかけているわけですね。

普通はリファラを変えてもリクエストよりも後なのであまり意味がないのですが、AJAXの前に変えればリファラの偽装が出来るわけです。

ここで使っているのが、Object.definePropertyというメソッドです。

ここの引数にreferrerと指定することで、リファラを書き換えることが出来ます。

参考:MDN

MDN Web Docs

 

16 users

32 pockets

Object.defineProperty()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

静的メソッドの Object.defineProperty() は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。

使いどころは少ない気もしますが、簡単な小技としては割と重宝しそうです。