Animateのhtml5canvas作成中ウィザードで記述したjavascriptや完成後パブリッシュして作成されたjavascript等のセキュリティ確認方法を教えて下さい

[uy0731]

・製品とそのバージョン

　 Adobe Animate2024

バージョン24.1.0 ビルド14

・OSとそのバージョン

　　Windows 11 Home

　　バージョン　24H2

・ご質問内容概略

Animateでhtml5 canvasを作成してアクションパネルのウィザードでjavascriptを追加してパブリッシュしたhtml5とjavascriptは実際にサーバーに発行しないと動作確認ができないことがわかり、レンタルサーバーを借りることを検討中です。レンタルサーバーの会社より、「お客様が設置したプログラムに脆弱性などがございますと、サーバーに不正アクセスされる恐れがございます。お客様にてセキュリティ上の問題がないかなどをご確認いただく必要がございます。」などの回答があり、その確認方法、ソースコードに脆弱性があるかどうかについて、こちらのコミュニティに質問させていただきます。

作成したanimateのhtml５canvas、ウィザードで記述したjavascriptの内容、動作確認、レンタルサーバー会社とのやりとり、ご質問内容を詳しく書かせていただきます。よろしくお願いいたします。

＜作成したhtml5 canvas＞

タイムラインを使ってweb上のボタンアクションによる動きを想定してキーフレーム上に異なる動きを作っておき、異なる動きごとにキーフレームに名前（ラベル）をつけておきました。

ボタンのシンボルを作成して名前をつけ、マウスがアップの時、オーバーの時の動きをタイムライン上に作りました。

＜ウィザードで記述したjavascriptの内容＞

アクションパネルのウィザードを使って、

１．　１５フレームで止まる

　（１～１５フレームまではテキスト、背景などがアニメーションする）

２．　ボタンＡをクリックしたら、２０フレームに進む。（２０～２５フレームで図形とテキストがアニメーションする。）

３．　ボタンＢをクリックしたら、２５フレームに進む。（２５～３０フレームで別の図形とテキストがアニメーションする。）

４．　ボタンＣをクリックしたら、新しいウィンドウが開き、指定のurlに遷移する。

1～４のような内容のjavascriptを、アクションパネルのウィザードで記述しました。

＜動作確認＞

上記４つの動きのhtml5 canvasを作成して、htmlとjavascriptをパブリッシュすることができました。

ボタンをクリックしたときの動きは、Animateのムービープレビューで確認することができました。

上記のhtmlをダブルクリックして開いたとき、正常に動作しないのでAdobe サポートで調べていただいた結果、実際にサーバー上に発行して公開したら、正常に動作することがわかりました。（ローカルのハードディスク内で該当htmlを開いた場合、やはり正常に動作しないそうです。）

＜レンタルサーバー会社への質問と回答＞

レンタルサーバーの利用を検討して上記ファイルを発行しようと思って、該当の会社にセキュリティは安心か問い合わせたところ、

「基本的には安全ですが、お客様が設置したプログラムに脆弱性などがございますと、サーバーに不正アクセスされる恐れがございますため、お気をつけください。」

「お客様にてセキュリティ上の問題がないかなどをご確認いただく必要がございます。」

「「不正アクセスされる恐れ」とは、一般的なセキュリティリスク全般に及ぶ内容となりますため、詳細につきましてはお客様にて有識者等にお聞きしていただく必要がございます。」

との回答がありました。

＜ご質問内容＞

• Animateでhtml5 canvasを作成パブリッシュしたhtmlとjavascriptにセキュリティ上問題がないか確認するにはどうしたらよいですか。
• 上記のhtmlとjavascriptのソースコードに脆弱性がありますか。
• 「不正アクセスされる恐れ」「一般的なセキュリティリスク全般」の詳細について教えて下さい。

４つの動きをウィザードでjavascriptを記述してhtml5canvasを完成させてパブリッシュしてできた .jsファイルのjavascriptは723行になり、471行目から526行目あたりは、自分がウィザードで記述したscriptとわかりますが、それ以外のところにも多くの記述があり、セキュリティ上問題がないかどうかどのように判断すればよいかわからなくて困っています。

よろしくお願いいたします。

[Ten A]

これは非常に難しい問題で、チェックするべき点は多岐にわたります。とりあえず思いつく点として以下のリストを挙げておきます。

