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でよく使う数学記号を現役デザイナーが解説【初心者向け】

HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそも、HTML...

HTML

HTMLとCSSだけでポップアップ表示を作成する方法を現役デザイナーが解説【初心者向け】

HTMLとCSSだけでポップアップ表示を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...

HTML

HTMLでSASSを使う方法を現役エンジニアが解説【初心者向け】

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

HTML

HTMLでrequired属性を使って入力フォームに必須項目を作る方法を現役デザイナーが解説【初心者向け】

HTMLでrequired属性を使って入力フォームに必須項目を作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者...

HTML

HTMLで改行でずれるレイアウトの原因と対処法を現役エンジニアが解説【初心者向け】

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

HTML

HTMLのbr要素を現役デザイナーが解説【初心者向け】

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

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兆円以上の為替介入を行ったと言われています。 51%攻撃の対処法もし、51%攻撃が行われた場合、対処方法はありません。一説によれば、2040年頃になると、ビットコインで51%攻撃が実現可能になるそうです。これは、2040年頃になると、ビットコインのコイン自体が枯渇してしまうことで、新たなマイナーが生まれないことに伴い、正しいブロックチェーンを支持すること自体を辞めてしまうことが予想されるためです。つまり、その頃になると、51%攻撃が可能になるだけでなく、ビットコイン自体の価値にも大きな変化がみられる可能性があります。今回は、51%攻撃について解説しました。今後生まれる可能性があるものとして理解しておくと事業を作るにせよ仮想通貨を持つにせよ役立ち知識になるはずです。田島悠介最後に51％攻撃が起きたときにどうなるか、実際に起こる可能性についての話をしたよ。大石ゆかり起こってしまうと対処ができないということと、将来的に起こるかもしれない状態であるということですね。田島悠介マイニングプール同士の結託や大規模な資本の投入など、原因となりうるいくつかの要素についても復習しておこう。大石ゆかり分かりました。ありがとうございます！また、オンラインのプログラミングスクールTechAcademyでは、ブロックチェーンオンライン講座を開催しています。ブロックチェーン技術の仕組みを理解し、実際に分散型アプリケーションを開発することができます。現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間で習得することが可能です。この記事を監修してくれた方中本賢吾（なかもとけんご）アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークを利用した会員制SNS・ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用したシステム開発、店舗検索スマホアプリ開発など。その他にも地域の職業プログラマー育成活動を行い、2018年には小学生がUnityで開発したオリジナルAndroidアプリをGooglePlayでリリース。ゲームで遊ぶより作ろうぜ！を合言葉に、小学生でも起業できる技術力を育成可能で有ることを証明し続けている。

ブロックチェーン

入門から応用まで！HTMLの学習に役立つリファレンスサイト10選

HTMLで作りたい機能があるのに方法がわからない時、大きな味方になってくれるのが、リファレンスサイトです。今回はそんなHTMLのリファレンスサイトを10サイト紹介します。HTMLでの作業に確実に役立つサイトばかりなので、ぜひ参考にしてみてください。目次インジェクション攻撃とはHTMLインジェクションについて対処法監修してくれたメンターそもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。 HTMLにおけるおすすめのリファレンスサイト本記事では、下記のおすすめのHTMLリファレンスサイトにおける特徴を解説します。 HTMLクイックリファレンス逆引きHTMLリファレンス TAGindex HTMLタグボード MDN HTMLリファレンスサルワカとほほのWWW入門 HTMLリファレンス HTML5 & CSS3 リファレンス HTMLリファレンス（２） HTMLで使えるタグを網羅しているWebサイトから、目的に応じて検索できるWebサイトまで実にさまざまな種類があります。利用シーンや、ご自分の目的に合わせて、活用するWebサイトを適宜見つけていきましょう。 HTMLクイックリファレンス HTMLを書いていて何度もお世話になるサイトです。 HTMLのリファレンスの他にも、CSSやJavaScriptなどの、Webデザインで使用される言語のリファレンスも載っています。サイト作成における全般で役立つので、困ったらこのサイトを見に来ると良いでしょう。 HTMLクイックリファレンス逆引きHTMLリファレンス Webデザイン初心者向けのリファレンスサイトです。リファレンスサイトと聞くと、言葉が難しく中級者向けのイメージがありますが、このサイトはそうではなく、初心者向けに分かりやすく書いてあります。他のリファレンスサイトがとっつきにくいと感じた方にオススメです。逆引きHTMLリファレンス TAGindex 基本的なリファレンスの他にカラーチャートなど、色に関わるリファレンスも多いのが特徴です。さらには、色の組み合わせチェックも行うことができるので、デザインに困ったときにも使用したいリファレンスサイトです。図やソースコードと共に実際の表示を確認しながら学習できるので、知らないタグが出てきてもイメージしやすいでしょう。 TAGindex HTMLタグボード初級者から中級者まで広く使えるリファレンスサイトです。初心者向けのホームページ作成講座や、Webデザインの基礎、さらには収益化の方法など、HTMLを学ぶ上で知っておいた方が良い情報が詰まっています。自分でオリジナルサイトを作ってみたいという人は参考になるはずです。 HTMLタグボード MDN HTMLリファレンス HTMLの隅から隅まで情報が載っているリファレンスサイトです。見やすいデザインもオススメです。各タグごとに仕様やブラウザでの実装状況を確認できるので、IEなど様々なブラウザを相手にする作業を行う場合に役立つでしょう。 MDN HTMLリファレンスサルワカ HTMLやCSSの解説を、とてもわかりやすいUIと共に紹介しているWebサイトです。他サイトと比較しても特にCSSに関する記事が豊富なので、HTMLと併せてCSSも学習したい初心者の方に最適でしょう。サルワカとほほのWWW入門 HTMLタグについて、1つひとつ丁寧に解説しているWebサイトです。 HTML以外にも、JavaScriptやCSS、その他のプログラミング言語など、Webサイト制作全般に関する非常に多くの情報が載っています。とほほのWWW入門 HTMLリファレンス mainなどの要素の他に属性情報も多く載っています。また、階層毎に分かれた見やすいページデザインになっているのも特徴です。 HTMLリファレンス HTML5 & CSS3 リファレンス HTMLにおける基礎情報の他、CSS3に関する膨大な量のデータを有するWebサイトです。セレクタの使い方に留まらず、HTMLの歴史や文書構造を丁寧に解説しています。現代のWeb制作の知識だけでなく、過去の知識も吸収したい方向けにおすすめです。 HTML5 & CSS3 リファレンス HTMLリファレンスすべてのリファレンスは載っていませんが、よく使用されるタグが載っているリファレンスサイトです。リファレンスですが情報として見やすく、あまり混乱したくない初心者の方におすすめのリファレンスサイトです。単純に知識をつけるという意味でも役立てられるはずです。 HTMLリファレンスまとめ以上、HTMLでの作業に役立つリファレンスサイトをまとめました。 HTMLクイックリファレンス逆引きHTMLリファレンス TAGindex HTMLタグボード MDN HTMLリファレンスサルワカとほほのWWW入門 HTMLリファレンス HTML5 & CSS3 リファレンス HTMLリファレンス（２）リファレンスサイトを把握することで、今後のHTML学習に役立てられます。上記でご紹介したWebサイトをぜひチェックしていただき、ご自分に合ったリファレンスサイトを活用していきましょう。今回の記事は以上です。 [PR] Webデザインで副業する方法とはHTMLを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい HTMLを学習していて、このように思ったことはありませんか？テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

HTML

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

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

サイズ指定に役立つ！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

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

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

目次

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

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