LoginSignup
1
1

More than 5 years have passed since last update.

google url-shortener

Last updated at Posted at 2018-04-06

keyさえ取得すれば短縮化は簡単。

let surl=async function(longUrl){
 //https://developers.google.com/url-shortener/v1/getting_started => GET A KEY
 let key='AIzaSyBDlJ8GkS0EFoQeOt7lGheXXXXXXXXXXX'
 ,url=`https://www.googleapis.com/urlshortener/v1/url?key=${key}`
 ,opt={method:'post',headers:{'Content-Type':'application/json'},body:JSON.stringify({"longUrl":longUrl})}
 ,ret =await fetch(url,opt).then(d=>d.json())
 ;
 document.querySelector('pre').innerHTML=JSON.stringify(ret,null,2);
 //{"kind": "urlshortener#url", "id": "https://goo.gl/rS325r", "longUrl":...}
}
function a(){ surl(document.querySelector('input').value) }
<input style="width:50vw"></input><button onclick="a()">go</button><pre></pre>

履歴やアクセス数を取得するためにはoauthが必要。oauth.io経由が楽。

追記 復元はkeyでよい。

let unsurl=async function(shortUrl){
 let key=localStorage.getItem('shortenerKey')
 ,url=`https://www.googleapis.com/urlshortener/v1/url?key=${key}&shortUrl=${shortUrl}&projection=full`
 ,opt={method:'get',headers:{'Content-Type':'application/json'}} ////method the get
 ,ret =await fetch(url,opt).then(d=>d.json())
 ;
 document.querySelector('pre').innerHTML=JSON.stringify(ret,null,2);
}
//
function b(){ unsurl(document.querySelector('input').value) }
<input style="width:50vw"></input><button onclick="a()">s</button><button onclick="b()">l</button><pre></pre>

追加 検証分

  • redirect先が画像であれば<img src="https://goo.gl/D56q5x"></img>が通用する。
  • url('....')というURLは、invalid value
  • data:image/png;base64というURLも、invalid value
  • 上手く偽装し、https://data/image/png/base64/....に変えると通る。 但し <img src="https://data/image/png/base64/..."></img>は画像として認識しない。当然だがbase64imageへ多少の変換が必要。偽装した分戻す処理を加えることが出来ればストレージ化出来る。
  • https://localhost:8080 ok
  • urlのサイズ制御がかかっている。640kbの画像データは偽装しても短縮化出来ない。30*30pixelのアイコン程度なら偽装すれば可能。
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1