読者です 読者をやめる 読者になる 読者になる

はむはむエンジニアぶろぐ

このブログのコンセプトは"ハッキングの為なら愛する家族を傷つけることをいとわない" 自分にとってエンジニアリングは "手段ではなく生きる目的" である

JavaScriptを動的に組み合わせるべきではない

JavaScript セキュリティ PHP リファクタリング

例えば、このようにPHPをJavaScriptで、動的に組み立てられているコードには問題点が2つある。

<script type="text/javascript">
    var hoge = '<?php echo $hoge ?>';
</script>
  • セキュリティ面
  • メンテナンス面

である。

セキュリティ面

先ほどのコードであるが、 $hoge に悪意のあるコードが入っていた場合、XSS攻撃が成立してしまう。

<?php
    $hoge = "';</script><script>alert('XSS攻撃');</script>";
?>
<script type="text/javascript">
    var hoge = '<?php echo $hoge ?>';
</script>


htmlspecialchars を使ってサニタイジングしよう。

<?php
    $hoge = "';</script><script>alert('XSS攻撃');</script>";
?>
<script type="text/javascript">
    var hoge = '<?php echo htmlspecialchars($hoge, ENT_QUOTES, 'UTF-8'); ?>';
</script>


メンテナンス面

JavaScriptとその他の言語が、混じっていて動的に組み立てられている場合、かなりコードの見通しが悪いです。
当然、テスト書きにくい(テストかけるのか?)ので、後からメンテナンスする人はとっても嫌な気持ちになります。

JavaScriptとPHPは、完全に分離しましょう。

<?php
    $hoge = "\"><script>alert('XSS攻撃');</script>";
?>
<form>
    <input name="hoge" type="hidden" value="<?php echo htmlspecialchars($hoge, ENT_QUOTES, 'UTF-8'); ?>">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
    var hoge = $('[name=hoge]').val();
</script>

PHPは、hiddenのvalueの中に入れるのが、お作法的にいいです。
もちろん、hiddenのvalueの中に入れる際も、サニタイジング必須です。


感想

本当は、メンテナンス性の話だけするつもりだったが、hiddenのvalueの中に入れておけば安全という誤った情報を見かけたのでそんなわけ無いだろうと思い確認のため検証してみました。