phantomjs 사용기

요약 :

phantomjs  를 사용하여 grafana 그래프를 화면 캡쳐하여 -> 운영중인 팀내 이슈 게시판에 하루에 한번 화면 업데이트

iframe이나 hyperlink 등  다른 방법 써도 되긴하나, 인증 문제등 귀찬아서 .....

phantomjs를 잘 응용하면 웹 해킹등 보안 이슈에 대해서도 모니터링 할수있음 (웹페이지 변조등)

반대로 악의적인 목적으로 사용할수도 있음....

render.js <-- - 수정 필요.

(function() {   'use strict';   var page = require('webpage').create();   var args = require('system').args;   var params = {};   var regexp = /^([^=]+)=([^$]+)/;   args.forEach(function(arg) {     var parts = arg.match(regexp);     if (!parts) { return; }     params[parts[1]] = parts[2];   });      page.customHeaders = { "Authorization": "Bearer eyJrIjoiTjVXTktkcHlGSEF2aHl6bmR1aHBrcTBEdW......................" };   var usage = "url=<url> png=<filename> width=<width> height=<height> renderKey=<key>";   if (!params.url || !params.png ||  !params.renderKey || !params.domain) {     console.log(usage);     phantom.exit();   }   phantom.addCookie({     'name': 'renderKey',     'value': params.renderKey,     'domain': params.domain,   });   page.viewportSize = {     width: params.width || '800',     height: params.height || '400'   };   var tries = 0;   page.open(params.url, function (status) {      console.log('Loading a web page: ' + params.url + ' status: ' + status);     page.onError = function(msg, trace) {       var msgStack = ['ERROR: ' + msg];       if (trace && trace.length) {         msgStack.push('TRACE:');         trace.forEach(function(t) {           msgStack.push(' -> ' + t.file + ': ' + t.line + (t.function ? ' (in function "' + t.function +'")' : ''));         });       }       console.error(msgStack.join('\n'));     };     function checkIsReady() {       var panelsRendered = page.evaluate(function() {         if (!window.angular) { return false; }         var body = window.angular.element(document.body);         if (!body.injector) { return false; }         if (!body.injector()) { return false; }         var rootScope = body.injector().get('$rootScope');         if (!rootScope) {return false;}         var panels = angular.element('div.panel:visible').length;         return rootScope.panelsRendered >= panels;       });       if (panelsRendered || tries === 1000) {         var bb = page.evaluate(function () {           return document.getElementsByClassName("main-view")[0].getBoundingClientRect();         });         page.clipRect = {           top:    bb.top,           left:   bb.left,           width:  bb.width,           height: bb.height         };         page.render(params.png);         phantom.exit();       }       else {         tries++;         setTimeout(checkIsReady, 10);       }     }     setTimeout(checkIsReady, 200);   }); })();

#!/bin/bash  DAY=`date +%y%m%d` DIR1="/root/.../grafana-graph-capture" DIR2="/usr/local/xe/reports/grafana-image" rm -f $DIR2/*  storage_bar_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=1"  cluster_bar_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=4"  storage_pie_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=2"  cluster_pie_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=5"  storage_table_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=7"  cluster_table_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?theme=light&panelId=8"  product_bar_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-summary?theme=light&panelId=41"  product_pie_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-summary?theme=light&panelId=42"  storage_cpu_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=10&theme=light"  storage_iops_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=11&theme=light"  storage_latency_url="http://x.x.x.x:xx/dashboard-solo/db/public-vm-monthly-reports?panelId=12&theme=light"   renderKey="eyJrIjoiTjVXTktkcHlGSEF2aHl6bmR1aHBrcTBEdW1uTkJmZHgiLCJuIjoidXNlxxxxxxxxxxxxxxxxx"   width=800   height=450 #### bar ### $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_bar_url} png=$DIR2/storage-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${cluster_bar_url} png=$DIR2/cluster-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey #### pie ### $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_pie_url} png=$DIR2/storage-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${cluster_pie_url} png=$DIR2/cluster-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey sleep 1 #### table ### $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_table_url} png=$DIR2/storage-table.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${cluster_table_url} png=$DIR2/cluster-table.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey #### product  ### $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${product_bar_url} png=$DIR2/product-bar.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${product_pie_url} png=$DIR2/product-pie.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey sleep 1 #### storage  ### $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_cpu_url} png=$DIR2/storage-cpu.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_iops_url} png=$DIR2/storage-iops.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey $DIR1/phantomjs --ignore-ssl-errors=true $DIR1/render.js url=${storage_latency_url} png=$DIR2/storage-latency.png width=$width height=$height domain=grafana.xxx.com renderKey=$renderKey

결과 화면 (xpressengine 게시판 링크)