2018-05-06

Vue.js用のESLint環境を用意する方法

Vue.js ESLint

Ⅰ. はじめに

タイトルの通り「Vue.js用のESLint環境を用意する方法」です。

※Laravelを利用している場合はこちらの方法を推奨します。
https://kagasu.hatenablog.com/entry/2018/05/19/201521

Ⅱ. やり方

1. 必要なパッケージをインストールする

npm install -g eslint
npm install -g eslint-plugin-vue
npm install -g eslint-config-standard
npm install -g eslint-plugin-import
npm install -g eslint-plugin-node
npm install -g eslint-plugin-promise
npm install -g eslint-plugin-standard

2. .eslintrc.jsを作成する

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/essential', 
    'standard' // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off'
  }
}

3. ESLint を実行する

eslint resources/assets/js/**

実行結果

f:id:kagasu:20180506230229p:plain

2018-05-05

Laravel 7.x, 8.x で Vue.js を使う方法

Laravel Vue.js

Ⅰ. はじめに

タイトルの通り「Laravel 7.x, 8.x で Vue.js を使う方法」です。
LaravelにデフォルトでインストールされているLaravel Mixを利用する事でVue.jsの利用が簡単に出来ます。

Ⅱ. やり方

1. Laravel をベースにしてプロジェクトを作成する

composer create-project laravel/laravel project-name --prefer-dist

2. Vue.js を使う

composer require laravel/ui
php artisan ui vue

3. パッケージをインストールする

npm install

4. Webpackを実行する

ファイル変更を監視させ、アセットを自動的に再コンパイルさせます

npm run watch

5. welcome.blade.php を編集する

project-name/resources/views/welcome.blade.php を以下の通り編集します

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <example-component></example-component>
      </div>
    </div>

    <script src="{{ asset('js/app.js') }}"></script>
  </body>
</html>

6. Webサーバを起動する

cd project-name/public
php -S 0.0.0.0:8000

実行結果

f:id:kagasu:20180505180051p:plain

その他

.vue ファイルの場所

project-name/resources/assets/js/components/

Vue.js用のESLint環境を用意する方法

https://kagasu.hatenablog.com/entry/2018/05/19/201521

参考

https://readouble.com/laravel/6.x/ja/frontend.html

2018-05-03

タスクトレイのアイコンを消す方法

Windows C/C++ C#

Ⅰ. はじめに

タイトルの通り「タスクトレイのアイコンを消す方法」です。

f:id:kagasu:20180503091733p:plain

Ⅱ. やり方

C++の場合

#include <Windows.h>

int main()
{
  auto hWnd = FindWindow(L"ApplicationWindow", NULL);
  
  NOTIFYICONDATA data;
  data.cbSize = sizeof(NOTIFYICONDATA);
  data.hWnd = hWnd;
  data.uID = 1;

  Shell_NotifyIcon(NIM_DELETE, &data);

  return 0;
}

C#の場合

[DllImport("user32.dll", SetLastError = true)]
static extern IntPtr FindWindow(string className, string windowName);

[DllImport("shell32.dll")]
static extern bool Shell_NotifyIcon(uint dwMessage, ref NOTIFYICONDATA pnid);

[StructLayout(LayoutKind.Sequential)]
public struct NOTIFYICONDATA
{
  public uint cbSize;
  public IntPtr hWnd;
  public uint uID;
  public uint uFlags;
  public uint uCallbackMessage;
  public IntPtr hIcon;
  [MarshalAs(UnmanagedType.ByValTStr, SizeConst = 128)]
  public string szTip;
  public uint dwState;
  public uint dwStateMask;
  [MarshalAs(UnmanagedType.ByValTStr, SizeConst = 256)]a
  public string szInfo;
  public uint uVersion;
  [MarshalAs(UnmanagedType.ByValTStr, SizeConst = 64)]
  public string szInfoTitle;
  public uint dwInfoFlags;
  public Guid guidItem;
  public IntPtr hBalloonIcon;
}

static void Main(string[] args)
{
  uint NIM_DELETE = 0x2;
  var hWnd = FindWindow("ApplicationWindow", null);
  var data = new NOTIFYICONDATA();
  data.cbSize = (uint)Marshal.SizeOf(typeof(NOTIFYICONDATA));
  data.hWnd = hWnd;
  data.uID = 1;

  var ret = Shell_NotifyIcon(NIM_DELETE, ref data);
}

その他

NOTIFYICONDATAのuIDについて

uID の値はアプリケーションによって異なります。
API Monitor 等を利用して対象アプリケーションの Shell_NotifyIcon をhookする事で調べることが出来ます。

2018-05-01

WiresharkでTCPのPSHフラグのみ表示（フィルタ）する方法

Wireshark リバースエンジニアリング

Ⅰ. はじめに

タイトルの通り「WiresharkでTCPのPSHフラグのみ表示（フィルタ）する方法」です。

Ⅱ. やり方

tcp.flags.push == 1

参考

https://osqa-ask.wireshark.org/questions/24961/filter-for-syn-psh-and-rst-flags

2018-04-30

Fridaでjavax.crypto.spec.SecretKeySpecをhookする方法

リバースエンジニアリング Frida

Ⅰ. はじめに

タイトルの通り「Fridaでjavax.crypto.spec.SecretKeySpecをhookする方法」です。

Ⅱ. やり方

1. hook.js

var Base64a = {
  encode: (function(i, tbl) {
      for(i=0,tbl={64:61,63:47,62:43}; i<62; i++) {tbl[i]=i<26?i+65:(i<52?i+71:i-4);} //A-Za-z0-9+/=
      return function(arr) {
          var len, str, buf;
          if (!arr || !arr.length) {return "";}
          for(i=0,len=arr.length,buf=[],str=""; i<len; i+=3) { //6+2,4+4,2+6
              str += String.fromCharCode(
                  tbl[arr[i] >>> 2],
                  tbl[(arr[i]&3)<<4 | arr[i+1]>>>4],
                  tbl[i+1<len ? (arr[i+1]&15)<<2 | arr[i+2]>>>6 : 64],
                  tbl[i+2<len ? (arr[i+2]&63) : 64]
              );
          }
          return str;
      };
  }()),
  decode: (function(i, tbl) {
      for(i=0,tbl={61:64,47:63,43:62}; i<62; i++) {tbl[i<26?i+65:(i<52?i+71:i-4)]=i;} //A-Za-z0-9+/=
      return function(str) {
          var j, len, arr, buf;
          if (!str || !str.length) {return [];}
          for(i=0,len=str.length,arr=[],buf=[]; i<len; i+=4) { //6,2+4,4+2,6
              for(j=0; j<4; j++) {buf[j] = tbl[str.charCodeAt(i+j)||0];}
              arr.push(
                  buf[0]<<2|(buf[1]&63)>>>4,
                  (buf[1]&15)<<4|(buf[2]&63)>>>2,
                  (buf[2]&3)<<6|buf[3]&63
              );
          }
          if (buf[3]===64) {arr.pop();if (buf[2]===64) {arr.pop();}}
          return arr;
      };
  }())
};

function hookSecretKeySpec() {
  classSecretKeySpec = Java.use("javax.crypto.spec.SecretKeySpec");
  classSecretKeySpec.$init.overload('[B', 'java.lang.String').implementation = function (arg1, arg2) {
    this.$init(arg1, arg2);
    console.log(Base64a.encode(arg1));
    console.log("[*] SecretKeySpec called");
  }
  console.log("[*] SecretKeySpec modified")
}
setImmediate(function () {
  console.log("[*] Starting script");
  Java.perform(function () {
    hookSecretKeySpec();
  })
})

2. 実行する

frida -U -l hook.js -f tld.hoge.app --no-pause

実行結果

[*] Starting script
[*] SecretKeySpec handler modified
ODdiOTI3MmQxMDliMWU2NDI4NTBmNDU1ZWVhNWIyYmE=
[*] SecretKeySpec called

参考

https://qiita.com/weal/items/1a2af81138cd8f49937d