13,005
回編集
「PHPの基礎 - XSS対策」の版間の差分
ナビゲーションに移動
検索に移動
→htmlspecialchars関数の使用
| 45行目: | 45行目: | ||
* データベースへの保存時 | * データベースへの保存時 | ||
* HTMLとして解釈させる場合 (信頼できるソースからのデータの場合のみ) | * HTMLとして解釈させる場合 (信頼できるソースからのデータの場合のみ) | ||
<br><br> | |||
== DOMベースXSS対策 == | |||
DOMベースXSSは、クライアントサイドのJavaScriptによってDOMを操作する場合に発生するため、サーバサイドのhtmlspecialchars関数だけでは完全な防止は困難である。<br> | |||
<br> | |||
DOMベースXSSの対策には、クライアントサイドでの適切な入力検証やDOMの安全な操作方法の実装が必要となる。<br> | |||
例えば、innerHTMLの代わりにtextContentを使用する等の対策が必要となる。<br> | |||
<br> | |||
==== DOMのプロパティとメソッドの安全な使用 ==== | |||
* innerHTMLの代わりに、textContentを使用してテキストを設定する。 | |||
* setAttribute関数の代わりに、直接プロパティを設定する。 | |||
*: 例: element.id = 'newId' | |||
<br> | |||
==== URLパラメータの処理 ==== | |||
* location.hashやlocation.searchからの値を使用する前に、<code>encodeURIComponent</code>関数でエンコードする。 | |||
* URLSearchParams APIを使用して、URLパラメータを安全に解析する。 | |||
<br> | |||
==== テンプレートリテラルの活用 ==== | |||
<syntaxhighlight lang="javascript"> | |||
// JavaScriptファイル | |||
// 危険な実装 | |||
element.innerHTML = `Welcome ${userInput}`; | |||
// 安全な実装 | |||
element.textContent = `Welcome ${userInput}`; | |||
</syntaxhighlight> | |||
<br> | |||
==== イベントハンドラでの入力値の検証 ==== | |||
<syntaxhighlight lang="javascript"> | |||
// JavaScriptファイル | |||
document.getElementById('userInput').addEventListener('input', function(e) { | |||
const input = e.target.value; | |||
if (!/^[a-zA-Z0-9]+$/.test(input)) { | |||
e.preventDefault(); | |||
alert('特殊文字は使用できません'); | |||
} | |||
}); | |||
</syntaxhighlight> | |||
<br> | |||
==== Content Security Policy (CSP) の実装 ==== | |||
<syntaxhighlight lang="html"> | |||
<!-- HTMLファイル --> | |||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"> | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||