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に有効です。

コラム

実は私も！？独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、テックアカデミー卒業生がスクールを選んだ理由をご紹介します。

・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、スクールが向いているかもしれません。
お試しのつもりで、まずは一度無料相談に参加してみませんか？

現役エンジニア・デザイナーに何でも気軽に相談できる30分をすべて無料でできます。
無理な勧誘は一切ないので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！無料相談はこちら

監修してくれたメンター

メンター三浦

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

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

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

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

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

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

プログラミングを独学していて、このように感じた経験はないでしょうか？

・調べてもほしい情報が見つからない
・独学のスキルが実際の業務で通用するのか不安
・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう厳しい試験を通過した講師があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。

無理な勧誘は一切ありませんので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！無料相談を予約する

HTMLでウィンドウ幅に合わせて画像サイズを自動で調整する方法を現役エンジニアが解説【初心者向け】

HTMLでウィンドウ幅に合わせて画像サイズを自動で調整する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...

HTML

HTMLの要素ハイパーリンクを現役デザイナーが解説【初心者向け】

HTMLの要素ハイパーリンクについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTM...

HTML

HTMLコーダーなら知っておこう。パソコンでスマホ表示する方法を現役エンジニアが解説【初心者向け】

HTMLコーダーなら知っておきたいパソコンでスマホ表示する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解...

HTML

HTMLで見出しタグと段落タグを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。今回は、HTMLの「見出しタグ」と「段落タグ」について解説します。 ...

HTML

HTMLとCSSで横並びレイアウトの表示方法を現役エンジニアが解説【初心者向け】

今回はHTMLとCSSを使用して横並びレイアウトの表示をする方法を、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説...

CSS

HTMLからPHPを呼び出す方法を現役デザイナーが解説【初心者向け】

HTMLからPHPを呼び出す方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもH...

HTML

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

今回は、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兆円以上の為替介入を行ったと言われています。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、

ブロックチェーン

サイズ指定に役立つ！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ファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。コラム実は私も！？独学で損する人の特徴

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、アプリケーションのデザインおよび開発の一部なのです。主要なポイントやツールは変わっても、インタラクションデザインの基本的な概念は変わりません。これらの概念を見てみましょう。目的を達成するためのデザインあなたのサイトやインタラクションが存在する目的は何でしょうか？目的を明確にして、アプリケーションによってこの目的を確実に達成できるようにします。魔法のようなインターフェース　最も優れたインターフェースとは、魔法のようにその存在に気づかないものです。「最も優れたインターフェースデザインは「存在していない」かのように思えるものです。データの読み込みや応答に時間がかかることもなく、ユーザーを悩ませることもありません。」と述べられています。ユーザビリティ　基盤となるシステムを、理解しやすく使いやすいインターフェースが好まれます。アフォーダンス　最も優れたインタラクションデザインとは、たとえ説明がなくてもどのように操作したらいいかわかるものです。つまり、有名なことわざを借りると「形態は機能に従う」のです。インタラクションデザイナーの学習能力使いやすいインターフェースは、すでにあるコンポーネントで作られます。優れたインタラクションデザイナーであれば、以前と似たようなデザインの課題に取り組むときには、車輪の再発明はしません。むしろ、決まったパターンを上手く使いこなせるのです。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。

アプリデザイン

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

サイトを安全に！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

Photoshopのバッチでファイルを一括で処理する方法【初心者向け】現役Webデザイナーが解説

