├── .gitignore ├── DemonstrationScripts ├── regReplaceJs.js └── regSwitch.js ├── HelpFiles ├── Content Security Policy.md ├── ScreenShots │ ├── xylole_01.gif │ ├── xylole_boxes.gif │ ├── xylole_css.gif │ ├── xylole_info.gif │ ├── xylole_init.gif │ ├── xylole_js.gif │ ├── スクリーンショット 2016-12-23 2.15.47.png │ └── スクリーンショット 2016-12-23 2.21.28.png └── リモート簡易JSコンソール　Xylole.js　開発手記（第０章）.md ├── LICENSE ├── README.md ├── customCommands.yml ├── demoPages └── index.html ├── extra ├── hosts │ └── github-host.js └── tristana-prototype.js ├── min └── xylole-client.min.js ├── package.json ├── socketServer.js ├── src ├── assets │ ├── M-xylene_200.svg.png │ ├── Meta-Xylol_-_meta-xylene_2.svg │ ├── Musk_xylene.svg │ ├── O-xylene.png │ ├── P-xylene_200.svg │ ├── P-xylene_200.svg.png │ ├── P-xylene_topo.svg │ ├── xylole.js.png │ ├── xylole.js.svg │ └── xylole.js2.png └── scripts │ ├── socket.io-1.4.5.js │ ├── socket.io.js │ ├── xylole-client-csp.js │ └── xylole-client.js └── test ├── demo01.js ├── demo02.js ├── demo03.js └── test01.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | -------------------------------------------------------------------------------- /DemonstrationScripts/regReplaceJs.js: -------------------------------------------------------------------------------- 1 | var reg = /var serverSiteUrl \= \"(?:.*?)\"/ 2 | var fs = require('fs'); 3 | const path = require('path'); 4 | var pathToScript = path.join(__dirname, '../src/scripts/xylole-client.js'); 5 | var script = fs.readFileSync(pathToScript).toString() 6 | var newScript = script.replace(reg, function (match) { 7 | console.log(match); 8 | let newUrl = `var serverSiteUrl = "${'http://google.com'}"` 9 | return newUrl 10 | }) 11 | // console.log(newScript); 12 | -------------------------------------------------------------------------------- /DemonstrationScripts/regSwitch.js: -------------------------------------------------------------------------------- 1 | var strJs = "load js https://cdn.socket.io/socket.io-1.4.5.js" 2 | var strCss = "load css https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" 3 | var reg = /^(load|Load) (script|style|js|css) (https?|ftp)(:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+)/ 4 | 5 | function matchOrSwitch(str, reg) { 6 | switch (true) { 7 | case reg.test(str): 8 | console.log(RegExp.$0); 9 | console.log(RegExp.$1); 10 | console.log(RegExp.$2); 11 | console.log(RegExp.$3); 12 | console.log(RegExp.$4); 13 | break; 14 | default: 15 | console.log('Not Match'); 16 | } 17 | } 18 | 19 | // matchOrSwitch(str, reg) 20 | -------------------------------------------------------------------------------- /HelpFiles/Content Security Policy.md: -------------------------------------------------------------------------------- 1 | ## https://github.com 2 | 3 | ``` 4 | default-src 'none'; 5 | base-uri 'self'; 6 | block-all-mixed-content; 7 | child-src render.githubusercontent.com; 8 | connect-src 'self' uploads.github.com status.github.com collector.githubapp.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com; 9 | font-src assets-cdn.github.com; 10 | form-action 'self' github.com gist.github.com; 11 | frame-ancestors 'none'; 12 | frame-src render.githubusercontent.com; 13 | img-src 'self' data: assets-cdn.github.com identicons.github.com collector.githubapp.com github-cloud.s3.amazonaws.com *.githubusercontent.com; 14 | media-src 'none'; 15 | script-src assets-cdn.github.com; 16 | style-src 'unsafe-inline' assets-cdn.github.com 17 | ``` 18 | 19 | ## https://www.zhihu.com 20 | 21 | ``` 22 | default-src *; 23 | img-src * data: blob:; 24 | frame-src 'self' *.zhihu.com getpocket.com note.youdao.com read.amazon.cn; 25 | script-src 'self' *.zhihu.com *.google-analytics.com res.wx.qq.com 'unsafe-eval'; 26 | style-src 'self' *.zhihu.com 'unsafe-inline'; 27 | connect-src * wss:; 28 | ``` 29 | -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_01.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_boxes.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_boxes.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_css.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_css.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_info.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_info.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_init.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_init.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/xylole_js.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/xylole_js.gif -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/スクリーンショット 2016-12-23 2.15.47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/スクリーンショット 2016-12-23 2.15.47.png -------------------------------------------------------------------------------- /HelpFiles/ScreenShots/スクリーンショット 2016-12-23 2.21.28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jerrywdlee/Xylole/6663e589ab988b68c04046d0c9fb17acb5debecb/HelpFiles/ScreenShots/スクリーンショット 2016-12-23 2.21.28.png -------------------------------------------------------------------------------- /HelpFiles/リモート簡易JSコンソール　Xylole.js　開発手記（第０章）.md: -------------------------------------------------------------------------------- 1 | # はじめに 2 | この記事は[Javascript Advent Calendar](http://qiita.com/advent-calendar/2016/javascript) 23日の記事です。 3 | 4 | 　[Xylole.js](https://github.com/jerrywdlee/Xylole)はリモートでウェブページをコンソールで操作できる開発用ツールです。勉強と遊びのために、実験的な機能も複数実装しています。 5 | 6 | #シリーズ一覧 7 | |No.|記事|キーワード| 8 | |:-----------|------------:|------------:| 9 | |Chapter 00|[Xylole.js開発手記（第０章）(本記事)]()|使い方・原理| 10 | |Chapter 01|[Xylole.js開発手記（第１章）]()|Bookmarkletと即時関数| 11 | |Chapter 02|[Xylole.js開発手記（第２章）]()|jQueryの頼らないコーディング| 12 | |Chapter 03|[Xylole.js開発手記（第３章）]()|改行しないNode.jsのconsole| 13 | |Chapter 04|[Xylole.js開発手記（第４章）]()|Socket.io備忘録| 14 | |Chapter 05|[Xylole.js開発手記（第５章）]()|JSの正規表現備忘録| 15 | |Chapter 06|[Xylole.js開発手記（第６章）]()|テスト諸々| 16 | 17 | # 本編 18 | ## きっかけ 19 | 　私はウェブのセキュリティ問題に対して、普通のエンジニア以上な興味を持っているわけではないが、Xylole.jsが利用した原理が極めてシンプルで、フロント・Node.js界隈のエンジニアであれば、誰でも簡単にできそうであって、勉強と遊びを兼ねて、作っちゃいました。 20 | 21 | ## 名前について 22 | 　Xylole(キシロール)は[芳香族化合物](https://ja.wikipedia.org/wiki/%E8%8A%B3%E9%A6%99%E6%97%8F%E5%8C%96%E5%90%88%E7%89%A9)の一種、[キシレン](https://ja.wikipedia.org/wiki/%E3%82%AD%E3%82%B7%E3%83%AC%E3%83%B3)のドイツ語です。 23 | 芳香族といえば、[ベンゼン](https://ja.wikipedia.org/wiki/%E3%83%99%E3%83%B3%E3%82%BC%E3%83%B3)の亀の甲のような六角形(６員環)は、とても典型的なシンボルと思います。ちょうどNode.jsのシンボルマークも六角形であるため、芳香族化合物の名前で命名しました。 24 | 　また、Xyloleを選んだ理由としては、「Cross(X)」と「Console」が組合わせて形成した単語とも見なせるので、その名前にしました。 25 | 26 | ## 注意 27 | 　Xylole.jsは一部コンソールを持たないブラウザ（例えばスマホ版のChromeやほぼ全てのアプリ内ブラウザ）に対して、デバグをより便利にするように開発したツールではありますが、使い方によって不正アクセスに転用することが可能です。ご利用くださった皆様に、公序良俗を害しない使い方で利用しましょう。間違った使い方によって起こした民事または刑事責任は、作者の私は負いかねます。 28 | 29 | ## ハンズオン 30 | 　早速ですが、実際に動かしてみましょう！ 31 | 32 | * **まずは、最新の推奨版Node.jsをインストールしましょう** 33 | 　書きやすいために、サーバー側(Node.js側)では、一部ES2015の書き方で書いていたので、古いバージョン(4.0以下)のNode.jsで使えない可能性があります。 34 | Node.jsのインストールは、[オフィシャルサイト](https://nodejs.org/ja/)でダウンロードしてインストールしてもいいし、バージョン管理ツール[nvm](https://github.com/creationix/nvm)を利用してもいいです。 35 | 36 | * **ソースコードのクローン＆パッケージのインストール** 37 | 38 | ```sh 39 | $ git clone https://github.com/jerrywdlee/Xylole.git 40 | $ cd Xylole 41 | $ npm install 42 | ``` 43 | 44 | * **サービスの起動** 45 | 46 | ```sh 47 | $ node socketServer.js 48 | # デフォルトはport:8080を使用するが、下記の書き方で別ポートも使えます 49 | $ node socketServer.js 3000 50 | ``` 51 | 52 | * **ウェブページにスクリプトを入れる** 53 | 　`localhost:8080`に接続すると、デモページが立ち上がり、その中のリンクをクリックすると、簡単に接続できます。別のページにマウントさせる場合は、以下のスクリプトをアドレス欄に流すとできます。 54 | 　ただし、注意点がいくつあります。まず、Safari(PC,スマホ共通)では、安全上な理由でアドレス欄にJavaScriptを実行できないようになっています。Safariでマウントしたい場合は、Bookmarklet化するか、リンクにするかのどちらじゃないと難しいです。 55 | そしてFireFoxとChromeについては、`javascript:`から始まる文言をアドレス欄に貼られた場合、こっそり`javascript:`を取り除くようにしています(PC,スマホ共通)。その時、手動で`javascript: 56 | `を入力すると、普通にマウントできます。 57 | 58 | ``` 59 | javascript:(function(d){var s=d.createElement('script');s.src='https://rawgit.com/jerrywdlee/Xylole/master/src/scripts/remoteScript.js';d.body.appendChild(s)})(document) 60 | ``` 61 | 62 | 63 | * **立ち上がったサーバーとつなぐ** 64 | 　もしスクリプトが正しくマウントされたら、```Please Set IO Server's Domain```と入力を促すPromptが出現します。入力する値について、先ほどサーバーを立ち上がった時、```Please input url below into prompt shown in page :```という文言のすぐ下のURLを入れてください。 65 | サーバー再起動するたびに、URLが変わります。 66 | 　成功にサーバーとつながった場合、サーバーのコンソール画面につないだページの`Page Info`が黄色で表示されます。一番下の緑色の矢印のところに、JavaScriptの関数等を入力すれば、そのページで実行されます。 67 | 68 | 69 | ## 原理 70 | 　Xylole.jsのコアな原理は三つあります。 71 | 72 | 1. **JavaScriptによるスクリプトの動的追加** 73 | 先ほどアドレス欄に入力したものができたことは、```body```の一番最後に、```