HTML

HTMLのインジェクション攻撃を防ぐ方法を現役デザイナーが解説【初心者向け】

初心者向けにHTMLのインジェクション攻撃を防ぐ方法について解説しています。最初に、サイバー攻撃のひとつインジェクション攻撃とHTMLインジェクションについて説明します。次にインジェクション攻撃への対処法として入力値を制限する方法、サニタイジングを行う方法について学習しましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

HTMLのインジェクション攻撃を防ぐ方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

今回は、HTMLに関する内容だね！

どういう内容でしょうか？

インジェクション攻撃を防ぐ方法について詳しく説明していくね！

お願いします！

インジェクション攻撃とは

インジェクション攻撃とは、データベースやプログラムの脆弱（ぜいじゃく）性を利用した、サイバー攻撃や不正アクセスの総称のことを指します。同じ意味で「インジェクションアタック」や「コードインジェクション」とも呼ばれたりします。悪意のある攻撃者がバグなどのコードの脆弱性の高いプログラムに対して別のプログラムを使用して不正な命令を実行しプログラムを改変し不正な操作を行います。

近年問題視されている乗っ取り被害や顧客情報の流出などはまさにインジェクション攻撃の典型的な例です。

[PR] Webデザインで副業する学習方法を動画で公開中

HTMLインジェクションについて

HTMLインジェクションはユーザのブラウザ上でサイト管理者の意図しない操作をHTMLやスクリプトを混入させられてしまう問題のことを言います。近年のWebサイトはクライアント（ブラウザ）やサーバーの一方的な通信だけでなく、スクリプトを使用した対話的なやり取りが簡単に出来るようになりました（下図）。

ショッピングサイトやSNSサイトなどをイメージすると分かるようにユーザーの入力に合わせてサーバー側で処理を行いその結果に合わせて静的なサイトでも動的に画面表示を変更できるようになってます。

この時にサーバーからのレスポンスにHTMLと解釈されるデータが有った場合、管理者が本来意図しない動作が行われることになります。これがHTMLインジェクションの一つである、HTMLの脆弱性を利用した攻撃である、クロスサイトスクリプティング（XSS）です。

攻撃者のサイトを踏んでユーザーを目的のサイトに送らせるためにスクリプトがサイトをまたがって実行されることからこの名前がつけられています。

対処法

それでは、具体的にどのような対策をするべきかをいくつか紹介します。なお、今回はHTMLインジェクションが広義的なので、先ほど紹介したXSSを例に対策方法を紹介します。

その1.入力値を制限

入力値の制限することでスクリプトの入力を防ぐことができ、XSSが発生しなくなります。具体的には、郵便番号や電話番号の入力を要求する箇所では、数字の入力以外を許可しない仕様にすれば、スクリプトの入力を防ぐことができます。

また、入力する文字数を制限することもクロスサイトされる可能性のあるスクリプトの入力を防ぐことができます。この場合入力値の制限はサーバー側で行うのが安全です、ブラウザ側の入力チェック機能だけだとブラウザによっては無効になっていたり、実行前の画面を修正できてしまうのでサーバー側で制限設定を実装しましょう。

その2.サニタイジング

サニタイジングとはHTMLとして意味のある文字を別の文字列に置き換える処理のことです。インジェクションが必要としている&，<，>，”，’の記号を置換してこれらをただの文字列としてブラウザで表示させる手法です。

この処理をscriptタグに対して処理を行うことで、scriptタグとして認識されなくなるので不正な操作を防ぐことができ、XSSに有効です。

監修してくれたメンター

メンター三浦

モバイルゲームを運用している会社のエンジニアをしています。趣味でWEB開発やクラウドコンピューティングもやっており、ソフトもハードもなんでもやります。
TechAcademyジュニアではPythonロボティクスコースを担当しています。
好きな言語はpython, Node.js

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

フリーで使えるものばかり！HTMLを書けるおすすめのエディタ10選｜現役エンジニアが紹介

今回はエディタの解説をします。 HTMLのコードをメモ帳で実装すると、全て黒色で表示され、非常に見づらいです。この問題を解決するために、HTMLエ...

HTML

HTMLで404errorが起こる原因と対処法を現役デザイナーが解説【初心者向け】

