Xiangpianでは、「操作される側」のXiangpianへの接続方法を2つ用意しています。また、XiangpianのWebSocketのURLの指定方法も2つあります。
接続方法
接続方法のひとつは前回紹介したブックマークレットです。
もうひとつはscript要素を使った方法になります。IPアドレスが、「192.168.0.10」の端末でXiangpianを起動した場合を例に説明します。「http://192.168.0.10:40320/」にブラウザでアクセスすると、設定をするための情報が表示されます。その中の「script tag code」に以下のようなHTMLが出力されています。
<script type="text/javascript" src="http://192.168.0.10:40320/execute.js" data-xiangpian-execute-url="ws://192.168.0.10:40320/ws/" data-xiangpian-execute_from="script_tag"></script>
これを開発中のHTML内に組み込むことで、常にXiangpianを実行することができるようになります。例えば、Ruby on Rails等で、development環境の時だけ出力させる等の使い方を想定しています。後述しますが、セキュリティで気をつけなければならない点がありますので、本番環境に出力されないようにしてください。
ブックマークレットによる接続とscript要素による接続には以下のような違いがあります。
・ブックマークレット
・ソース変更なしで操作することが可能
・管理下にないページでも実行が可能
・ページ遷移のたびにブックマークレットを実行する必要がある
・実行時に一時的にscript要素が挿入されるが、すぐに削除されるため影響が少ない
・Xiangpianの接続先がブックマークレットを登録した時のアドレスに固定される(例外あり/後述)
・script要素
・ページ遷移があっても常に実行される
・ソースの変更が必要
・ソースが管理下にないと使用できない
・本来のHTMLに比べscript要素が増えるため、挙動に影響がでる可能性がある
・Xiangpianの接続先をサーバ側で動的に変更することができる
実際に出力されるscript要素は、カスタムデータ属性「data-xiangpian-execute_from」の値が違うだけでほとんど同じです。
ブックマークレットによる接続とscript要素による接続には以下のような違いがあります。
・ブックマークレット
・ソース変更なしで操作することが可能
・管理下にないページでも実行が可能
・ページ遷移のたびにブックマークレットを実行する必要がある
・実行時に一時的にscript要素が挿入されるが、すぐに削除されるため影響が少ない
・Xiangpianの接続先がブックマークレットを登録した時のアドレスに固定される(例外あり/後述)
・script要素
・ページ遷移があっても常に実行される
・ソースの変更が必要
・ソースが管理下にないと使用できない
・本来のHTMLに比べscript要素が増えるため、挙動に影響がでる可能性がある
・Xiangpianの接続先をサーバ側で動的に変更することができる
実際に出力されるscript要素は、カスタムデータ属性「data-xiangpian-execute_from」の値が違うだけでほとんど同じです。
ブックマークレット
<script
type="text/javascript"
src="http://192.168.0.10:40320/execute.js"
data-xiangpian-execute-url="ws://192.168.0.10:40320/ws/"
data-xiangpian-execute_from="bookmarklet"
></script>
type="text/javascript"
src="http://192.168.0.10:40320/execute.js"
data-xiangpian-execute-url="ws://192.168.0.10:40320/ws/"
data-xiangpian-execute_from="bookmarklet"
></script>
blog向けに整形しています
script要素
<script
type="text/javascript"
src="http://192.168.0.10:40320/execute.js"
data-xiangpian-execute-url="ws://192.168.0.10:40320/ws/"
data-xiangpian-execute_from="script_tag"
></script>
type="text/javascript"
src="http://192.168.0.10:40320/execute.js"
data-xiangpian-execute-url="ws://192.168.0.10:40320/ws/"
data-xiangpian-execute_from="script_tag"
></script>
blog向けに整形しています
WebSocketのURLの指定方法
ブックマークレットでもscript要素でも、script要素のカスタムデータ属性「data-xiangpian-execute-url」で指定されたURLにWebSocketで接続します。
しかし、WebSocketの接続先を一時的に変更することも可能です。例えば、「http://www.kanasansoft.com/」を表示している時、WebSocketの接続先を「ws://xiangpianserver:40320/ws/」に変更したい場合、URLパラメータの「execute_xiangpian_url」にURLを指定することで接続先を変更することができます。具体的には、以下のURLにブラウザでアクセスすると、接続先が変更されます。
http://www.kanasansoft.com/?execute_xiangpian_url=ws://xiangpianserver:40320/ws/
しかし、WebSocketの接続先を一時的に変更することも可能です。例えば、「http://www.kanasansoft.com/」を表示している時、WebSocketの接続先を「ws://xiangpianserver:40320/ws/」に変更したい場合、URLパラメータの「execute_xiangpian_url」にURLを指定することで接続先を変更することができます。具体的には、以下のURLにブラウザでアクセスすると、接続先が変更されます。
http://www.kanasansoft.com/?execute_xiangpian_url=ws://xiangpianserver:40320/ws/
セキュリティ
ここまで読んで気づいた人もいるかと思いますが、URLパラメータに「execute_xiangpian_url」を指定されていることに気づかずにブックマークレットを実行してしまった場合等、情報が外部に送信されてしまう可能性があります。例えば、「https://mail.google.com/mail/?execute_xiangpian_url=ws://crackerserver:40320/ws/#inbox」というリンクにアクセスして、ブックマークレットを実行してしまうと、gmailのデータが丸見えになってしまいます。また、「https://localhost/?execute_xiangpian_url=ws://crackerserver:40320/ws/」のような場合でも、ローカルで開発中のアプリケーションの情報が丸見えになってしまう可能性があります。接続先URLの上書き機能は開発向けツールならではなのですが、メリットよりもデメリットが大きいと判断した場合、将来のバージョンでは削除するかもしれません。この辺は、セキュリティの人の意見を聞いてみたいですね。