Photoshopで同じような作業を繰り返すときに、もっと楽にできればいいのにと思ったことはないでしょうか？そんな時に便利なのが「バッチ」の機能です。バッチ処理を使えば、プログラムのように繰り返し作業が可能になります。例えば、画像をまとめてリサイズすることなども簡単です。そこで、今回はPhotoshopのバッチで画像ファイルを一括で自動処理する方法を紹介します。目次本記事ではこのような流れで説明していきます。バッチ処理のやり方はいくつかありますが、簡単で使いやすいドロップレットを使う方法を説明します。アクションを使って処理を記録するアクションを実行するドロップレットを作るドロップレットに画像をドラッグ&ドロップしてバッチ処理を実行する (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています) 大石ゆかり田島メンター！！たくさんの画像ファイルの大きさをいっぺんに変えたりとかはできないんですか～？田島悠介それなら、Photoshopのバッチ処理を使ってみよう。複数のファイルに対して同じ処理を一気に行ってくれる機能だよ。大石ゆかりぜひやってみたいです！田島悠介バッチを使う前に、まず行う処理の設定をする必要があるんだ。実際の手順を見てみよう。今回は例として、画像を640px × 480pxのサイズに縮小して保存するバッチ処理を扱います。今回は扱いませんが、tif形式の画像をjpg形式にしたり、シャープネスをかけたりというようなことを自動で連続して繰り返すこともできます。アクションを使って処理を記録するアクションとは、処理の系列を記録するものです。「ウィンドウ」メニューのアクションをチェックすることで呼び出せます。アクションには記録と再生の機能があり、記録ボタンを押せば画像処理の手順を記録し、再生ボタンを押せばアクション（＝処理の系列）を実行します。今回は画像を640px × 480pxのサイズに縮小する処理をアクションに記録するので、まずPhotoshopを開きましょう。（画像はまだ開いていません）「ウィンドウ」メニューの「アクション」をチェックします。するとPhotoshopの右下に、アクションウィンドウが表示されます。ここにある「新規アクション」（赤矢印）アイコンをクリックし、新規のアクションを作りました。新規アクションのダイアログが表示されるので、アクション名（今回は640×480）を入力し記録ボタンをクリックします。するとアクションウィンドウの記録ボタンが赤に変わり、記録が開始されます。（アクションの記録に失敗した場合は、停止ボタンで停止し、アクションをゴミ箱アイコンにドラッグし最初からやり直してください）流れがわかったところで、実際にアクションを記録してみましょう。今回は「画像を開く」を記録するために、「ファイル」メニューから「開く」を選びます。いつものように画像が開きます。ここで、アクションウィンドウに開く作業が記録されています。さらに画像解像度で、サイズを640px × 480pxに変更する処理を記録させるために、「イメージ」メニューから「画像解像度」を選びます。幅を640px、高さを480pxに変更したらOKボタンをクリックします。先程と同じように「画像解像度」の処理が記録されたことがわかります。次に「別名で保存」を記録させます。「ファイル」メニューから「別名で保存」を選びます。保存のアクションも記録されました。全ての記録が終了したら、アクションウィンドウで、停止ボタン（左の赤矢印）をクリックします。すると、記録アイコン（右の赤矢印）が灰色に戻ります。なお、バッチ処理のアクションを記録するときは「画像を開く」「画像を別名で保存する」が必須（重要です）になりますので、忘れないようにしましょう。田島悠介アクション機能については分かったかな？大石ゆかりあらかじめ指定しておいた一連の動作が、ワンクリックでできるようになるんですね！田島悠介アクション自体も便利な機能なので覚えておこう。次はバッチ処理でこのアクションを使用するよ。大石ゆかり今設定したアクションを、複数のファイルで実行するんですね。やってみます！ [PR] Webデザインで副業する学習方法を動画で公開中アクションを実行するドロップレットを作る続いてドロップレットを作ります。「ファイル」メニューから「自動処理 > ドロップレットを作成」を選びます。「ドロップレットを作成」のダイアログが表示されるので、必要項目を入力します。まず「実行」の部分にアクション名をセットします（上2つの赤矢印）。次に「”開く”コマンドを無視」にチェックを入れます（ここは重要です）。さらに「実行後」の項目を入力します。「別名で”保存”コマンドを省略」にチェック（重要です）を入れてから「選択」ボタンを押して処理結果を入れるフォルダを選びます。今回は新規フォルダを作成して保存することにします。次に「ドロップレットを保存」の項目で「選択」ボタンを押し、ドロップレットの名前（今回は640×480化）を入力します。するとドロップレットがデスクトップに作成されました。ドロップレットに画像をドラッグ&ドロップしてバッチ処理を実行するいよいよ最後の工程です。解像度を変更する画像を選択して、先ほど作成したドロップレット（640×480化.exe）のアイコンにドラッグ&ドロップすれば、バッチ処理が実行されます。まずは画像をドラッグします。作成したドロップのアイコンの上に重ねて、ドロップします。すると、Photoshopが自動的に立ち上がり、ファイルを順次処理していきます。処理した画像は指定した「新しいフォルダー」に記録されます。これで全て完了です。少し長くなりましたが、うまくいきましたか？ポイントは「重要」と書いた「ファイルの入出力の処理をアクションの中に記録すること」と「ドロップレットを作成するときに、開くコマンドを無視、保存コマンドを省略というところをチェックする」です。また、よくある失敗はファイルを読み込まない、ファイルを書き込まないというものです。バッチ処理の実行時は、Photoshopで逐一、画像を開いて、処理して、画像を保存するという様子が見えます。エラーが発生した場合はどこで止まっているかを確認して、次に実行する処理が何かを考えて対処してみてください。コラム実は私も！？独学で損する人の特徴「スクールは高いから独学で成功する」という気持ちの方は多いと思います。もちろんその方が金額は低く抑えられるでしょう。ただ独学には向き不向きがあり、実はスクールが向いている人も大勢います。そんな方のために参考として、

Photoshop

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

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

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