• 入力サニタイズ
• Canvas のクロスオリジン保護
• データURL/Blob 出力の適正
• 外部送信の監視
• セキュリティヘッダーの確認
• アップロードされたファイルの偽装・MIME確認
• Canvas Fingerprintの有無

とりとめなく書き出しましたが、基本的にAnimateに利用されているAPIは脆弱性に対する検証を通っていますが、未知のものが存在する可能性もありますので利用されているAIPに関する情報については常に目を光らせておくべきでしょう。

また、サーバーの設定やJavaScriptの構成等を慎重に見極める必要もあります。一般に出回っている脆弱性スキャナー等を利用するのも良いでしょう。

サーバーの設定以外については、基本的にユーザーインタラクションに対する反応に穴が無いかを調べていくことになります。経験が浅いと難しい部分もありますが、ツールなどを利用しつつ勉強されるとよいでしょう。

[uy0731]

返信ありがとうございます。

サーバーを契約、設定するときなどに参考にさせていただきたいと思います。初めて聞く言葉が多く、さらに質問させていただきました。すみませんがよろしくお願いいたします。

＞入力サニタイズ

ユーザーにテキストを入力してもらうことは行わない予定です。

「ボタンをクリックする」→クリックしたら画面が変わる。

「ボタンをクリックする」→クリックしたら指定webページに遷移する。

の２種類の動きだけを使う予定ですが、その場合も「入力サニタイズ」は必要ですか。

＞Canvas のクロスオリジン保護

検討中のレンタルサーバは、デフォルトでは「CORS設定無効」になっているようです。契約する際には確認しますが、デフォルトのまま使えばよいでしょうか。

＞データURL/Blob 出力の適正

検討中のレンタルサーバで、今のところ説明が見つかりませんでした。

レンタルサーバー契約時に確認すればよろしいでしょうか。

＞外部送信の監視

検討中のレンタルサーバでは、Web改ざん検知サービスやシンプル監視サービスなどを利用することによって間接的に外部送信を監視することができるようです。

レンタルサーバのサーバーコントロールパネルからIPアドレスを確認することで、外部サーバーとの通信状況を把握することも可能のようです。

いずれかの方法を使えばよいでしょうか。

＞セキュリティヘッダーの確認

サーバーのコントロールパネルにログインして、対象ドメインのwebサイト設定画面で確認できるようですが、そこで、以下のセキュリティヘッダーが適切に設定されているか確認すればよいでしょうか。

• Content-Security-Policy (CSP):許可されたリソースのソースを制限し、クロスサイトスクリプティング (XSS) などの攻撃を防ぎます。

• X-Frame-Options:サイトが他のサイトのiframeに表示されるのを防ぎ、クリックジャッキング攻撃を防ぎます。

• X-Content-Type-Options:ブラウザによるコンテンツタイプの推測を無効にし、MIMEスニッフィング攻撃を防ぎます。

• Strict-Transport-Security (HSTS):HTTP接続をHTTPS接続にリダイレクトし、中間者攻撃を防ぎます。

（Google検索したものをコピー＆ペーストしましたが、それぞれの「適切に設定」とは何かがわかっていません。このあたりは、レンタルサーバーの契約をすすめるときに相談していけばよいでしょうか。）

＞アップロードされたファイルの偽装・MIME確認

方法がわかりません。レンタルサーバー契約時に確認すればよいでしょうか。

＞Canvas Fingerprintの有無

「 JavaScriptとHTMLでグラフィックを描画するために設計されたCanvas APIは、ブラウザフィンガープリンティングによるオンライントラッキングにも利用できます。この手法は、Webブラウザやプラットフォームによってキャンバス画像のレンダリング方法が異なることを利用し、ユーザーのブラウザの個人用デジタルフィンガープリントを作成します。」という記事をみつけましたが、フィンガープリントに使う意図がなければ問題ないということでしょうか。

>とりとめなく書き出しましたが、基本的にAnimateに利用されているAPIは脆弱性に対する検証を通っていますが、未知のものが存在する可能性もありますので利用されているAIPに関する情報については常に目を光らせておくべきでしょう。

Animateは常に最新版を使うようにしています。

「利用されているAPIに関する情報」とはどのような情報に目を光らせておけばよいですか。