HTMLで404 errorが起こる原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLのコードを効率良く整理する方法を現役デザイナーが解説【初心者向け】

HTMLのコードを効率良く整理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそ...

HTML

HTMLで絵文字を表示する方法を現役エンジニアが解説【初心者向け】

HTMLで絵文字を表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLのfieldset要素で使える属性を現役エンジニアが解説【初心者向け】

HTMLのfieldset要素で使える属性について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そ...

HTML

HTMLでrole属性を使ってアクセシビリティを高める方法をを現役デザイナーが解説【初心者向け】

HTMLでrole属性を使ってアクセシビリティを高める方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...

HTML

あわせてよく読まれている記事

概念を知っておこう！ビットコインの51%攻撃とは

今回は、51%攻撃について解説します。ビットコインの51%攻撃とは何なのか、今後ビットコインがどうなる可能性があるのか解説しています。ブロックチェーンの特性上生まれる可能性があるものなので、ぜひ知っておきましょう。田島悠介今回はビットコインの51％攻撃についての話をしよう。大石ゆかり田島メンター！51％攻撃ってよく聞く言葉ですが、具体的にはどういう問題なんですか～？田島悠介マイニングを行うひとつの大きな組織が51％を占めることで、不正な取引を行うことが可能になることを指すんだ。まずブロックチェーン全体の仕組みから見ていこう。大石ゆかりお願いします！ 51%攻撃とは 51%攻撃とは、ビットコインのブロックチェーン理論で考えると、51%のノードが虚偽のトランザクションデータを含むブロックに対して支持する表明を行った場合、虚偽のトランザクションデータを含むブロックが、虚偽のまま正しいブロックとして成立することを言います。虚偽のトランザクションデータを含むブロックに対して支持するということは、虚偽のトランザクションデータを含むブロックを生成することから始まります。トランザクションデータを含むブロックを生成すること自体をマイニングと言います。つまり、虚偽のトランザクションデータを含むブロックを生成する、ハッキングのようなマイニングを51%のノードが支持することが51%攻撃になります。トランザクションとは何か分からない方向けの記事も合わせてご覧ください。マイニングとはそもそも、ビットコインにおいて、どようにマイニングを行っているかを考えます。マイニングは、分散台帳の管理・運営処理を行うための計算処理を、マイナー（ノード）と呼ばれるクライアントPC側で行うことです。一言で言うと、今まではインターネット上のサーバーで行っていた計算処理を、世界中のインターネットに繋がった手元のパソコンで行うということです。マイニングについて詳しく解説した記事も参考にして下さい。正しいブロックが決定する仕組みマイニングを行っている時に、同時に新しいブロックが生成される場合や、虚偽のブロックが生成されるなどして、2つ以上のブロックが正しいブロックとして生成されることがあります。その際、ビットコインの場合次のような過程を経て最終的に正しいとされるブロックが決定されます。同時に2つのブロックが生成されました。これをブロックAとブロックBと仮定します。ブロックAとブロックBの値が同じ場合でも、どちらかが虚偽の場合でも構いません。ブロックAの次にブロックAA–ブロックAB–ブロックACとブロックが生成され続けます。ブロックBの次にブロックBA–ブロックBB–ブロックBCとブロックが生成され続けます。各ノードはどちらのブロックを支持しても構いません。この支持自体は各ノードが任意に行います。最終的に支持が多いブロックチェーンが生き残り、支持が少なかったブロックチェーンは消えます。支持しても消えるブロックチェーンを支持し続けるということは、支持するために使用するマイニングに必要なマシンパワーが無駄になるということです。つまり、悪意がない限りは正しいブロックチェーンを支持することが、ノード自身の利益に成るということです。この証明過程を経ることで、ビットコインはブロックチェーンを使用する仮想通貨の中で最も51%攻撃に強い仮想通貨となりました。今回解説した、正しいブロックを証明する過程のことを、PoW（プルーフ・オブ・ワーク）と呼びます。 PoWとは、Proof-of-Workの略称で、日本語で言うと仕事により証明することを意味します。ここで言う仕事とはマイニングを意味します。 PoWをサイコロで解説 Powについて、サイコロを投げるゲームで説明してみます。複数人のプレイヤーが2つのサイコロを投げます。勝利条件は、サイコロの和が、特定数値以下であれば勝ちとします。ここでサイコロを投げることをビットコインで言うマイニングと考えます。サイコロの和をNonce（ノンス）と呼びます。この勝利条件である特定数値をDifficulty Target（閾値）と呼びます。参加者が1人の場合のDifficulty Targetは非常に高く、ある程度のNonceでも勝利できます。しかし、参加者が1000万人のように増えていくと、Difficulty Targetの値は低い数値になり、サイコロでNonceを出すことが非常に難しくなります。現在のビットコインは参加ノードが多いため、Difficulty Target（閾値）が非常に低く、Nonceを出すことが難しいです。結果的に、正しいブロックを支持し続けても、利益を得ることが難しい状態で、虚偽のブロックを支持して利益を得ることは不可能に近いということを意味しています。改ざんしづらい仕組みのブロックチェーンブロックチェーンのデータは次のようなデータです。ブロックデータ例 index: timestamp: transactions: [ sender: recipient: amount: ] previousHash: そして、このブロックデータは次のブロックデータとpreviousHashという部分でつながっています。このことをブロックチェーンのチェーンと読んでいます。具体的にどのようにつながるかと言いますと、前のブロックの内容をハッシュ化した値が、次のブロックのpreviousHashに格納されているということです。ハッシュ化にはハッシュ関数という不可逆的な暗号化技術を使用します。つまり、1つのトランザクションデータを改ざんすると、それ以前のpreviousHashの値も改ざんしていく必要があります。このため、改ざん自体は非常に困難です。改ざん自体は困難でも、改ざんされたブロックを51%以上のノードが支持することで、改ざんされたデータが正しいデータとして承認されることは技術的に可能です。改ざんするために必要な51%以上のノードが承認するような大きな力を、ハッシュパワーと言います。現状で最大のハッシュパワーはノード全体の半分に満たない状態ですので、複数の特定ノードが協力して悪意の操作をしない限り、51%攻撃を達成するようなハッシュパワーにはなりづらいと考えられています。しかし、マイニングプール同士が結託することで、ハッシュパワーがノードの半分を超えることも可能です。田島悠介個人で行われるマイニングをソロマイニング、グループによって行われるマイニングをプールマイニングと呼ぶよ。大石ゆかり現在は組織によるものがほとんどということですね。マイニングプールの割合って今どんな感じなんでしょうか？田島悠介それでは次に、マイニングプールの現状とこれからについて見ていこう。 [PR] Webデザインで副業する学習方法を動画で公開中マイニングプールとは https://blockchain.info/poolsよりマイニングプールとは、ビットコインにおいてマイニングを個人ではなく、ノードが集まり組織的に行う集団のことです。最大派閥のマイニングプールはを占めているBTC.comです。 51%攻撃の事例 2013年に、とあるマイニングプールが50％超を占めたことがあります。その時にでさえも、51%攻撃が行われることはありませんでした。ですので、現在51%攻撃の事例はありません。そうは言っても、51%攻撃自体が現実的には可能です。これが、2018年2月中旬のビットコインやアルトコインの時価総額です。参照：https://coinmarketcap.com/#JPY ビットコインの時価総額が16兆円規模です。例えば、巨大な政府が本気でビットコイン市場を攻撃しようとすれば10兆円投入するだけで、51%攻撃が可能となります。 10兆円も投入することが可能かどうかについてですが、日本政府であれば可能です。例えば、2003年の年末から2004年の年明けにかけて約1ヶ月強の間、日本銀行は30兆円以上の日本円を用意し、為替介入を行いました。これは、日銀砲と呼ばれ、アメリカのヘッジファンドによる日本円の釣りあげに対し、最終的に50兆円以上の為替介入を行ったと言われています。 51%攻撃の対処法もし、51%攻撃が行われた場合、対処方法はありません。一説によれば、2040年頃になると、ビットコインで51%攻撃が実現可能になるそうです。これは、2040年頃になると、ビットコインのコイン自体が枯渇してしまうことで、新たなマイナーが生まれないことに伴い、正しいブロックチェーンを支持すること自体を辞めてしまうことが予想されるためです。つまり、その頃になると、51%攻撃が可能になるだけでなく、ビットコイン自体の価値にも大きな変化がみられる可能性があります。今回は、51%攻撃について解説しました。今後生まれる可能性があるものとして理解しておくと事業を作るにせよ仮想通貨を持つにせよ役立ち知識になるはずです。田島悠介最後に51％攻撃が起きたときにどうなるか、実際に起こる可能性についての話をしたよ。大石ゆかり起こってしまうと対処ができないということと、将来的に起こるかもしれない状態であるということですね。田島悠介マイニングプール同士の結託や大規模な資本の投入など、原因となりうるいくつかの要素についても復習しておこう。大石ゆかり分かりました。ありがとうございます！また、オンラインのプログラミングスクールTechAcademyでは、ブロックチェーンオンライン講座を開催しています。ブロックチェーン技術の仕組みを理解し、実際に分散型アプリケーションを開発することができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

