JavaScript
js
ECMAScript

JavaScriptのスクリプトを埋め込む3つの方法

JavaScriptをスクリプトを埋め込む3つの方法

JavaScriptを実行するための3つの方法.

最近, Webセキュリティ関連の勉強をしていて, スクリプト埋め込まれると大変だ~って話がいっぱい出てきたので, JavaScriptのhtmlファイルから呼び出し方を列挙しました.

インラインスクリプト

<script>タグを使って, その中に, JavaScriptのコードを書く方法.

例)

<!DOCTYPE html>
<html>
<body>
<script>window.alert('Hello world');</script>
</body>
</html>

外部スクリプト

jsファイルを別に作って, それをhtmlファイルで, <script>タグ読み込んで, 呼び出す方法.

alert.js
window.alert('Hello world');
<!DOCTYPE html>
<html>
<body>
<script src="alert.js"></script>
</body>
</html>

JavaScript疑似プロトコル

これが一番知られてなさそうだと思いました(自分が知らなかっただけ).

<a>タグのhref属性に, JavaScript:のあとにスクリプトを埋め込むことができます.

これをJavaScript疑似プロトコルと呼びます.

<!DOCTYPE html>
<html>
<body>
<a href="JavaScript:window.alert('Hello World');">ダイアログ表示</a>
</body>
</html>

クリックしたらちょっとしたスクリプト呼び出したいといったときに, 有効に使える技です.