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

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

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

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

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

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

まずUIを修正中。
見た目を以下のリンクみたいにしたかったのでやってみた。

Alternate Fixed & Scroll Backgrounds

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.

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

要素をフェードイン・フェードアウトする | JavaScript逆引き | Webサイト制作支援 | ShanaBrian Website

JavaScriptを有効にしてください。 要素をフェードイン・フェードアウトする方法をご紹介します。 サンプル Fade-In Fade-Out この関数はCSSのopacityの値をsetIntervalで変更して効果を実装しています。 引数 フェードインはfadeIn関数、フェードアウトはfadeOut関数を使用します。 引数名 型 説明 第一引数必須 element Element 適用する要素(エレメント) 第二引数 time number 効果時間(ミリ秒で指定) 第三引数 callback Function 完了後のコールバック関数 サンプルコード JavaScript逆引きリファレンス一覧へ戻る


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

SPAでのセッション管理とセキュリティ – Qiita

編集履歴 ※ SessionStorage→LocalStorage(永続化される方はこちらだった) ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 Frontend Meetup vol.1 – SPAを語り尽くす会! のLT資料です。 フロントエンドのガチ勢には当たり前の内容になるかもしれません。 …

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

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

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

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

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

【脱jQuery】.load()で別ページから共通パーツを読み込むのをネイティブに書き換え

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

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

調べたら別途読み込んでやるようでした。

JavaScriptファイルの動的読み込みと完了状態を取得する

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

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

コメント

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