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

研究
Sanaan Mazhar at Pexels
この記事は約2分で読めます。

この記事は1年前の記事です。当時の情報、理解に基づいておりますのでご留意ください

はじめに

firebaseチャット試作品 - maya.pg.
firebaseチャット試作品 - maya.pg.

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

  • これログイン後にしか見せてはならないロジック見せちゃ危なくないか。
  • UIが拙いからなんとかしよう。

まずUIを修正

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

Alternate Fixed & Scroll Backgrounds | CodyHouse

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

要素をフェードイン・フェードアウトする | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website
JavaScriptの逆引きリファレンス「要素をフェードイン・フェードアウトする」を掲載しているページです。

セキュリティ改善

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

SPAでのセッション管理とセキュリティ - Qiita
編集履歴 ※ SessionStorage→LocalStorage(永続化される方はこちらだった) ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 概要 Fr...

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

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

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

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

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

【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え
こんにちは。なかなか梅雨が明けずバイク乗り、自転車乗りの方はロードバイクに跨がれない季節を迎えていますが、今回はroadではなく、loadです。ウェブ...

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

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

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

JavaScriptファイルの動的読み込みと完了状態を取得する
外部JSファイルの動的読み込み 外部JSファイルを任意のタイミングで読み込みたいとき、scriptタグを生成してdocumentに追加すればロードしてくれます。 function loadScript(src, call…

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

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

コメント

タイトルとURLをコピーしました