HTML5のLocal Storageを使ってはいけない（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Randall Degges - Please Stop Using Local Storage 原文公開日: 2018/01/26 著者: Randall Degges 日本語タイトルは内容に即したものにしました。 画像は元記事からの引用です。 初版公開: 2019/10/19 追記更新: 2024/04/05 -- リンク情報を記事末尾に移動しました 本気で申し上げます。local storageを使わないでください。 local storageにセッション情報を保存する開発者がこれほど多い理由について、私にはさっぱり見当がつきません。しかしどんな理由であれ、その手法は地上から消えてなくなってもらう必要がありますが、明らかに手に負えなくなりつつあります。 私は毎日のように、重要なユーザー情報をlocal storageに保存す
AWS 診断を事例としたクラウドセキュリティ。サーバーレス環境の不備や見落としがちな Cognito の穴による危険性 - Flatt Security Blog
こんにちは。本ブログに初めて記事を書く、株式会社 Flatt Security セキュリティエンジニアの Azara(@a_zara_n)です。普段は Web やプラットフォームの診断やクラウド周りの調査、Twitter ではご飯の画像を流す仕事をしています。よろしくお願いします。 クラウドサービスが発展し続ける今日この頃、多くの企業がパブリッククラウドやプライベートクラウドなどを駆使し顧客へサービス提供しているのを目にします。そのような中で、サービスが利用するクラウドにおいて設定不備や意図しない入力、構成の不備により顧客情報や IAM をはじめとする認証情報が脅かされるケースが多々あります。 本記事では、そのような脅威の一例をもとにクラウドサービスをより堅牢で安全に利用する一助になればと、攻撃手法や対策などについて解説をしていきます。 また、私の所属する 株式会社 Flatt Secur
こんにちは、ソウゾウのSoftware Engineerの@gentleです。連載：「メルカリShops」プレオープンまでの開発の裏側の6日目を担当いたします。 メルカリShopsは既存のメルカリアプリの中に独立したWebアプリケーションを組み込む形で開発いたしました。本記事では、Webアプリケーションとして作成されたメルカリShopsを、既存のメルカリアプリでWebViewを使って表示する際のアプリとの連携について解説いたします。 メルカリアプリとの連携 メルカリShopsはメルカリアプリ内に組み込まれておりますが、独立したWebアプリケーションとして存在しており、WebViewにてShopsのWebページを表示する形になっています。しかし、単純にアプリ内でWebページを表示しただけでは、アプリとしてのUI/UXを満たせないため、WebViewとアプリとの連携が必要です。 アプリとの連携
HTTPにおけるCookieとは、クライアントのウェブブラウザ上に保存された一時的なデータを指します。クライアント側のJavaScriptでも、サーバー側のHTTPヘッダーでもクッキーの読み書き・修正・削除が可能です。
フロントエンド開発で気をつけていること忘備録
はじめに 本業がSIerの身分からフロントエンドに足を踏みいれてしばらくが立ちました。自分の忘備録も兼ねて、私がフロントエンド開発で気をつけていることを技術要素ごとにまとめてみました。 HTML 用途に応じた適切なタグを利用する。SEO対策やアクセシビリティ向上の効果があり、開発者にとってもHTMLの構造を把握しやすくなる。 aタグやimgタグのalt属性やrole属性、label属性などを適切に設定することでアクセシビリティの向上を図る。 CSS 余計なプロパティは書かないこと。画面の表示に影響がなくとも、後から追加した要素に予期せぬ悪影響を与えるリスクある。また、後でcssを見返したとき理解に苦労する。(普通はプロパティ１つ１つにコメントは入れないと思うのでなおさら) 複数のプロパティを記述する順番を統一する。 (Vscodeの拡張機能でできる） 余白の取り方について、兄弟要素間にはm
やりたいこと scrapboxでブックログがしたい。 しかし、書籍情報を手入力するのが手間。コピペするのもいちいちブラウザで調べるのが手間なので自動化したい。 ⇒半自動化するpwaをつくりました。 toscrapb（スマホ用です） github 主な機能 1.ISBNバーコードをカメラで読み取り 2.Google Books APIから書籍情報取得(タイトル、著者名、出版日、概要、書影) 3.タイトルと著者名をscrapboxのリンク形式(角括弧[]で囲む)にしてフォームを作成 4.予め設定したワードもscrapboxのリンクに自動で置換 5.scrapboxのAPIを叩く おまけで他のアプリ(Twitterやブラウザ)からの共有も可能にしています。web上の記事のタイトル、urlなどを取得して本文に反映できます。 技術的な面 作業環境 ubuntu 18.04 android 8.0.0
皆さんこんにちは、アレクサのボイスをマツモトにしたいおっくんです。 去る 2021 年 5 月 11 日に Deno 1.10 がリリースされました。 今回も、リリース内容の中から気になったものをピックアップして、紹介したいと思います。 実行環境 macOS Catalina 10.15.7 アップデートのやり方 今回は Deno 1.9.2 から Deno 1.10.1 へのアップデートを行います。 (既に 2021 年 5 月 12 日 に Deno 1.10.1 にアップデートされていました。) アップデートする Deno を導入した時のコマンドは以下の通りです。 curl -fsSL https://deno.land/x/install/install.sh | sh アップデートは、以下のコマンドで実施しました。 $ deno upgrade # バージョン指定する場合は次のコ
皆さんこんにちは。最近、玄米生活を始めました、おっくんです。 去る 2021 年 11 月 9 日に Deno 1.16 がリリースされました。 今回も、リリースノートを参考に 変更事項の気になるところを紹介します。 実行環境 Docker イメージ denoland/deno:centos(確認時点では Deno 1.16.1 でした) Deno 1.16 Deno 1.16 での変更事項をDeno 1.16 リリースノートを元に確認します。 deno.com fetch API が、ファイル URL をサポートするようになりました これまで Deno では、 fetch を web 標準の API として、ネットワークリソースにアクセスするためのみに使用してきました。 また、ローカルファイルアクセスには、Deno.readfile()などのメソッドが使用されてきました。 このリリースで
【Vue.js】【CRUD】Vue.js(Nuxt.js)とRailsでユーザー新規登録・ログイン・退会・ログアウト・編集を実装してみる - Qiita
【Vue.js】【CRUD】Vue.js(Nuxt.js)とRailsでユーザー新規登録・ログイン・退会・ログアウト・編集を実装してみるRailsauthenticationVue.jsNuxtdevise_token_auth はじめに Vue.js(Nuxt.js)とRailsで新規開発を行っており、JWTを用いてユーザー新規登録・ログイン・ログアウト等の認証周りを担当したのでここに記しておきます。備忘録。 今回はauthmoduleとdevise_token_authを使用して実装しました。 別々で解説している記事はあったのですが、全体の流れがわかる記事が少なかったので、執筆しました この記事が見知らぬ誰かの糧となれば良いなあと思っております〜〜 authmodule公式 devise_token_auth公式 環境 MacOS yarn 1.21.1 node 12.0.0 vue
スマホ専用、ブックマーク促進プログラム。(jquery) - ホームページ制作・システム構築・ＤＢ設計のユタシステム
スマホ用のランディングページを作る機会があって、そのクライアントからお気に入りに入れられるようなjavascriptプログラムを作って欲しいというオーダがあった。しかもホーム画面へ追加できるプログラムというオーダだ。 そのクライアントから以前も同じオーダがあったのだか、「スマホの場合、PCブラウザと違って、そのようなjavascriptは存在しない、それはスマホのネイティブ機能を触ることになり、そのようなプログラムは存在しないし、存在してはいけない」という回答をしていたのだが、先日「これこれ」と見せられたのが、 http://qiita.com/narikei/items/4240f03542f29e313989 だった。 確かにブクマを促進しているが、そこまでである。できることは促進まで。 ローカルストレージを使ったり、一週間に2回訪問しないと表示されなかったりとか制約がいろいろある。S
JavaScriptのLocalStrage（ローカルストレージ） の使い方を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptのLocalstrage（ローカルストレージ）の使い方について解説しています。ローカルストレージはJavaScriptを用いてブラウザにデータをKey-Value型で保存する仕組みになっています。クッキーより扱えるデータ量も多く、必要に応じて送信されるなどの点が異なっています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 JavaScriptのLocalstrage（ローカルストレージ）の使い方について解
Storageブラウザの保存領域にデータを格納するためのオブジェクト 保存と取得 データは同期的に保存される。 localStorage.setItem('key', 'value'); //保存 const result = localStorage.getItem('key'); //取得 console.log(result) //json形式で保存 const obj = {"a": 1, "b":2}; const json = JSON.stringify(obj) localStorage.setItem('json', json) const json_result = localStorage.getItem('json') console.log(json_result) >>> {"a":1,"b":2} データの確認 ブラウザの検証ツールからapplication
はじめに 引き続きJavaScriptの勉強をしました。 今回はブラウザにデータを保持するものを作りたいと考え、会社の研修で使った紙の資料である「行動習慣チェックリスト」をデジタル化してみました。 作ったもの 日付のところに〇△×をセレクトボックスから選択し、1カ月の習慣を記録していきます。 localStrageを用いることで集計したデータはブラウザ上に保持されます。 コードはかなり冗長で汚くなってしまったので今回は省略します。 今回の経験で学んだこと localStrage ブラウザにデータを保持する際に使ったもの。 今回は日毎にチェックした値を保存している。 当初はCookieを使用する予定だったが、こちらの方が使いやすそうだったので変更。 localStrageはKeyとValueのセットで使用され、値は文字列で使用される。 以下に簡単な例を載せます。 // Keyに値をセットする
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
メルカリShopsのためのWebViewの技術 | メルカリエンジニアリング
JWTなどのTokenをlocalstrage(HTML5の)に保管することについて
Google Books APIから取得した書籍情報をscrapboxに送るpwa - Qiita
Deno 1.10 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
Deno 1.16 へのアップデートと変更事項まとめ - 虎の穴開発室ブログ
【javascript】Storage - Qiita
JavaScriptで実際に動くものを作ってみた_2 - Qiita