Go to Qiita Advent Calendar 2024 Top
LoginSignup
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@XbaseFox(Hiroshi Nakamoto)

WEBファイルをPCへ落とさずにブラウザで読むには（WEBデータ仮想処理・WDCPについて）

Last updated at Posted at 2019-10-31

テレワークの安全性と生産性の向上

2020年はテレワークに移行する企業が本格化した元年とも言えます。テレワークは基本的にWEBで仕事をする訳ですが、企業の悩みの多くがセキュリティ。特にインターネットを介して様々な情報やデータが利用される程にリスクも高くなります。

企業によってはテレワークで利用できるリソースを自社が管理するクラウドシステム内だけに限定し、一般的なWEBの利用は制限している場合もあります。ただその限られたリソースの中だけ十分な仕事が出来るのか？となると調査研究や新商品の開発等、アイデアが勝負の業種や業務では限界があります。

クラウド・ストレージ内のデータについてはプレビューや編集機能が整備されつつあります。その中に属さない一般のインターネットのデータ（SNS内の添付ファイル等）は未だにPCにダウンロードして読んでいるというのが現実です。これは非常に危険ですが現在までのセキュリティ対策ソフトは検知型や過去の蓄積データから判断するタイプが未だに主流です。
SafetyViewer_Basic.png

１．WEBデータ仮想処理（WDCP）

WEBデータ仮想処理（WDCP）とは汎用のブラウザ（全てのICT端末）でWEB上（クラウド・ストレージ以外）のドキュメントをダウンロードする事無くクラウドの仮想環境でデータ処理を行いブラウザに表示する事を目的として開発された機能です。

初期段階では主にWEBのドキュメントデータをクラウド上でブラウザに表示出来るPDFやHTMLに変換して閲覧する機能でしたが、現在は圧縮ファイルの解凍を行いリストして、必要なデータのみブラウザで閲覧する等、機能が拡張されています。sample_002x.png

WEBデータ仮想処理（WDCP）によりFacebookのメッセンジャー、Slack、RoundCube、Cybose等の添付ファイルは仮想環境で処理され、ダウンロードを行う事無くブラウザで読む事が出来るようになります**のでネット分離化として極めて高い安全性が保証されます。

クラウド・ストレージ（Google Drive や OneDrive）外のWEBデータを扱う為の機能としても機能し、クラウド外のデータをダウンロードしないでクラウド上でダイレクト（Google Drive や OneDrive）に転送して保存する事もできます。

２．WEBデータダウンロード問題

  • PCに不要なデータが膨大になり管理が煩雑（圧縮されたファイル内には使わないデータも多い）
  • PCにはドキュメントに対応した閲覧用のソフトが必要（バージョンアップ等も面倒）
  • ドキュメントには危険なスクリプトが含まれる可能性が高い（マルウェア・ランサムウェア等）

３．WEBデータ仮想処理の特徴

１．WEBのドキュメントをダウンロードしないで安全にブラウザ表示。
２．WEB側で利用者の目的に合わせたドキュメントに変換。
３．Facebook等のSNSから一部のビジネスクラウドの添付データにも対応。
４．必用に応じて実装する機能の変更が可能。（オンプレミスへも導入可能）
５．圧縮データ（パスワード付き）もクラウドで解凍し表示。
６．パスワードが掛かったサイトやクラウドにも対応。
７．既存のWEB環境のまま、全てのICT端末のブラウザで利用可能な事。
８．WEBデータをダウンロードせずに「社内のグループウェア、Google、MS-Cloud」に転送。
９．ITのスキルには関係なくWEBのファイルを手軽に扱える事。

４．WEBデータを仮想処理の流れ

１．ブラウザで「WEBドキュメント」のリンクアドレスを特定する。
２．上記の情報をWEBサーバの処理プログラムに送信する。
３．WEBサーバの処理プログラムが「ドキュメント・データ」を入手する。
４．「ドキュメント・データ」をブラウザ表示可能な形式に変換。（他、Google MS等APIへの紐付け）

