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

Question

・製品とそのバージョン　 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 · Accepted Answer

先日、投稿した際、「＞セキュリティヘッダーの確認」の項でContent-Security-PolicyX-Frame-Options:X-Content-Type-Options:Strict-Transport-Securityにリンクが入ってしまって、記述がややこしくなってしまってすみません。リンクは無視して下さい。Google検索して検索結果の一部を文字列だけコピー＆ペーストしたつもりだったのですが、投稿後に確認すると上記文字列にさらにそれぞれの検索結果のリンクがはられていたようで、リンクに気づかずに投稿してしまいました。投稿を削除したり修正したりする方法がわからないので、「リンクを無視して下さい。」とのお願いを投稿いたします。よろしくお願いいたします。 セキュリティに関しては日々変化するので、ここでは詳細に紹介する事はできませんが、基本的にはサーバーの設定による情報の漏出を防ぐ事。これはサーバーのシステムがどのような構成になっているかを調べてシステムの脆弱性を突くような不正アクセスを防ぐ目的で行います。次に、Webアプリ等に脆弱性が生じていないかの確認は必要になります。よくあるのは、ユーザーからの入力に紛れ込んだ不正なコードをそのまま実行してしまったり、膨大な入力が繰り返されてサーバーリソースが不足するなどが見られます。そういった結果としてサーバーにある情報が不正に取得されたりと言ったことにも繋がる可能性もあります。Animateが利用するAPIについてはCreateJSを利用しますが、これはHTML5のCanvasやDOM要素を操作するためのライブラリで、セキュリティは主にブラウザやWebサーバー側の対策に依存します。入力自体はなくマウスでの操作といった処理が主眼であれば基本的に入力値のチェック等は考える必要はありませんので、サーバーの設定について学んだ上で対策を立ててみてください。Webアプリの挙動については一般的に出回っている脆弱性スキャナ等を利用するとより安心です。セキュリティー対策というのは情報が物を言います。万全を期するのであれば、常日頃からサーバーやスクリプトエンジン、利用するAPIについての情報を収集しながら運用する必要があります。また、レンタルサーバーを利用しているのであればサポートから送られてくるセキュリティ情報等も役に立つでしょう。

Ten A · Answer

これは非常に難しい問題で、チェックするべき点は多岐にわたります。とりあえず思いつく点として以下のリストを挙げておきます。 入力サニタイズCanvas のクロスオリジン保護データURL/Blob 出力の適正外部送信の監視セキュリティヘッダーの確認アップロードされたファイルの偽装・MIME確認Canvas Fingerprintの有無 とりとめなく書き出しましたが、基本的にAnimateに利用されているAPIは脆弱性に対する検証を通っていますが、未知のものが存在する可能性もありますので利用されているAIPに関する情報については常に目を光らせておくべきでしょう。また、サーバーの設定やJavaScriptの構成等を慎重に見極める必要もあります。一般に出回っている脆弱性スキャナー等を利用するのも良いでしょう。サーバーの設定以外については、基本的にユーザーインタラクションに対する反応に穴が無いかを調べていくことになります。経験が浅いと難しい部分もありますが、ツールなどを利用しつつ勉強されるとよいでしょう。

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded