セキュリティについて
今日はセキュリティについての学び
よく聞く言葉の脆弱性について
これはアプリケーションの弱点を作り出す仕様上の問題
自分なりの言葉にすると
作り方が悪いので(欠陥品)、弱点があってユーザーの情報盗めるよ。
ってことかなと。
セキュリティがないと色々な攻撃方法でユーザーに不利益を与える欠陥webページ(アプリケーション)になると。
その色々な攻撃方法が
XSS・・・JavaScriptを用いた攻撃方法
というのがあり、それも二種類もある。
反射型XSS・・・悪意のあるURLをクリックさせることにより、脆弱性のあるwebアプ
リケーションに引き込み、例えば個人データを抜き取るイベント発
火をさせるといったようなもの
格納型XSS・・・脆弱性のある投稿サイトなどで、悪意のあるスクリプトを投稿として
埋め込み、ユーザーがそのサイトに訪れると、イベント発火し、個人
データが抜き取られるといったようなもの。
他には
セッションハイジャック・・・セッションIDを盗むまたは乗っ取る攻撃
や
CSRF・・・webアプリケーションに不正なリクエストを行う攻撃
や
SQLインジェクション・・・外部からの入力により、アプリケーションが想定しない
SQL文を実行することにより、認証突破し情報を盗む攻撃
がある。
対策として
XSS対策・・・文字参照というHTMLの文字を特殊文字として変換すること。
セッションハイジャック対策・・・フレームワークを用いる。
XSSを防ぐことや安全なネットワークの利用。
セッションIDの固定化を防ぐように認証を都度変更
CSRF対策・・・トークンの埋め込みやパスワードの再入力をさせる。
SQLインジェクション対策・・・SQL文中で意味を持つ特殊文字をエスケープしたり、
プレースホルダーを用いること。
が挙げられるそうです。
半分ぐらいは分かりそうですが、実際どうすればできるのか？
Ruby on railsであれば<%= %>でXSSへの対策はできているそうで、それの配置ミスがないかなどは実際、やりながら覚えるしかないのかなと思いました。
今回はこういう攻撃や防ぐやり方があるんだな〜と思うぐらいの理解度にはなりますが、知っておくことがまずは大事かと感じました。
最後にセキュリティはどれか一つの対策ができていれば良いというわけではなく、総合的に対策ができている必要があるということです。
JavaScriptの練習問題を通して2
昨日の続き
コントローラーの方でも、レスポンスをjsonで行うために
というところまで記載していました。
まずは
❌レスポンスをjsonで行うため
⇨○レスポンスをjsonという形式で返却する
この部分は、こういった書き方の方が正しい気がしたので、上記部分の訂正をしておきます。
ここからがいまいちピンと来なかったところになるので、思い出しながら、資料を見直しながら書いていこうと思います。
正常にレスポンスが返ってきた際に使用するのが、
onloadプロパティになります。
XHR.onload = () => {}
この中に記載するのが、テキストを投稿するアプリケーションなので、
テキストを投稿した際に、そのテキストの内容がブラウザに反映されるようにするための処理を記述します。
そこで使用するのが
responseプロパティ
const item = XHR.response.テキストの情報を抽出するためのキー
(今回はコントローラーのcreateにてjson:形式に変換しているキーと投稿されたテキストの内容が紐づいている)
を変数itemに入れ、
item内に格納されたメモの情報をもとにし、ブラウザに表示するためのHTMLを生成し、
const html = `・・・・`
変数htmlへ格納します。
この変数htmlをブラウザのどこに表示するのかを決めるのが
insertAdjacentHTMLメソッドで
これはHTMLをある要素の指定した箇所に挿入するものです。
<挿入したい要素名>.inserAdjacentHTML(挿入したい位置,挿入したいHTML)
挿入したい位置は
beforebegin(要素の直前)
afterbegin(要素内部の最初の子要素の直前)
beforeend(要素内部の最後の子要素の直後)
afterend(要素の直後)
とあり、挿入したいHTMLは今回、htmlとなる。
挿入したい要素名はまた
document.getElementById("・・・")
にて取得し、変数に入れておき、挿入したい要素名のところに入れる必要がある。
最後にテキストを投稿した際、テキスト入力欄に入力した文字が残らないよう
formの値を取得し(再度、document.getElementByIdを使用し変数へ格納)、その中身を空にするため
formの値を取得した変数.value = ""
とすることで、投稿した際のテキストがテキスト入力欄よりリセットされるようになる。
ここまで記述した内容が
XHR.onload = () => {}
の
{}内の中身となる。
正直ものすごく長いと思いました。
この後に、もしレスポンスに何か問題があったら、エラーメッセージを表示できるようにするための
if (XHR.status != 200)(⇦HTTPステータスコード) {
alert(・・・ )
return null
}
もXHR.onloadの
{}内に追記されます。
ここまでの説明も長かったですが、実際書いている途中で読んでるだけよりも少し理解できたような気がしました。(あくまで感覚ですが・・・)
JavaScriptの練習問題を通して１
おさらいの流れを記述してみようと思います。
テキストを投稿するアプリケーションはできている状況で、
このアプリケーションを非同期通信にしますよ、という流れです。
まずはページが読み込まれた時に実行されるように
window.addEventListener
と
function ...(){}
を使用。
その後、投稿した時(クリックした時)にイベントを発火させるように
const abc(変数に格納)=document.getElementById("...")(投稿した時の要素を取得)
格納した変数を利用し、イベント発火させるのに
abc.addEventListener('click', => {}
この中に投稿が重複しないように
abc.addEventListener('click', (e)=> {e.preventDefault()}
が入ったり、投稿した時に投稿した内容をサーバーサイドへ送信するために、
フォームの要素を取得して
const formData = new FormData(document.getElementById("..."))
非同期通信にするために
const XHR = new XMLHttpRequest()
からの
XHR.open("HTTPメソッド","パスの指定",true)
XHR.responseType = "json"
XHR.send(formData)
コントローラーの方でも、レスポンスをjsonで行うために
思った以上に遅い時間になったため、半分ぐらいですが、明日続きを記載しようと思います。
JavaScriptの非同期通信
同期通信と非同期通信
言葉だけじゃあまりピンときませんでしたが、実際こういったアプリはあるな〜と思いました。
同期通信はリクエストのたびに、ブラウザが再読み込みされ、非同期通信はブラウザの再読み込みがなく、一部の変更となる。
LINEとかのチャットツールによく見られるものかなと思います。
さて、これを行うための裏側では
FormDateオブジェクト
XMLHttpRequestオブジェクト
この中の
open()メソッド
send()メソッド
や
onloadプロパティ
responseプロパティ
insertAdjacentHTMLメソッド
preventDefault()メソッド
responseTypeプロパティ
などが動いてました。
レスポンスの処理の段階がうまく理解できていないこと、何が何でどこでどう繋がってなんでそのコード書いてんの？という状態になってしまっているようです。
練習問題を行っているときに、思いました。
なので、明日は再度、レスポンスのところを理解できるよう努力し、もう一度練習問題をしたいと思います。
新しい知識が増えるたびに、書き方も覚えなくてはと思いますが、書き方って覚える必要があるのか？調べればわかるから、覚えなくてもいいのか？
どういった時に、このプロパティやメソッド使うよね。ってことがわかればいいのかと思考しながらやっていきたいと思います。
最近のブログはアウトプットというより、思考の整理と感想みたいになってるな〜。
JavaScript 編集編
まず今回学んだ単語やメソッドを羅列してみます。
オブジェクト
プロパティ
メソッド
windowオブジェクト
documentオブジェクト
DOMツリー
document.getElementById("id名")
document.getElementClassName("class名")
document.querySelectorAll("セレクタ名")or(".クラス名")or("#id名")
script要素
イベント
イベント発火
addEventListener()
インラインスタイル
setAttributeメソッド
removeAttributeメソッド
this
getAttributeメソッド
debugger
forEach
innerHTML
といったようにずらっと並べるだけでも一苦労。
ただ、関連付くものが多いので、一つの流れとして覚えていけると楽だなと思いました。
一つ一つの意味をここに記入していくと、長くなるのと、本日の自分の体力が持ちそうにないので、今回はこういった書き方をさせてもらいました。すみません。
また、明日、明後日も勉強は続いていくので、今日はこういったことを学んだぞ！と自分に言い聞かせるようとして残しておこうと思います。
コードの記述は読みやすく
コードを記述する際は、自分もですが、他の人から見てもわかりやすいコードの記述を心掛ける。
これを心掛けることで、
・個人・組織の生産性が上がる
・保守性が上がる
・柔軟な開発体制が構築できる
というメリットがある。
実装した機能に影響を与えず、ソースコードを読みやすい状態に変えることを
「リファクタリング」
という。
・具体的には変数や関数を記載する際、わかりやすい名前に変えること。
・ネストの中のネストを避けること。
・条件式を簡潔化する。
・複雑な条件式は分解し、細かく戻り値が出るようにする。
などがある。
プラスでコメントを残すこともありである。
ただし、コメントは一文で簡潔に記載する。
ときには、コメントが無い方が良い時もあることは知っておく。
今回はこのようなことを学びました。
そして、ブログ内でちょっと文字を大きくする機能を使ってみました^ ^
JavaScript 関数編
関数宣言・・・標準的な関数の定義。
無名関数・・・関数を多く使用するコードであるときに使用。関数名の重複を避けるこ
とができる
即時関数・・・流用する可能性のない関数を定義する。別途関数を定義する手間がない
アロー関数・・無名関数、即時関数においてより省略したいときに使用する。
とのこと。
まず、関数を定義するのはfunctionを使用します。
そして、関数宣言と関数式があり
関数宣言は
function 関数名(hello、calcなど)(引数){
関数内の処理(console.log('○○○')、return num1*num2など)
}
という形で、引数がなくても()の記入は必要となる。
関数式は
変数(const helloとか) = function(引数){
関数内の処理
}
という形となる。
関数宣言と関数式の違いは記述方法も違うが、
関数宣言は宣言前に関数を記述していても、先に読み込まれるという特徴がある。
この場合、関数を先に定義していてもエラーが起きない。
例
hello()
function hello() {
console.log('hello')
}
⇨エラー起きない
関数式の場合は、先に関数を記述し、その下に関数式を記述すると、先に記述した関数が定義されていないため、エラーが起きます。
例
hello()
const hello = function(){
console.log('hello')
}
⇨エラー起きる
といった感じです。
無名関数は関数式で記述されるfunction(){}の部分になります。
即時関数は関数を定義すると同時に実行まで行う関数。
アロー関数はfunctionの記述を省略し、=>で関数を定義します。
最近はアロー関数がよく使われるらしいので、最後にアロー関数の例を記述して終わります。
例
const 変数名(countNumなど) = (numとか) => {
処理(console.log(num)など)
}
(countNum(1)とか)