alt

５．仮想デスクトップとの比較

ITスキルが高い方であれば、仮想デスクトップで全部出来ると思われるかもしれません。しかし、実際にテレワークを行う場合には様々な事情や環境で仕事を行いますので、目の前のパソコンがそのまま利用できて、WEB側のデータが安全に利用できるだけで良いという場合が非常に多いのです。その解決策の一つとしてWEBデータ仮想処理（WDCP）は重要です。既存のパソコンのリソースを全て利用しつつ、危険なWEBデータの扱いが手軽に出来る環境としてお考え下さい。

６．プログラム構成

６－１．VPS Server 上の html ファイル

（機能）ブラウザで取得したリンクアドレスをVPSサーバのアプリケーションへ通知をする機能です。

index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<charset=utf-8>
<style type="text/css">body{margin:10px;padding:10px;text-align:center;}</style>
<style type="text/css">body {background: #2c3338;color: #606468;font: 87.5%/1.5em sans-serif;margin: 0;}</style>
<style type="text/css">input[type=radio]{-webkit-transform: scale(1.3);transform: scale(1.3);margin-right: 0.5em;margin-left: 1.0em;}</style>
<style type="text/css">#login {margin: 20px auto;width: 600px;}
    #login form input[type=submit] {background: #b5cd60;border: 0;width: 100%;height: 40px;border-radius: 3px;color: white;cursor:pointer;transition: background 0.3s ease-in-out;}
    #login form input[type=submit]:hover {background: #16aa56;}
.auto-style1 {
	color: #FFFFFF;
}
.auto-style2 {
	color: #FFFF00;
}
.auto-style3 {
	font-size: medium;
}
.auto-style4 {
	color: #FFFFFF;
	font-size: medium;
}
.auto-style5 {
	color: #16AA56;
}
</style>

<title>SafetyViewer</title></head>
<div ID="login"><body onLoad="document.forms autocomplete="off">
<form name="myForm" method="POST" target="_blank" autocomplete="on" action='foge.php'>
<img src="./image/web_convert_ms.jpg" width="600" height="200" alt="Document" title="Viewer" /> 
<p class="auto-style1">● WEBに分離して安全にドキュメント処理を行います ●</p>
	<p><span class="auto-style4">LINKURL:</span> 
	<input name="wurl" type="text" style="width: 499px" class="auto-style3" /><fieldset name="Group1">
	<legend class="auto-style5">ID &amp; PASS</legend>
	<span class="auto-style4">USERNAME:</span> 
	<input name="username" type="text" style="width: 200px" class="auto-style3" /><br /><br />
	<span class="auto-style4">PASSWORD:</span> 
	<input name="password" type="password" style="width: 200px" class="auto-style3" /></fieldset></p>
	<p>
	<input checked="checked" name="xcon" type="radio" value="G" /><span class="auto-style2">Google</span>
	<input name="xcon" type="radio" value="M" /><span class="auto-style2">MS Office</span>
	<input name="xcon" type="radio" value="P" /><span class="auto-style2">PDF</span>
	<input name="xcon" type="radio" value="T" /><span class="auto-style2">TEXT</span>
	<input name="xcon" type="radio" value="J" /><span class="auto-style2">JPG</span> 
	</p>
	<p><input type="submit" value="Display Safery"></p>
</form>
</body>
</div>
</html>
６－２．VPSサーバ上のアプリケーション（ファイル情報の受け渡し）

（機能）index.htmlからの情報を受け、ドキュメントをVPSサーバ内にコピー、ブラウザで読める形式に変換。
（注意）コードは要点となる機能のみ記述しております。

foge01.php
// 以下の１行でドキュメント情報を受取り変数、$wtarget、$wuser、$wpass に変数がそのまま入ります
// サイトアドレスはサニタイジングで文字化けします（まあ、当然です）
$wtarget = $_POST["wurl"];
// ログオンが必要なサイトに対応しユーザー名とパスワードを受け取る（サニタイジングしておきます）
$wuser = htmlspecialchars($_POST["username"], ENT_QUOTES);	// login
$wpass = htmlspecialchars($_POST["password"], ENT_QUOTES);	// password
６－３．VPSサーバ上のアプリケーション（ドキュメントの転送処理１）

実はリダイレクトのデータも wget（Linuxのコマンド）で転送できる事を最近になって知りました。
wgetでこういう時はこうする!!

foge02.php

// 以下の２行は最もシンプルにリンク先のドキュメントをVPSサーバへのコピー実行します
// リダイレクトでは無い場合が以下
$command = 'wget --no-check-certificate -O data/'.mb_basename($wtarget).' --referer=https://www.google.com/ "-U Mozilla/4.0 (compatible; MSIE 4.0; MSN 2.5; Windows 95)" '."$wtarget";
shell_exec($command);
// リダイレクトの場合は以下で可能になります（--no-check-certificateで可能になります）
// この場合は適当な名前（$wdoc）を付けて転送します
$command = 'wget --no-check-certificate --trust-server-names -O data/'.$wdoc.' --referer=https://www.google.com/ "-U Mozilla/4.0 (compatible; MSIE 4.0; MSN 2.5; Windows 95)" '."'$wtarget'";
shell_exec($command);
６－４．VPSサーバ上のアプリケーション（ドキュメントの転送処理２）

seleniumについては以下のサイトを参考にさせていただきました。seleniumでサーバのChromeを操作するとパスワードが掛かったサイトでもほぼ突破出来ました。ただサイトによってユーザーとパスワードのkeyが違うので、事前に調べてkeyを複数用意する必要があります。多くは username と password ですが、_uset と _pass 等をkeyにしているのもあります。

wgetは使い方により、認証が必用なサイトからのデータ転送にも応用できるなど多機能ですが、NGな場合もあるようです。この問題の克服がGoogleのChromiumをseleniumで操作して認証する方法です。

seleniumを使ってPHPでChromeの自動操作をする

foge03.php

// seleniumによるVPSサーバでのログインでは目的のドキュメントに紐付けしてログインの処理を行う。
// 続けて指定したファイルのダウンロード（コピー）を行う。
require_once './vendor/autoload.php';

use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\Remote\DesiredCapabilities;
use Facebook\WebDriver\WebDriverExpectedCondition;
use Facebook\WebDriver\WebDriverBy;

putenv("webdriver.chrome.driver=" . $driverPath);
// Chromeを起動するときのオプション指定用
$options = new ChromeOptions();
// ヘッドレスで起動するように指定
$options->addArguments([
'--no-sandbox',
'--headless',    // ヘッドレスで起動するように指定。ダウンロードフォルダ指定が無効になる。
'--disable-gpu',    // ヘッドレスで暫定的に必要なフラグ
'--ignore-certificate-errors',]);

$caps = DesiredCapabilities::chrome();
$caps->setCapability(ChromeOptions::CAPABILITY, $options);
$driver = ChromeDriver::start($caps, null, 1000*60*5, 1000*60*10);
$path = dirname(__FILE__).'/data';
$this->setDownloadDir($driver, $path);
$driver->manage()->window()->maximize();

$driver->get($wtarget);
$element = $driver->findElement(WebDriverBy::name('username'));
$element->sendKeys($wuser);
$element = $driver->findElement(WebDriverBy::name('password'));
$element->sendKeys($wpass);
$element->submit();
６－５．VPSサーバ上のアプリケーション（ドキュメントファイルのフォーマット確認）

以下では最初にファイルのフォーマットを調べています。
LibreOfficeはファイルのフォーマットが適当でも動作してくれますが、MS-Cloud では doc と docx と
ドキュメントのフォーマットが一致していないとエラーになります。そこで Linux のコマンドでファイル
のフォーマットを調べて（file -i -b）拡張子の付け直しを行っています。
（注意）この例では拡張子無しのdefaultというファイル名にして、ファイルのフォーマットを確認した
後に正しいフォーマットを付けています。

foge04.php

// File format analysis
exec('file -i -b data/default', $out, $ret); // 引数あり
$wdoc = $out[0];
exec('file -i -b data/download', $xout, $ret); // 引数あり
$xdoc = $xout[0];

// 以下、拡張子の付け直しの一部です
if(preg_match('/word/',$wdoc)){
    rename('data/default',"data/default.docx");
    $wdoc = "default.docx";
  }else if(preg_match('/word/',$xdoc)){
    rename('data/download',"data/default.doc");
    $wdoc = "default.doc";
  }else if(preg_match('/excel/',$wdoc)){
    rename('data/default',"data/default.xlsx");
    $wdoc = "default.xlsx";
  }else if(preg_match('/excel/',$xdoc)){
    rename('data/download',"data/default.xlsx");
    $wdoc = "default.xlsx";
  }else if(preg_match('/spreadsheetml/',$wdoc)){
    rename('data/default',"data/default.xlsx");
    $wdoc = "default.xlsx";
  }else if(preg_match('/spreadsheetml/',$xdoc)){
    rename('data/download',"data/default.xlsx");
    $wdoc = "default.xlsx";
}
６－６．VPSサーバ上のアプリケーション（ドキュメントファイルのコンバート処理）

ファイルのコンバートを行う処理です。内容はそれぞれのコマンドの使い方で確認してください。

foge05.php

// 以下の２行はLibreOfficeを利用してコピーしたドキュメントをPDFに変換します
$command = 'export HOME=/tmp;/usr/lib/libreoffice/program/soffice.bin --convert-to pdf --outdir data/ --headless '."data/$wtarget";
shell_exec($command);
// 指定したフォルダ内のPDFをテキストに変換する
$command ="pdftotext -layout -nopgbrk data/*.pdf";
shell_exec($command);
// 指定したフォルダ内のPDFをJPEGに変換する
$command ="pdftoppm -jpeg data/*.pdf data/";
shell_exec($command);
６－７．VPSサーバ上のアプリケーション（ドキュメントファイルのブラウザ表示）

完成したフォーマットをブラウザ上で表示させます。Google と Microsoft のAPIもここで指定して利用します。
（注意）Google と Microsoft のAPIを利用する場合はワード、エクセル、パワーポイント（無変換）はそのまま利用します。

foge06.php

// 以下のコードでPDFを表示します
header("Content-Type: application/pdf");
readfile($wtarget);
exit();

// 以下、Google API の利用
$file = 'https://docs.google.com/viewer?url='.$wtarget;
header("location: $file");
exit();

// 以下、MicroSoft API の利用
$file = 'https://view.officeapps.live.com/op/view.aspx?src='.$wtarget;
header("location: $file");
exit();

// 以下、画像の場合、他にも色々あります
echo "<center><img src = $imagef></center>";
exit();

// 以下、テキストの場合、一番面倒かもしれません
// コメントアウトの方法もそれなりでしたので残してます
$filename = $relative."/data/".mb_basename($wtarget);
$fp = fopen($filename, 'r');
// whileで行末までループ処理
while (!feof($fp)) {
  // fgetssの第二引数(バイト数)と第三引数(除外しないタグを指定)は省略可能
  $txt = fgetss($fp, 4096, '<h1>');
  // ファイルを読み込んだ変数を出力
  //echo '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'.$txt.'<br>';
  //echo "<center>$txt<br></center>";
  echo "<pre>$txt<br></pre>";
  }
// fcloseでファイルを閉じる
fclose($fp);
exit();
６－８．VPSサーバ上のアプリケーション（zipファイルを解凍してリスト表示する）

圧縮された zip ファイル をサーバ上で解凍してリストアップするプログラムです。
フォルダ内のデータを変数に入れて表示します。階層を全て一覧にしています。

foge08.php

<?php

// 検索するフォルダ
$dir = dirname(__FILE__) . '/data/';
 
$array = list_files($dir);
$array = str_replace($dir, '', $array);

// フォルダ内のファイル名を配列に入れて表示します

$sampleListBox = "<select name=\"foge\" multiple size=\"20\" >\n";
for ( $i = 0; $i < count( $array ); $i++ ) {
    $sampleListBox .= "\t<option value=\"{$array[$i]}\">{$array[$i]}</option>\n";
}
$sampleListBox .= "</select>\n";

function list_files($dir){
    $list = array();
    $files = scandir($dir);
    foreach($files as $file){
        if($file == '.' || $file == '..'){
            continue;
        } else if (is_file($dir . $file)){
            $list[] = $dir . $file;
            //$list[] = $file;
        } else if( is_dir($dir . $file) ) {
            //$list[] = $dir;
            $list = array_merge($list, list_files($dir . $file . DIRECTORY_SEPARATOR));
			//$list = str_replace($dir, '', $list);
        }
    }
    return $list;
}

?>

<body>
	<form action="fileview.php" method="post" target="_blank"></br>
	<div class="title">■ 安全に表示するファイルを選んでください ■</div>
	<div class="cp_ipselect cp_sl01">
		<?php
			echo "{$sampleListBox}";
		?>
	</div>
	<input name="xcon" type="radio" value="G" checked /><font size="3" color="#FFFFFF">Google  </font>
	<input name="xcon" type="radio" value="M" /><font size="3" color="#FFFFFF">MS Office  </font>
	<input name="xcon" type="radio" value="P" /><font size="3" color="#FFFFFF">Libre PDF  </font>
	<input name="xcon" type="radio" value="H" /><font size="3" color="#FFFFFF">Libre HTML</font>
	<input name="xcon" type="radio" value="J" /><font size="3" color="#FFFFFF">JPEG</font> <br><br>
	<input type="submit" value="Display Safery">
</form>
</body>

</html>
６－８ー１．GitHub でソースコードの zip ファイルのリンクアドレスをコピーして

alt

６－８ー２．zip ファイルのリンクアドレスをサイトからWEBのプログラムに送ります。

alt

６－８ー３．zip ファイル内のファイルリストが表示されます。

階層を一覧にして表示しています。
alt

６－８ー４．表示を指定した zip ファイル内のプログラムが表示され、コードはコピーして使えます。

alt

７．プログラムの主要な機能（VPSサーバにドキュメントを転送できれば実現できます）

１．リダイレクトされたWEBドキュメントもVPSサーバに任意の名前でコピーします。
２．パスワードが掛かったサイトにログインしてドキュメントをコピーする事も可能です。
３．出力は画像、テキスト、PDF、ZIP（パスワード有り）の内容表示もできます。
４．サーバにコピーされたデータはGoogle DOCSやMicroSoftクラウドと連携できます。
（※）Google と Microsoft のAPIはファイルのアドレスが明確でDNSが無いと利用できません。

alt

８．利用している主なモジュールとAPI（基本無料のツール）

１．LibreOffice（オープンオフィス）
２．Selenium（ブラウザ自動化）
３．Google Web Driver
４．unar（解凍圧縮機能）
５．pdftotext（PDFをテキストに変換）
６．pdftoppm（PDFを画像に変換）
７．Google MicroSoft API

８．まとめ

セキュアなWEB運用ではインターネットからのダウンロードは基本的に禁止されていますが、それは特別な事では無くて誰のどのPCでも同様にインターネットからのダウンロードは避けた方が良い事だと思います。それでは調査・研究・業務・学習にならないという場合も多く、ダウンロードに頼らずにインターネットの資料を読む機能は必要ですが、コストや機能性の問題も多いのが現状でしょう。この例はインターネットに自由に使えるサーバがあれば実現できる事ですから、皆さんも同様の機能の実現にチャレンジしてください。この記事では特許に関わる部分をどうしても掲載できないのが残念ですが、十分に参考にしていただけると思います。

WEBデータ仮想処理（SafetyViewer）
https://www.saikou.ne.jp/safetyviewer/index.html

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?