この記事をおすすめしたい人
- JavaScript Obfuscatorを導入したらiOSでフォームが動かなくなった人
- webpack-obfuscatorを導入したらiOSでフォームが動かなくなった人
- つまりオレ
Nuxt.jsでサイトを作っていたんですが、JavaScript Obfuscatorを導入して好き放題オプション設定しているとiOSでフォームの入力に反応しなくなりました。
シェア的にiPhoneは無視できないので、どうにか妥協してiOSでもJavaScript Obfuscatorを使えるようにします。
WordPressの上でな！
※ このブログはまだWordPress製です
JavaScript Obfuscatorとは
JavaScript ObfuscatorはJavaScriptを難読化するツールです。
難読化されたソースを見ましたが、訳の分からんことになっていました。
こんな↓コードが、
こんな↓感じになります。
めっちゃ難読化されてます。
JavaScript素人な僕はどっちみち他人の書いたコードなんて読めないわけですが。
Nuxt.jsにJavaScript Obfuscatorを導入する方法
Nuxt.jsでJavaScript Obfuscatorを使えるようにするにはJavaScript ObfuscatorのWebPack版、webpack-obfuscatorというのを使います。
インストールはターミナルでNuxt.jsのプロジェクトフォルダに移動してこれ↓。
$ npm install --save-dev webpack-obfuscator
nuxt.config.jsでの設定は必要ありません。 使う時にrequireするタイプです。
Nuxt.jsでJavaScript Obfuscatorを使用する方法
Nuxt.jsでJavaScript Obfuscatorを使うのは、公式ドキュメントに習ってこんな↓感じのコードをnuxt.config.jsに追加します。
const WebpackObfuscator = require("webpack-obfuscator");
export default {
build: {
plugins: [
new WebpackObfuscator({
(オプション)
})
],
},
}
これで、開発中でもビルド後でも、Nuxt.jsが出力するJavaScriptが全部難読化されます。
まぁこの方法だと僕の環境では問題があったので、それは機会があったら書きます。
難読化する必要ってある？
人によると思います。
ソースとか、使用しているAPIとか、まるまま抜かれても問題ないケースでは気にしなくていいですが、自分しか持っていないデータベースを使用していたり、自分が考えた独自のアルゴリズムを使っていたり、他人にパクられて困るサイトを作っている場合は難読化の価値はあると思います。
WordPressのNuxt化だと、REST APIがそもそもパブリックだし、手法もいろんなとこで公開されてるだろうし、難読化はいらないと思います。
難読化するとJavaScriptの実行時間が増えるみたいだし、取られて困るナニカがない人は導入するとデメリットになります。
難読化したらiOSでフォームが全く反応しなくなった
ChromeのデバッグツールのiPhone指定では問題なかったんですが、iPad実機で動作確認すると全く何も反応しなくなりました。 友人にiPhone実機でも確認してもらいましたが同様です。
フォーム…と言っても<form>タグはないわけですが、<input>や<select>に入力してもページに変化が起きません。
こういうページです。
難読化前は普通に動いていたので、難読化のドコカに原因がありそうです。
ブラウザはSafari、Chrome問わずに起きています。
Androidスマホでは問題ありません。
PCだとChorome、FireFoxで問題なく、ブラウザ界隈では悪名高いIEやEdgeでも問題なく、iOSだけで起きた現象でした。
オレ、悪くなくない？
とは思いましたが、はいはい、調べていきますよー。
原因はstringArrayEncodingオプション
オプションを1個1個オン/オフ試して、原因が特定できました。
いや、もうね！
ページ数が肥大化して以降だったのでチェック大変でしたよ！
(検証用のコンパクトなプロジェクト作りなさいよ)
原因は「stringArrayEncoding」というJavaScript Obfuscatorのオプションでした。
JavaScript Obfuscatorのオプション詳細については公式を見てください。
stringArrayEncodingってスゴイの？
パッと見た感じすごいです。
こんな↓コードが、
こんな↓感じになります。
公式見ると文字列をBASE64でエンコードするみたいで、実行時にそれを復元するコードを追加するんだそうです。
この復元用のコードがiOSで動いてないのかな…。
debugProtectionが原因では？
ネットで調べたらこんなページを見つけまして、
Oh! 「debugProtection」「debugProtectionInterval」をtrueに設定してるとiOSで動かないデスヨー。
と。
ボブ(仮)はそう言うわけですが、公式見るとこの2つはデフォルトではfalseになっていて、もちろん自分でtrueにしたりはしていません。
念のため、falseを明示してみましたがダメでした。
const WebpackObfuscator = require("webpack-obfuscator");
export default {
build: {
plugins: [
new WebpackObfuscator({
debugProtection: false,
debugProtectionInterval: false
})
],
},
}
他にもiOSのフォーム絡みのトラブルいっぱいあるけど？
調べられる限り全部調べました。
そして全部試しました。
いろいろ試した上で改善せず、「stringArrayEncoding」をfalseに戻すと動きます。
なので今回の原因はstringArrayEncodingのiOS上での挙動で間違いないとみています。
まとめ
Nuxt.jsで難読化しようとJavaScript Obfuscatorを導入したものの、iOSで動かなくなったそこの君！
ボブは
Oh! ヤマーダはアホなのですカー？
「debugProtection」「debugProtectionInterval」をfalseにするとリンゴOSでも動きマスヨー！
って言ってたよ！
オレは「stringArrayEncoding」をfalseにすると動いたよ！
それでもダメなら、もしかすると他のオプションが原因かもしれないから、1個1個試してみるときっと動くよ！
ハァ…。
以上、WordPressからお届けしました！