回答編集履歴

誤字の修正

2018/03/28 02:02

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -212,19 +212,23 @@
+追記1に重複する部分がいくつかありますが、重複する部分は追記１への回答を参照してください。
-1の方に全部下記ましたが、ユーザーに予め渡す情報量が多いのがSPAですからね。
+ユーザーに予め渡す情報量が多いのがSPAので、たしかにそのような懸念はあります。
+まずはWebサイト全体で使う全ての情報を割り出し一覧化します。
-まずは画面部品の情報の一覧を割り出し、どのレベルでガードしなければならないかを設定します。
+次に各情報はどのレベルでガードしなければならないかを設定します。
-これは公開しても良いだろう…といった情報ならばbundle.jsに含めて表示・非表示を切り替えれば良いです。
+これは公開しても良いだろう…といった情報ならばbundle.jsに含めて表示・非表示を切り替えれば良いですし、
-その他、公開出来ない情報全てはAjax通信で別途取りに行く設計にしてください。
+公開出来ない情報は全てAjax通信で別途取りに行く設計にしてください。
-当然あれもこれも非公開にしたければ、相応のAjax通信用のURL(エンドポイント)は多くなります。
+あれもこれも非公開にしたければ、相応の数のAjax通信用のURL(エンドポイント)が必要になります。
 手間や開発コストも吟味しながら取捨選択を行ってください。
@@ -235,3 +239,11 @@
 例えばJSONファイルを展開してアンケートのフォーム部品を生成するロジックを非公開にしたい。
 ……という意図ならば、もうSPAは諦めてください。
+SPAで運営しているWebサイト・Webアプリは全て盗まれるリスクとのトレードオフで運営しています。
+ですので、守るべき対象はサーバーに保存する個人情報やプロジェクト情報であり、
+そこの部分でマネタイズしているから他社にbundle.jsを盗まれたとしてもダメージは軽微であるという判断を行っているからです。

もう少し、質問者さんがどう動けば良いのかを見据えた回答に調整

2018/03/28 02:02

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -130,17 +130,73 @@
+SPAではない既存のWebアプリで
+HTML情報上にWebサイトを利用する全てのユーザーの住所や氏名を`display: none;`の状態で埋め込んでおいて、
+JavaScriptで表示・非表示を切り替える開発者がいますか？
+それと同じです。
+bundle.js内にはそのユーザーが閲覧しても良い情報しか内包してはいけません。
+貴方が考えている「一旦全て送り、ユーザー側で非表示にさせる」というのは
+上記の全ユーザーの氏名や住所をJavaScript制御でON・OFFを切り替える発想と同じです。
+> じゃあどうするのか？
-例えばログインユーザーがアンケート画面のリンクをクリックしたら、
+Ajaxでそのユーザの権限下でアクセス出来る情報を別途取得してください。
+bundle.jsにはAjax通信の結果(JSON)を解析して、アンケートフォームを作り出すロジックのみを埋め込んでください。
+これで質問文にあった「男性に化粧品の情報を公開する」懸念は払拭されます。
-Ajax通信で「私は女性なので、化粧のアンケートください」という申請を行い、
+「私に紐づくアンケートはある？」ということで、
-アンケート項目だけをJSONで受け取りDOMとして展開する作りにすることも可能です。
+`example.com/api/questionnaires`に向けてAjax通信を行います。
-男が「私も女性なので、化粧のアンケートください」って通信してきたらどうするか？
+女性の場合だけ化粧品のアンケートを表示したいならば、
+きっと認証情報には名前、性別、年齢等の情報はありますよね。
+```JSON
+[
+  {"name": "化粧品Aは既に利用されていますか？", "candidates": ["はい", "いいえ"]},
+  {"name": "化粧品Aを5点満点で評価してください", "candidates": ["1", "2", "3", "4". "5"]},
+  {"name": "化粧品Aのモニターに参加しますか？", "candidates": ["はい", "いいえ"]},
+  {"name": "化粧品Bは既に利用されていますか？", "candidates": ["はい", "いいえ"]},
+  {"name": "化粧品Bを5点満点で評価してください", "candidates": ["1", "2", "3", "4". "5"]},
+  {"name": "化粧品Bのモニターに参加しますか？", "candidates": ["はい", "いいえ"]},
+]
+```
+男性の場合は空の配列を返せば化粧品の情報は送られません。
-「認証してるユーザー確認したけどお前男じゃないかふざけんな」エラーを返せば解決です。
+まぁ、別に男性に化粧品名くらい教えても大丈夫かとは思いますが、認証情報と脳内補完して回答しています。
@@ -156,16 +212,26 @@
-というか、ユーザーに予め渡す情報量が多いのがSPAですからね。
+1の方に全部下記ましたが、ユーザーに予め渡す情報量が多いのがSPAですからね。
+まずは画面部品の情報の一覧を割り出し、どのレベルでガードしなければならないかを設定します。
-誰にでも公開して良い情報は予めJSに全部含めて投げ渡してあげれば良いですが、
+これは公開しても良いだろう…といった情報ならばbundle.jsに含めて表示・非表示を切り替えれば良いです。
-特定の人にしか渡してはいけないデータならば死ぬ気で守りましょう。
+その他、公開出来ない情報全てはAjax通信で別途取りに行く設計にしてください。
-ほぼ全ての項目は追記1の手法を応用することで可能です。
+当然あれもこれも非公開にしたければ、相応のAjax通信用のURL(エンドポイント)は多くなります。
-難読化(uglify)も併用しながらしっかり設計を練って管理しましょう。
+手間や開発コストも吟味しながら取捨選択を行ってください。
+もし認証情報を利用した部分以外、
+例えばJSONファイルを展開してアンケートのフォーム部品を生成するロジックを非公開にしたい。
+……という意図ならば、もうSPAは諦めてください。

