SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
仮想DOMの作りかた - Qiita
どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでくださるとうれしいです。 それでは記事本文です。どうぞ、 はじめに この記事はReactやVue, Angular等のモダンなフロントエンドフレームワークの基礎部分となっている仮想DOMを作ってみようという記事です。 形式は、先日私が作成した仮想DOMと同じモノを順を追って実装してみるという形でやります。 完成形はここ(https://github.com/UMASHIBA1/UMASHIBAVirtualDOM) にあります。 ※もしよければスターください。すごくよろこびます。 この記事を読むには TypeScript
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.28 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
Vueのカレンダー | Advent Calendar 2019 - Qiita
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
Auth0を使ってSPA(Vue.js, Python)の認証機能を作ってみた - JX通信社エンジニアブログ
はじめに インターンでお世話になっている、コウゲと申します。現在担当させていただいている仕事は業務で使用している管理画面のマイクロサービス化です。 マイクロサービス間をつなぐ認証機能が必要だったので、認証プラットフォームとして使いやすそうな 「Auth0」で どんなことができるのか、実現したいことは可能なのかを検証してみることになりました。 なぜAuth0なのか ダッシュボードの設定 + 少ないコード で認証機能が簡単に実装できる。 Auth0専用ライブラリやSDKが多数存在し、目的に応じてそれを利用することで 簡単にログイン機能を実装することができる。 実現したいこと 発表 ありがたいことに、調べた結果を社内で発表する場を設けていただきました。 ブログの内容より少し詳しく書いています。読んだら即実装できるようなスライドを心がけて作りました! speakerdeck.c
Web フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由 - Qiita
Web フロントエンドフレームワーク選定前に知っておくべき Angular の 6 つの問題点と、それでも Angular を選ぶ理由JavaScriptAngularフロントエンド 2019/12/04 追記 @okunokentaro さんが熱いアンサー記事を書いてくれました。 Angularでの開発を快適に進めるために知っておきたいこと https://qiita.com/okunokentaro/items/503ab7a4c7601b564de0 https://gist.github.com/okunokentaro/dc4cd470999fd90aba73423d09a37485 本当に本当にありがたいです。この短時間でこんな良質の記事が書けるのは本当にスゴイ。 Angular コミュニティの暖かさと熱さを感じる 1 日でした。この記事もぜひ参考にしてください。 （ただ、「A
すべての新米フロントエンドエンジニアに読んでほしい50の資料 - Qiita
はじめに さいきんのWebはSPA技術を中心としたフロントエンドが賑わっていますね💪 従来サーバーサイドを扱っていた人もフロントを触る機会が増えていたり、これからプログラミングを学んでいく人も、フロントエンド領域に興味を持っているのではと思います。 そこで、フロントエンドの経験が浅い方や初学者向けに、おすすめのドキュメントや勉強すべき領域をまとめました。 とりあえず動けば良い段階から一歩進んで、フロントエンドエンジニアとして、良いアプリケーションを作るために必要な知識を浅く広く紹介します。 ※補足 新米と表記しましたが、実際には新卒や未経験でなく、新卒2~3年目の若手フロントエンドエンジニアやフロント分野に苦手意識のあるバックエンドエンジニアの方を対象としています。 数日で目を通せるような内容ではないため、マイルストーンやスキルセットの一つの参考にして頂けると幸いです。 フロントエンド入
Frontend/BackendのOAuth2.0クライアント書いてみた - Got Some \W+ech?
個人的に認証・認可まわりに興味を持ち出して以来、RFCやドキュメントを読みまくっていた。しかしながら、仕事が忙しかったり、そもそもここらへんを仕事でやるポジションにいないため、ちゃんと実装してみないことにはどうにもならんな、と思いだした。よって、最終的なゴールを雑なFAPI*1準拠したOAuth/OIDCシステムを実装していくことにした。具体的には以下の順番でやろうとしている。認証はもしかしたら、以前つくったFIDO2サーバー使うかも。 OAuth2.0クライアント（Code Grantのみ） OAuth2.0認可サーバー OAuth2.0リソースサーバー FAPI Part1化 OIDC化 FAPI Part2化 まずは、OAuth2.0クライアントを雑に作成した。ある程度できたので、一旦、棚卸しもかねてブログを書く。 その過程で湧いた疑問は、解を求める終わりのないRFC・ドキュメント漁
次世代の管理画面を作るフロントエンドの取り組み - BASEプロダクトチームブログ
フロントエンドエンジニアの松原(@simezi9)です。BASEでは現在ショップ向けの管理画面をリニューアルするプロジェクトが進んでいて、UI/UXの更新と同時に創業当時から継ぎ足して作ってきたフロントエンドの技術スタックを一新しようとしています。この記事では、具体的にそのフロントエンドの更新でどのようなことに取り組んでいるのかをいくつかご紹介したいと思います。 Vue + TypeScriptを利用したMPA(multi page application)化 HTMLの構築をPHP(サーバーサイド)からJS(クライアントサイド)へ移行する 従来の「BASE」の画面ではPHPでHTMLの構築を行っていましたが、HTMLの構築をすべてPHPのコードから分離させて、Vueによるクライアントサイドでのレンダリングにしています。また管理画面の特性上（1ページあたりの閲覧時間が長く相対的にローディン
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita
【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。LaravelチュートリアルVue.jsVuexvue-router 2020/1/5 更新 チュートリアルを Laravel バージョン6 & PHP 7.4 に対応し、加筆修正しました。 技術ブログに 『Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう（全16回）』 を公開しました 出来るだけたくさんの方に見てほしいので宣伝エントリを書きます。 コンテンツ フロントエンドに Vue.js + Vue Router + Vuex と サーバーサイドに Laravel を使用して写真共有アプリを開発するという内容です。 こんなやつ ができます。 写真を投稿できます。 コメント投稿、いいね、ダウン
JavaScriptでClean Architectureを導入してみた - Vue.js・Reactのサンプルつき - Qiita
事の発端 始まりはこちらのツイートから。 Usecasesレイヤーを充実させていったらVuex Actionsほとんど使わなくなるな笑 — Andy (@andoshin11) 2018年6月15日 それはどういうことだよ・・・ フロントでどう使うんだ・・・？ と疑問に思い、自分なりに検証・実装してみたいと思ったのが事の発端です。 Clean Architectureとは？ まず根本の理解がほぼなかったので調べることにしました。 こことか https://qiita.com/koutalou/items/07a4f9cf51a2d13e4cdc こことか https://blog.tai2.net/the_clean_architecture.html こことか https://qiita.com/Tueno@github/items/705360b357c2a00c9532 こことか h
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
夏の宿題「Laravel Mix に挑戦！~Laravel でVue.jsをうごかすまで~」 - セキュアスカイプラス
はじめに こんにちは。 脆弱性診断業務に携わっています、かをると申します。 この夏、みなさまはどのように過ごされましたか？ 先日、弊社の東京オフィスではオフィスツアーが実施され、子どもたちが遊びに来てくれました。 私が子どもの頃の夏休みといえば、だいたい遊び倒しで…プール、虫取り、花火大会、かき氷、スイカ、マンガ、ゲーム…そして終わらない宿題…だと思っていましたが… 子どもたち「宿題やって当然。計画的にやるよ。」 というわけで（？）私も宿題として「LaravelでVue.jsにさわってみる」を自ら設定して、８月の土日や学習時間*1を利用してブログ執筆をしてみました。 宿題「Laravel Mix に挑戦！~Laravel でVue.js うごかすまで~」 ゴールはどこ？ （理想）簡単な日記機能の実装とかできたらいいなぁ～ （現実）スキルと時間考えてHelloWorld相当 👈 こっち な
GASとVueでサーバレス社内向け工数管理（勤怠管理）を作ってみた。｜Hot Factory Creators
初めまして、ホットファクトリーでフロントエンドを担当しています森本です。 これまでスプレッドシートを使って社内チームの工数管理を行なっていたのですが、 「もう少し細かい工数管理がしたい。」 「集計がしずらい」 「残業管理もできれば」みたいな要望が上がってきたのと、最近自分の中でVueが熱かったのと、あくまでコストをかけないという事でgoogleスプレッドシートとGASを使って、サーバレスの環境で今回の実装をしてみました。 ざっくりこんな仕様です。 ・スプレッドシートでクライアント、プロジェクト、案件を管理 ・ユーザーが投稿するフォームにはスプレッドシートのクライアント、プロジェクト、案件が選んだ内容でプルダウンが切り替わる。 ・ユーザーは１日ごとに行なった「クライアント」「プロジェクト案件」「かかった時間」をフォームから入力 ・フォームがSUBMITされた内容を計算用シートにぶち込む。やっ
放置しがちな社内システムこそ式年遷宮していこう - pixiv inside
こんにちは、CTO兼福岡オフィスマネージャーの@edvakfです。最近はとあるC++のコードをRustに逐語訳しながらRustを勉強中です。 今回はピクシブで使っているデプロイ管理画面のpployをgo-pployにリプレースした話を書きます。 まずは結論から メンテナビリティの向上 を目指して社内システムをリプレースした 小規模であっても新規開発から得られる学びはとても大きい その気になれば式年遷宮できるシステム規模を心がけましょう そもそもpployとは？ pployとは、「デプロイ管理画面」という類の小さなウェブアプリケーションです。 ピクシブで開発しているウェブアプリケーションのデプロイは基本的にはすべて 「デプロイ中」状態になる masterにpushする staging等にデプロイして確認する productionにデプロイする 問題無ければ「デプロイ中」状態を解く という手順
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js 続・大規模アプリ開発 - Speaker Deck
さくらのフロントエンド さくらの Vue.js // vue.js in SAKURA - Speaker Deck
365日24時間稼働必須サービスの 完全無停止DB移行
10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6