>また、サーバーの設定やJavaScriptの構成等を慎重に見極める必要もあります。一般に出回っている脆弱性スキャナー等を利用するのも良いでしょう。

サーバーの設定は、箇条書きで書いていただいている点を気をつければよいでしょうか。

Javascriptの構成の見極めでは、何を見極めたらよいでしょうか。

ユーザーにテキストを入力させるようなjavascriptを書かない。

「ボタンをクリックする」→クリックしたら画面が変わる。

「ボタンをクリックする」→クリックしたら指定webページに遷移する。

の２種類の動きだけを使うことを検討中で、animateのウィザードかコードスニペットで作成した上でflaファイルをパブリッシュして、最終的にはanimateがhtml、javascript、imageフォルダを作成。できたjavascriptなどのファイルをそのまま使う予定です。

自分で記述したscriptだけでなく、Animateが作成するすべてのscriptのチェックが必要でしたら「逆引き」のようなもので何が書いてあるかチェックしたらよいでしょうか。（animateのキーフレームで指定している画像を動かしたり大きさを変えたりという部分がscriptになっていると推測しますがそこもチェックが必要でしょうか）

>サーバーの設定以外については、基本的にユーザーインタラクションに対する反応に穴が無いかを調べていくことになりま す。

ユーザーにテキストを入力させるようなjavascriptを書かない。

「ボタンをクリックする」→クリックしたら画面が変わる。

「ボタンをクリックする」→クリックしたら指定webページに遷移する。の２種類の動きだけを使うことを検討中ですが、この場合の「穴」とはどのようなことを指しますか。

>経験が浅いと難しい部分もありますが、ツールなどを利用しつつ勉強されるとよいでしょう。

わからないことばかりです。今後ともよろしくお願いいたします。

[uy0731]

先日、投稿した際、「＞セキュリティヘッダーの確認」

の項で

Content-Security-Policy

X-Frame-Options:

X-Content-Type-Options:

Strict-Transport-Security

にリンクが入ってしまって、記述がややこしくなってしまってすみません。リンクは無視して下さい。

Google検索して検索結果の一部を文字列だけコピー＆ペーストしたつもりだったのですが、投稿後に確認すると上記文字列にさらにそれぞれの検索結果のリンクがはられていたようで、リンクに気づかずに投稿してしまいました。投稿を削除したり修正したりする方法がわからないので、「リンクを無視して下さい。」とのお願いを投稿いたします。よろしくお願いいたします。

[Ten A · Accepted solution]

セキュリティに関しては日々変化するので、ここでは詳細に紹介する事はできませんが、基本的にはサーバーの設定による情報の漏出を防ぐ事。これはサーバーのシステムがどのような構成になっているかを調べてシステムの脆弱性を突くような不正アクセスを防ぐ目的で行います。次に、Webアプリ等に脆弱性が生じていないかの確認は必要になります。よくあるのは、ユーザーからの入力に紛れ込んだ不正なコードをそのまま実行してしまったり、膨大な入力が繰り返されてサーバーリソースが不足するなどが見られます。そういった結果としてサーバーにある情報が不正に取得されたりと言ったことにも繋がる可能性もあります。
Animateが利用するAPIについてはCreateJSを利用しますが、これはHTML5のCanvasやDOM要素を操作するためのライブラリで、セキュリティは主にブラウザやWebサーバー側の対策に依存します。
入力自体はなくマウスでの操作といった処理が主眼であれば基本的に入力値のチェック等は考える必要はありませんので、サーバーの設定について学んだ上で対策を立ててみてください。Webアプリの挙動については一般的に出回っている脆弱性スキャナ等を利用するとより安心です。
セキュリティー対策というのは情報が物を言います。万全を期するのであれば、常日頃からサーバーやスクリプトエンジン、利用するAPIについての情報を収集しながら運用する必要があります。また、レンタルサーバーを利用しているのであればサポートから送られてくるセキュリティ情報等も役に立つでしょう。

[uy0731]

返信ありがとうございました。

まずは、サーバーの設定について学んで対策をたてる。

Webアプリについては、脆弱性スキャナーを利用するとより安心。

常日頃から、サーバーやスクリプトエンジン、利用するAPIについて情報収集する。

レンタルサーバーのサポートから送られてくるセキュリティ情報に注目する。

という方向で、時間はかかると思いますが万全の準備をしたうえでレンタルサーバーの検討を進めていきたいと思います。