no javascript
DESCRIPTION
Java-ja.js #2での発表資料TRANSCRIPT
NO JAVASCRIPT絶対に.js書かずに解決する
遅刻してすいません + 今電車で資料書いてきましたすいません
僕
Sho Kusano / rosylilly
ドワンゴエンジニア
最近の主な業務は生放送プロデューサー
18歳 + 髪の毛 = 2重の意味で青い
!
ニコニコでプレミ
アム会員になろう
!
今日の話題
障害が起きました
Javascriptはもう書きたくない
なんかうまいこと解決しろ!
仕事やめたくなった日
2010.10.29
ニコニコ動画(原宿)がリリース
(9)バージョンに戻せる
なんか(9)でiPadプレーヤー動かないですけど
ありがたいユーザー様の声
ありがたいユーザー様の声
症状
とりあえずページ見れるは見れる
プレーヤーも表示はされてる
だけど動画もコメントもずっとロード中……
原因
XHRがクロスドメイン通信に失敗してるわ
Access-Control-Allow-Originの設定ミスってるわ
あ、これなんか時間かかるパターンのアレだわ
JSでクロスドメインの仕組み
XHR Lv2
Cookie付きでクロスドメインするには制約が
withCredentials = trueしないといけない(JS側)
Access-Control-Allow-Originに*とか指定できない(サーバー側
もちろん*.nicovideo.jpとかも書けない
設定を見直す
Apacheの設定を見直す
Access-Control-Allow-Origin: www.nicovideo.jp
(9)バージョンはnine.nicovideo.jp
動くわけねーわ
安直にwww.nicovideo.jp, nine.nicovideo.jpとかしてみた
なんか動かんわ
仕様とかあんま知らんわ
英語読みたくない
英語読みたくない
できるできる詐欺
仕様が見つかりました
XMLHttpRequest Level 2
http://www.w3.org/TR/XMLHttpRequest2/
Cross-Origin Resources Sharing
http://dev.w3.org/2006/waf/access-control/
The Web Origin Concept
http://tools.ietf.org/html/draft-abarth-origin-09
かいつまんで
クロスドメインのリソースにアクセスするにはOriginをしっかり絞らないとクッキーは渡せないよ
Allow-Originの書き方はThe Web Origin Cenceptを見てね
こんな感じのBNFで書くよ!
Origin Cencept
origin = "Origin:" OWS origin-list-or-null OWSorigin-list-or-null = "null" / origin-listorigin-list = serialized-origin *( SP serialized-origin )serialized-origin = scheme "://" host [ ":" port ] ; <scheme>, <host>, <port> productions from RFC3986
例:Access-Control-Allow-Origin: http://www.nicovideo.jp http://nine.nicovideo.jp
やったー!動い
やったー!動い
信じられるのは自分だけ
仕様通りに書いたのに
なんか動かない
モダンブラウザ的には空白で複数記述とかないらしい
「別に一個指定できたらええやろ」
あぱーっち
もう信用出来るのはApacheしかない
絶対.jsに手を入れずに解決する
Apacheのコンフィグさえあればなんとかなる
要件整理
www.から来たらwww.、nine.からきたらnine.を許可してほしい
そのへんの振り分けはうまいことしてほしい
iPad Safariで動けばいい
挙動をみなおす
あれ、なんかアクセス元のOriginがヘッダにある
なんかこれうまいこと使えばいけるのでは
いけるいける!
黒魔法3分クッキング
きょうのレシピ
Apache : 1つ
mod_header : おおさじ2杯
mod_setenvif : こさじ1杯
mod_header
レスポンスにヘッダが足せる皆使うアレ
Header set X-Auth trueとかやる
これでヘッダを付ける
設定内容を可変に
なんかうまいこと変われ
Header set Access-Control-Allow-Origin “${ENV}e”
これで環境変数ENVの中身が設定される
mod_setenvif
条件付きで環境変数をセットする
正規表現で上手にマッチするとよいのでは
やってみる
正規表現
全部許可すると危ないからね
SetEnvIf Origin “(.*\.nicovideo\.jp)$” ORIGIN=$1
上手に入りました
ついでに
Originとか来てない時はこのヘッダ消しとこう
無駄なヘッダは省くよー
Header set Access-Control-Allow-Origin “${ORIGIN}e” env=ORIGIN
ということで3行書いた
でぷろい
うごけー
うごいた
対応完了
だいたい4時間くらいかかった
解決してみればなんてこたない
あーマジ余裕だったわーマジもう起こる前から解決してたわー
教訓
無理に.jsで解決しない
ぶっちゃけ4時間格闘してたのは.jsでなんとかしてたから
素直にApacheに頼ればすぐ終わった
トリッキーな手法じゃなくても解決できればよい
仕様ちゃんと読んでもダメ
仕様とかうそつき
信用ならない
実際にどう動くかをちゃんと検証する
諦めない
もっと楽にできるはずだという強い意志
絶対にコード書きたくないという決意
コンピューターうまいことなんとかしろという信念
Wikipedia創設者ジミー・ウェールズからのありがとうございました
< 寄付!!