ブロックチェーン

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次インジェクション攻撃とはHTMLインジェクションについて対処法監修してくれたメンターそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] Webデザインで副業する学習方法を動画で公開中calcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

近未来を感じる！インタラクションデザインとは

本稿は、Designmodeのブログ記事を、了解を得て日本語翻訳し掲載した記事になります。また本記事はCarrie Cousins氏によって投稿されました。「インタラクションデザイナー」という言葉は、デザインの分野で近年よく聞かれるようになりました。インタラクションデザインの真の意味とは？またインタラクションデザイナーになるには？これらの疑問に答えて、優れたインタラクションデザインの実例を紹介します。目次インタラクションデザイン入門インタラクションデザイナーの役割インタラクションデザインの概念と原則インタラクションデザインの実例インタラクションデザイン入門インタラクションデザインとは、論理的かつ考え抜かれた動作と振るまいを備えた、魅力的なWebインターフェースをデザイナーが作るプロセスのことです。成功するインタラクションデザインは、テクノロジー、コミュニケーションを利用して、理想的なユーザーエクスペリエンスを実現しています。Webサイトやアプリケーションにおけるインタラクションデザインについて、ここ約10年で多くが語られていますが、その基本は変わりません。インタラクションデザインの概念を紹介するために最もよく引用されているものの1つは、Bob Baxley氏（『Making the Web Work: Designing Effective Web Applications』の著者）が2002年に公開した記事で、全12回にわたってWebアプリケーションのためのインタラクションデザインを定義しています。その第1回『インタラクションデザインへの案内（Introducing Interaction Design）』では、インタラクションデザインを5分野に分類しています。現在でも役に立つ内容です。人間とマシンのコミュニケーション（Human/machine communication ）インタラクションデザインの基本的な役割は、ユーザーとデバイス間のコミュニケーションを翻訳して円滑にすることだとしています。操作と操作への応答（Action/Reaction）インタラクションがどのように起こり、発展していくのかに注意を向けるべきだとしています。状態（State）ユーザーがアプリケーションの現在の状態を知り、何がなぜ起こっているかわかるような設計にすべきだとしています。ワークフロー（Workflow）ユーザーが、デバイスやアプリケーションはどのような人向けなのか、また次に何が起こるか予測できるような設計にすべきだとしています。不具合（Malfunction）エラーは起こるものだと想定するべきだとしています。次に、インタラクションをデザインするときに考えるべきポイントを挙げてみます。デザインに役立つ基本的な質問がusability.govで提供されているので、引用します。インターフェースを操作するとき、ユーザーはマウスや指やタッチペンを使って何ができるだろう？インターフェースを操作するとき、ユーザーが使えるコマンドは？デバイスの外観を、ユーザーが機能を予測できるようなデザインにしてみるのはどうだろう？ユーザーがデバイスを操作する前に、デバイスの動作を予測できるような情報をユーザーに与えたか？エラーを未然に防げる設計になっているか？エラーメッセージはユーザーに解決策を提示できているか？操作が完了したときに、ユーザーはどのようなフィードバックを受けるか？操作から応答までの待機時間はどのくらいか？インターフェースに使われている要素は、操作しやすいサイズか？インタラクティブな要素を配置するために、インターフェースの端のレイアウトは上手く設計されているか？デバイスは、標準規格を満たしているか？一度に表示される情報は、まとめて整理されているか？可能な限りシンプルなデザインになっているか？一般的なフォーマットを利用しているか？ [PR] Webデザインで副業する学習方法を動画で公開中インタラクションデザイナーの役割もしあなたが上で見た質問を考えるタイプだとしたら、インタラクションデザイナーの素質があります。インタラクションデザイナーの役割は、デザイン、開発、クリエイティブ、マーケティングのチームにおいて、デザイン戦略を考えたり、製品の重要なインタラクションを特定したり、製品のコンセプトを試すためにプロトタイプを作成したり、ユーザーを魅了できるような最新のテクノロジーやトレンドについて知識をアップデートしておくことです。このように表現すると、インタラクションデザイナーの仕事は範囲が広くて曖昧なものに思えるかもしれません。簡単に言うと、企業がインタラクションデザイナーを雇うのは、アプリケーション製品が実際にユーザーの手元に届いたときに、確実に上手く機能させるためです。インタラクションデザイナーへのキャリアパスは多様です。研修プログラムによってインタラクションデザイナーになる人もいれば、それまでの経験や機会によってインタラクションデザイナーになる人もいます。しかしインタラクションデザイナーに共通する素養として、物事のメカニズムへの探求心や、人に質問することを恐れないこと、要素やコンセプトを実現化して新しい方法を試す能力などがあります。インタラクションデザインの概念と原則インタラクションデザインの活用の場面を広げている要因は何でしょうか。また普通の「デザイン」とは何が違うのでしょうか？実はこの境界線ははっきりしていません。今回はインタラクションデザインをテーマとしていますが、実際のインタラクションデザインは、Web、アプリケーションのデザインおよび開発の一部なのです。主要なポイントやツールは変わっても、インタラクションデザインの基本的な概念は変わりません。これらの概念を見てみましょう。目的を達成するためのデザインあなたのサイトやインタラクションが存在する目的は何でしょうか？目的を明確にして、アプリケーションによってこの目的を確実に達成できるようにします。魔法のようなインターフェース　最も優れたインターフェースとは、魔法のようにその存在に気づかないものです。「最も優れたインターフェースデザインは「存在していない」かのように思えるものです。データの読み込みや応答に時間がかかることもなく、ユーザーを悩ませることもありません。」と述べられています。ユーザビリティ　基盤となるシステムを、理解しやすく使いやすいインターフェースが好まれます。アフォーダンス　最も優れたインタラクションデザインとは、たとえ説明がなくてもどのように操作したらいいかわかるものです。つまり、有名なことわざを借りると「形態は機能に従う」のです。インタラクションデザイナーの学習能力使いやすいインターフェースは、すでにあるコンポーネントで作られます。優れたインタラクションデザイナーであれば、以前と似たようなデザインの課題に取り組むときには、車輪の再発明はしません。むしろ、決まったパターンを上手く使いこなせるのです。インタラクションデザインの実例次に優れたインタラクションデザインの実例を紹介します。どのプロジェクトにおいても、インタラクションデザインの概念の核心が体現されています。 Move Product（Barthelemy Chalvet氏開発） Weather App（Sergey Valiukh氏開発） Fiche（Barthelemy Chalvet氏開発）マテリアルデザインのアニメーション Mobile Animations & Interactions Team Messages（Jan Losert氏開発） Float Label Form Interaction（Matt D. Smith氏開発） iOS New Gestures（Javi Perez氏開発） Qards Contact Form（Sergey Shmidt氏開発） Nike（Owi Sixseven氏開発） Android Wear（Ramotion氏開発） Apple Watch（Jakub Antalík氏開発）結論ユーザーは、現代のWebサイトにインタラクティブな体験を期待します。それは仕方ないことかもしれません。Webに最新のデザインを取り入れて、ユーザーの再訪率を安定させるには、インタラクションが不可欠です。また、チーム内に、インタラクションの管理、企画、モニタリングを担当する人を置いておくのも大切です。つまり、インタラクションデザイナーが必要なのです。 [お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。

アプリデザイン

JavaScriptのXSS対策でエスケープ処理を行う方法を現役エンジニアが解説【初心者向け】

JavaScriptのXSS対策でエスケープ処理を行う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。目次インジェクション攻撃とはHTMLインジェクションについて対処法監修してくれたメンターそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。はじめに今回はWebサイトのセキュリティに関する内容です。近年、運用や設定ミスなどによる個人情報の流出の他に、悪意のあるWebサイトへの攻撃によるセキュリティ事故が多く発生しています。企業の信頼失墜や損害などを防ぐために、Webのセキュリティ対応は必須です。今回はアプリケーションの脆弱性をついた、XSS（クロスサイトスクリプティング）攻撃を行えないようにする実装方法について説明します。ぜひ最後まで内容を確認してくださいね。 XSSとは XSS（クロスサイトスクリプティング）とは、WebアプリケーションやWebサイトへの攻撃方法の1つです。該当のページなどに、スクリプトを埋め込み実行するというものです。悪意のあるスクリプトが実行されると、偽の情報を表示されたり、情報が抜き取られたりするような被害が出る可能性があります。ここで、XSSの対策がされていないサイトで、攻撃が行われた例を1つみていきましょう。以下、掲示板やチャットのような、投稿内容を他の人が閲覧できるサイトだとします。 <html> <head> </head> <body> <textarea id = "inputArea" rows="4" cols="40"></textarea> <input type="button" id ="btnDo" value="投稿"></input> <div id="result"></div> </body> </html> const btnDo = document.getElementById('btnDo'); const result =document.getElementById('result'); const inputArea =document.getElementById('inputArea'); btnDo.addEventListener('click', function() {//投稿ボタンクリック時 result.innerHTML = inputArea.value; //入力欄の内容をHTMLとして表示 }); こちらは入力欄の内容を投稿ボタンをクリックすることで、下部のinnerHTMLプロパティに代入してブラウザに表示します。入力欄に以下の文字列を設定して、再度投稿ボタンを押してみましょう。 <input type="button" value="戻る" onclick="location.href='https://techacademy.jp/'"></input> すると、クリックボタンが追加されることが確認できたと思います。上記のように、Webサイトのパーツに偽装したコンテンツを表示できました。こちらは他のユーザーが決算などの情報を入力した後に、クリックやホバーの動作で特定のスクリプトを実行させ、入力した情報を別のサーバに送信することで、画面表示項目などを盗み取ることができます。またscriptタグを埋め込むことで、ブラウザ表示のタイミングでcookieの情報などを読み取り、外部へ送信できてしまいます。現在はブラウザのセキュリティ対応で対策されていますが、URLに含まれるクエリパラメータなどに不正なスクリプトを埋め込んで、遷移先のページにスクリプトを埋め込んだり、偽装したHTML要素を表示する攻撃もあります。 [PR] Webデザインで副業する学習方法を動画で公開中XSS対策のためのエスケープ処理が行える関数 XSSの対策は、HTMLでタグや区切りに使われる下記の表の5つの記号を無効化することです。この5つの記号は、HTMLにおいて要素や値の区切りなどの文法上で意味のある特殊文字となっています。無効化するには、その記号を表す特殊なコードにエスケープしましょう。これは、文字を置換するということです。表の左側が無効化する記号、右側が置き換える文字コードです。 < < > > & & “ " ‘ ' この文字の置換処理のタイミングはデータを受け取った時ではなく、HTMLの生成時に行うことが推奨されています。画面に表示する直前に行うとイメージするとよいでしょう。直前に行うことで、複数のデータをそのまま同じように扱うことができ、2重に置換してデータの意味が変わってしまうエラーも防げます。 JavaScriptの文字列の置換は、文字列を表すStringオブジェクトのreplaceメソッドで可能です。実際に使ってみよう JavaScriptでXSS対策のために5つの記号をエスケープ（置換）する関数を作成してみましょう。 innerHTMLのようなHTMLを生成する処理がある場合は、この関数を呼び出して置換された文字列を使えば安全です。 function escapeHTML(string){ return string.replace(/&/g,

JavaScript

サイトを安全に！PHPでcsrf対策を行う方法【初心者向け】

PHPでcsrf対策を行う方法について解説します。 csrfは、Webアプリケーションの脆弱性・またそれを利用した悪意のある攻撃のことですが、サイトの知名度があればあるほど攻撃されることも多々あります。セキュリティを維持するためにも知っておきたい知識です。そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。田島悠介今回は、PHPに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PHPでcsrf対策を行う方法について詳しく説明していくね！大石ゆかりお願いします！ csrfとは CSRF(クロスサイトリクエストフォージェリ)とは、Webアプリケーションの脆弱性・またそれを利用した悪意のある攻撃を指します。どんな攻撃か具体例を出してみますね。仮にhoge.comというサイトにログインしている状態で、下記のリクエストを行うと指定したsend_user_idに指定したpointを送れるとします。リクエスト先: http://hoge.com/send_point.php メソッド: POST パラメータ: send_user_id ・・・ポイントを送付するユーザID point ・・・送付するポイント数悪意のある攻撃者が用意したページで下記のフォームがあるとします。もし、hoge.comにログインしている状態のユーザが下記のボタンを押してしまうと、攻撃者に自分のポイントを送付してしまいます。もちろん、hoge.comサイトがCSRF対策を行っている場合は、下記のボタンを押しても不正なリクエストとして攻撃を防げます。 <form method="POST" action="http://hoge.com/send_point.php"> <input type="hidden" name="send_user_id" value="攻撃者のユーザID"> <input type="hidden" name="point" value="1000"> <input type="submit" value="押してね♪"> </form> csrf対策のための書き方現在推奨されている対策としてはワンタイムトークンを利用する方法になります。 Laravelなどの有名なフレームワークもCSRF対策にはワンタイムトークンを採用しているため、これを抑えておくだけで問題はないと思います。ワンタイムトークンの実装方法は、まず投稿フォームのページを表示する前にランダムな文字列（トークン）を生成し、ユーザーのセッションに保存します。そして、下記のようにフォームに生成したトークンをhiddenで埋め込みます。リクエスト先では、セッションに保存したトークンと送信されたトークンが一致するか確認を行い、一致しない場合は不正なリクエストとして扱います。これで攻撃者は生成されるトークンの値を知りうることができないため、CSRF攻撃ができなくなります。フォームを表示する前の処理 // ランダムな文字列を生成してセッションに設定 $csrf_token = ランダムな文字列; $_SESSION['csrf_token'] = $csrf_token; フォーム <form method="POST" action="http://hoge.com/send_point.php"> <input type="hidden" name="csrf_token" value="<?=$csrf_token?>"> <input

PHP

生成AIで簡単！新製品デモンストレーションスクリプト作成ガイド

新製品デモンストレーションのスクリプト作成は、営業活動において非常に重要な役割を果たします。効果的なスクリプトは、新製品の特徴や利点を明確に伝え、潜在顧客の興味を引き付けることができます。本記事では、AIを活用して新製品デモンストレーションのスクリプトを作成する方法について詳しく解説します。生成AIの実務活用スキルを磨きたい方は、無料の生成AIコミュニティ『テックアカデミーGAIナレッジベース』をご活用ください。今すぐ無料登録 AIを活用した新製品デモンストレーションスクリプトの作成 AIを活用することで、効果的な新製品デモンストレーションのスクリプトを簡単に作成することができます。以下に、AIを使ってスクリプトを作成する手順を説明します。 1. 明確な指示を与える AIに適切な指示を与えることが重要です。新製品の特徴、ターゲット顧客、デモンストレーションの目的など、必要な情報を明確に提供しましょう。 2. 役割を設定する AIに適切な役割を与えることで、より適切なスクリプトを生成することができます。例えば、「製品マネージャー」や「マーケティング専門家」などの役割を設定することで、専門的な視点からのスクリプトを得ることができます。 3. 背景情報を提供する新製品や企業の背景情報、市場の状況などを詳細に説明することで、より適切なコンテキストに基づいたスクリプトを生成することができます。 4. 具体的な要件を指定するスクリプトの長さ、トーン、強調したい点など、具体的な要件を指定することで、より目的に合ったスクリプトを得ることができます。 5. AIの出力を確認し、必要に応じて修正する AIが生成したスクリプトを確認し、必要に応じて修正や調整を行います。人間の目で最終チェックすることで、より完成度の高いスクリプトを作成できます。以下は、AIに新製品デモンストレーションのスクリプト作成を依頼する際のプロンプトの例です。 # 命令以下の要件を踏まえて、営業部門で使用する新製品デモンストレーションのスクリプトを作成してください。スクリプトは営業担当者が使いやすく、クライアントが理解しやすい内容であることが重要です。 # 役割あなたは、製品マネージャーとして企業の新製品デモンストレーションのスクリプトを作成します。 # 目的 - 新製品の特徴と利点を明確に説明し、クライアントに製品の価値を効果的に伝えること。 - 営業担当者がクライアントとのデモンストレーション中に安心して利用できる、明瞭かつ効果的なスクリプトを提供すること。 # 背景と課題 - 当社は、AI技術を活用した効率的なビジネスソリューションを提供する新興企業です。 - 新製品は、企業のデータ分析とプロセス自動化を一層効率化するソフトウェアです。 - 営業担当者はテクニカルな背景を持っていない場合が多く、製品の技術的な側面を明確に説明するのが難しい場合がある。 - 新製品の市場投入が予定されており、営業部門は効果的なデモンストレーションスクリプトを必要としています。 # クライアントの特性 - 主に中〜大規模企業の経営者やIT担当者。 - 既存のデータ解析や業務効率化のツールに不満を感じている。 - 技術的な背景が異なるため、簡潔でわかりやすい説明を望んでいる。 # 新製品情報 - 製品名：InsightfulAI Pro - 製品特徴： - データ分析と自動化を統合したワンストップソリューション - AIを活用した高度な予測分析機能 - カスタマイズ可能なダッシュボードとリアルタイムレポーティング - ユーザーフレンドリーなインターフェイスと簡易なセットアッププロセス - ショーケースする主なシナリオ： - データの簡易インポートと可視化 - カスタムレポートの作成 - リアルタイムデータモニタリング # スクリプトの条件 - スクリプトは15〜20分のデモンストレーションをカバーする内容であること。 - クライアントが製品の特性と利点を理解しやすい言葉を使用すること。 - 営業担当者が流暢にプレゼンテーションできるよう、自然で友好的なトーンを保つこと。このプロンプトを使用することで、AIは以下のようなスクリプトを生成します。 #新製品デモンストレーションのスクリプトこんにちは、皆さん。今日は当社の新製品、InsightfulAI Proのデモンストレーションをご覧いただき、その特長と利点をお伝えします。私たちは中〜大規模企業の経営者やIT担当者向けに、データ分析とプロセス自動化を効率的に実現するためのソリューションを提供しています。さて、InsightfulAI Proは、データ分析と自動化を統合したワンストップソリューションです。その特長を詳しく見てみましょう。 1. データ分析と自動化の統合 - InsightfulAI Proは、データ分析とプロセス自動化を一つのプラットフォームで統合しています。これにより、データの収集から分析、アクションへの自動化まで、全てを効率的に実現できます。 2. 高度な予測分析機能 - AIを活用した高度な予測分析機能が、ビジネスの意思決定をサポートします。過去のデータから未来のトレンドを予測し、戦略を立てるのに役立ちます。 3. カスタマイズ可能なダッシュボードとリアルタイムレポーティング - InsightfulAI Proは、カスタマイズ可能なダッシュボードを提供し、リアルタイムでデータを監視できます。重要な情報を一目で把握し、迅速な意思決定をサポートします。 4. ユーザーフレンドリーなインターフェイスと簡易なセットアッププロセス - 当社の製品は、ユーザーフレンドリーなインターフェイスを採用しており、セットアッププロセスも簡単です。技術的な背景が異なる方でも、簡単に利用できることをご紹介します。それでは、InsightfulAI Proのデモを始めましょう。以下の主要なシナリオを紹介します： 1. データの簡易インポートと可視化 - デモでは、データのインポートから可視化までのステップをご紹介します。データの取り込みが簡単で、直感的なグラフィカルユーザーインターフェイスでデータを可視化できます。 2. カスタムレポートの作成 - 次に、カスタムレポートの作成方法を説明します。InsightfulAI Proを使用して、特定のデータからカスタマイズされたレポートを簡単に生成できます。 3. リアルタイムデータモニタリング -

生成AI・ChatGPT

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

HTMLのインジェクション攻撃を防ぐ方法を現役デザイナーが解説【初心者向け】

目次

インジェクション攻撃とは

HTMLインジェクションについて