スライド概要 SPA(Single Page Application)の普及が一層進んでおり、従来型のMPAを知らないウェブ開発者も生まれつつあるようです。SPA対応のフレームワークでは基本的な脆弱性については対策機能が用意されていますが、それにも関わらず、脆弱性診断等で基本的な脆弱性が指摘されるケースはむしろ増えつつあります。 本セッションでは、LaravelとReactで開発したアプリケーションをモデルとして、SQLインジェクション、クロスサイトスクリプティング、認可制御不備等の脆弱性の実例を紹介しながら、現実的な対策について紹介します。LaravelやReact以外のフレームワーク利用者にも役立つ説明を心がけます。 PHPカンファレンス2022での講演資料です。 PHPカンファレンスでの動画URL https://www.youtube.com/watch?v=jZ6sWyGxcCs
Gears はGoogleの提供していたソフトウェアであり「Webブラウザに新機能を追加することで、より強力なWebアプリケーションを可能にする」ものである[3]。以前は Google Gears という名称だった[4]。BSDライセンスでリリースされていたFOSSである[5]。最終的に、機能の多くがHTML5に取り込まれる形となり、開発を終了した[2]。 Gearsには以下のような主要なAPIコンポーネントがあった。 Database モジュール（SQLiteを使用）。データをローカルに格納できる[6]。 WorkerPool モジュール。JavaScriptコードの並列実行を提供する[7]。 LocalServer モジュール。アプリケーションのリソース（HTML、JavaScript、画像など）をキャッシュし提供する[8]。 Desktop モジュール。Webアプリケーションがデスク
はじめに 最近、Webの記事を見てるとReactだVue.jsばかりが上がっていてJSPやERBの話をしてる人は誰もいません。jQueryの記事ももちろん見ない。 つまり、Webだけ見る限りではほとんどの人がSPAを使ってるように見えます。 私はWeb界隈には居るもののどちらかというとバックエンド寄り、もっというとそもそもWebとか関係ない領域を見る事が多いので、ちょっとキャッチアップを兼ねていくつかの個人プロダクトにVue.jsを採用してみました。 jQueryくらいで頭が止まってたので。サーバサイドもマイクロサービスでAPI化が進んでるのでフロントもそれに合った技術を選ばないとですしね。 というわけで、今回はその中で得た知見というか、従来型のサーバサイドでのWeb開発をしていた人の視点でVue.jsをキャッチアップする流れで書いていきたいと思います。 まあ最終的な結論は正直「これすごく
TL;DR JWTはCookieを使った認証の代わりに使うのはきつい。 コードを静的にホスティングしているSPAの話。 JWTの有効期間を長くすれば危険で、短くすればUXが犠牲になるというトレードオフがある。 AWS AmplifyはlocalStorageにJWTを保存 悪意のあるThird partyライブラリが混ざっていたらJWTを抜かれる。 yarn.lockが依存している全ライブラリを監査することはつらい。 Auth0ではiFrameを活用してメモリ上にJWTを格納できる Auth0いいね😍 まくら Youtubeが大好きなHiCustomerの小田です。ちょっと遅いですが年明け最初のエントリーです。今年もテックブログをよろしくお願いします😎ちなみに、気分がいいので年明けに観ていたYoutubeのエントリーの中で一番おもしろかった動画を紹介します。世界中で有名な「Auld L
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? メタ この記事はNode学園2018にて話した内容を記事として編纂 +その後の変化を加筆修正したものです。 スライドはこちら。 https://speakerdeck.com/kazuyaseki/seo-for-spa-cfb3706f-ae1d-4c6f-a83f-96dc2452f32b 追記 2019/5/8 遂に Google bot が扱うレンダリングエンジンが Chrome 最新版(現時点では 74)相当となりました！ https://webmasters.googleblog.com/2019/05/the-new-ev
問題点 PuppeteerによるWebテストの自動化を行うと、HTML等のWebページ遷移が発生しないSingle Page Application(SPA)が正常に動作しない場合があります。特にGithubのPuppeteerのREADME.mdにある使用例をそのまま流用するとハマる可能性があります。 例えば、以下のようにCSSセレクターが見つからないエラーだったり UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): AssertionError [ERR_ASSERTION]: No node found for selector: ... 画面が遷移したにも関わらず以下のようにタイムアウトが発生してしまうエラーだったりします。 UnhandledPromiseRejectio
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Blazor との出会い 今年2018年2月7日に、自分のソーシャルネットワークのタイムラインに Microsoft のブログ記事が流れてきました。 A new experiment: Browser-based web apps with .NET and Blazor ブラウザベースの .NET による Web アプリフレームワーク、"Blazor" (ブレイザー) だそうです。 これを読んだ当時、自分はこんな感想を持ちました。 「 "ブラウザベースの .NET による Web アプリ" ってなんのこっちゃ? まだ実験段階的なこと書
I am a self-taught software developer, with a passion to learn – from computer science to social interactions Single-page applications are everywhere. Even blogs, simple html pages (in the beginning something like https://danluu.com/), have turned into big fat monsters – for example, jlongster’s blog has 1206 stars at the moment of writing, and not because of the content (people usually subscribe
こんにちは。10分で生産的なミーティングができるWeb会議ツール、minmeetingを開発している伊勢川です。 AngularでGoogle Analyticsを設定しようとした際に、Googleの説明の通りに設定をするとデータが連携されなかったので、失敗したパターンとうまくいったパターンを記載しておきます。 うまくいったパターン googletagmanagerのソースをheadタグ内で読み込む。 初期化コードはbodyタグの中で読み込む。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>minmeeting</title> : <!-- 1. googletagmanagerのソースはheadタグ内で読み込む --> <script async src="https://www.googletagmanager.
前置き ペラのHTMLだけのサイトなら、ブログサービスだったりwikiだったりそれこそ我らがQiitaを活用すれば、速攻で公開出来ますね。 Analyticsとの連携だったり、独自の解析ツールが入っていたりと非常に使い勝手も良いです。 ですが動的な処理を組み込んだWebサービスを作ろうと思ったら、サーバ用意して、LAMP環境を整えて、ドメインも用意して…うおぉぉぉめんどくさい！！！ かといってPaaS使うとお金かかるし… お金かけたくないけどお手軽にサービス作りたいお(￣￢￣*) そんな怠惰かつケチくさい願いを叶えてくれるGoogle Apps Scriptさん(以下GAS)のお話をしたいと思います。 最終的にはAngularJSを導入したSingle Page Application(以下SPA)を作り、Analyticsの設定を行い、Adsenseの広告を貼っつけて、データの取得とログ
. ├── /.vscode/ # Visual Studio Code settings ├── /build/ # The folder for compiled output ├── /client/ # Client-side app (frontend) │ ├── /components/ # Common or shared UI components │ ├── /utils/ # Helper functions and utility classes │ ├── /views/ # UI components for web pages (screens) │ ├── history.js # HTML5 History API wrapper used for navigation │ ├── main.js # Entry point that bootstraps
SPA(Single Page Application)って何？ 単一ページで構成されるWebアプリケーション JavaScriptでDOMを操作しページを切り替える AjaxやWebSocketを使用する SPAまでの変遷 2010年にスティーブ・ジョブズがThoughts on Flashを発表。 それがきっかけとなりFlashなどのProprietary Software（ソフトウェアの配布者が独占的に提供しているソフトウェア）が衰退 2014年にHTML5正式勧告がされたこともあり、Flashなどに代わる技術としてHTML5が推進されてきた。 そのHTML５でFlashと同等のUI/UXを実装するためSPAが開発された。 SPAで使われている技術 JavaScriptフレームワーク、ライブラリ（Angular、Vue.js、Reactなど） CSS Preprocessor（sas
How to build the SPA for enterprise application using Angular2 and WebApi (RESTful) Other Articles in the series Overview Add new Permission Project structure Multi-Languages (i18n) DI & IoC - Why and Why not? RESTful & WebApi Manage Application Lifecycle Build & Deploy Application New version of TinyERP with Angular 2 (typescript) CQRS: Avoiding performance issues in enterprise app (part 1) Multi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