追記への対応

2018/03/28 01:56

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -83,3 +83,89 @@
 Webpack等が吐き出すJavaScriptファイル自体をAdmin用・エンドユーザー用に分けてしまっても良いと思います。
 Admin用は少しくらい不具合が出ても問題になりにくいのでそんなに問題にはならないと思います。
+---
+【追記1への回答】
+そもそもブラウザの本質を理解していますか？
+ブラウザはただ受け取ったHTML・CSS・JS・画像ファイルを内部的に展開して画面に表示しているだけです。
+そしてWebサーバへHTTP通信を行いながらHTML・CSS・JS・画像ファイルをまた受け取る。
+これがコマンドラインツールのcurlになった瞬間不正になるわけではありません。
+全世界のWebサーバはHTTP通信を行う全てのクライアントが対象だからです。
+> コンソールからコンポーネントに渡すデータを変えればそのコンポーネントの挙動を変更することとが可能だと思います。
+Chromeと普通のWebサイトでも可能です。
+デベロッパーツール等を利用さえすれば現状のDOM構造を好き勝手に歪めてリクエスト飛ばせますよね。
+サービス提供元がわざわざHTMLを渡して上げてるのは、
+この項目に従って回答してくださいね、回答が済んだら○○URLのポストに投函してくださいねという**ガイドライン**です。
+クラッカーにはHTMLやJSでいくら頑張っても何の対策にもなりません。
+> クライアントサイドレンダリングの場合は一旦全て送り、ユーザー側で非表示にさせるといった処理が考えられそうです。
+例えばログインユーザーがアンケート画面のリンクをクリックしたら、
+Ajax通信で「私は女性なので、化粧のアンケートください」という申請を行い、
+アンケート項目だけをJSONで受け取りDOMとして展開する作りにすることも可能です。
+男が「私も女性なので、化粧のアンケートください」って通信してきたらどうするか？
+「認証してるユーザー確認したけどお前男じゃないかふざけんな」エラーを返せば解決です。
+---
+【追記2への回答】
+> SPAではややロジックも担当している印象を受けたためこのような質問をしました。
+というか、ユーザーに予め渡す情報量が多いのがSPAですからね。
+誰にでも公開して良い情報は予めJSに全部含めて投げ渡してあげれば良いですが、
+特定の人にしか渡してはいけないデータならば死ぬ気で守りましょう。
+ほぼ全ての項目は追記1の手法を応用することで可能です。
+難読化(uglify)も併用しながらしっかり設計を練って管理しましょう。

秀丸作者の下りが記憶と違って嘘になってたので修正

2018/03/27 12:50

投稿

miyabi-sun

スコア21158

test CHANGED Viewed

@@ -58,7 +58,7 @@
 例えば、かの有名な秀丸エディタはパスワードを入力するだけで認証を突破出来る脆弱なシステムです。
-しかし、その作者は「私はもう沢山儲けたので、無料で使いたい人はお好きにどうぞ。でも魅力的に感じてカンパしたいという方はその時に改めて払って下さい」という対応をしています。
+しかし、その[作者は](http://hrnabi.com/2015/04/14/6878/)「学生やフリーソフトウェアの開発者は無料にしてあげたい、パスワードを変えたり電話対応したりするとコストが大変なので実質黙認状態、でもまとまったライセンスを買っていただける方もいらっしゃって幸いです」というゆるい対応をしています。