no javascript

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創設者ジミー・ウェールズからのありがとうございました

< 寄付！！