【CSS】格好いいUIとセキュリティの為に使ったあれこれ

Contents

はじめに

まだ名前のつかないFirebaseサンプルアプリ。
本当にHTMLファイルは1枚で済んでいたのだけど、触っていて気になるところが出てきた…

見た目を以下のリンクみたいにしたかったのでやってみた。

また、Aタグジャンプだと遷移が分かりにくかったのでフェードアウトさせてみました。

SPAはセキュリティ危ないんじゃないか点については既に言及されていました。

考えた挙句こういうファイル構成にしました。

partsフォルダにはログイン後に使える画面、jsが置いてあり

ログインしている場合は→

UIを後から読み込みます。

なおpartsフォルダは直アクセスできないよう.htaccessを置いたら幸せになれると思います。
jQueryが染み付いているのでjavascript界隈を叩き込むべく、以下のサイトを参考にしました。

ところが、parts.htmlにこう書いててもapp.jsを読み込んでくれない。

<script src="/parts/app.js"></script>

調べたら別途ファイルを動的に丸ごと読み込んでやると幸せになれるようでした。

ちょっとキャッシュがしつこかったけれどまあ動作はどうにかなりました。
あとはログイン後の画面のメニューのUIをなんとかします。

なお、表に見えていてはならないファイル群について
Firebase Storageならば可視範囲を決められるのでそちらに置けばいいんじゃないかとこれ書いてて気がついた。
やってみようか迷ってます。