PHPのイタい入門書を読んでAjaxのXSSについて検討した(3)～JSON等の想定外読み出しによる攻撃～ - ockeghem(徳丸浩)の日記
昨日の日記の続きで、Ajaxに固有なセキュリティ問題について検討します。今回はJSON等の想定外読み出しによる攻撃です。これら攻撃手法は本来ブラウザ側で対応すべきもので、やむを得ずWebアプリケーション側で対応する上で、まだ定番となる対策がないように思えます。このため、複数の候補を示することで議論のきっかけにしたいと思います。 まず、作りながら基礎から学ぶPHPによるWebアプリケーション入門XAMPP/jQuery/HTML5で作るイマドキのWeから、Ajaxを利用したアプリケーションの概念図を引用します（同書P20の図1-23）。 前回、前々回は、(5)のHTTPレスポンスの前後で、JSON等のデータ作成（エンコード）に起因するevalインジェクションや、(5)のレスポンスを受け取った後のHTMLレンダリングの際のXSSについて説明しました。 しかし、問題はこれだけではありません。正常
なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか
最初にいっておく。これは負け惜しみだ。 SPAとPWAの現状 自分は日本でReactの勝手エヴァンジェリストみたいなことをやっていて、SPAの重めのコンテンツをよく作ってるからか、「お前らフロントエンドを物事をややこしくして、重いページを量産してウェブを劣化させてるじゃないか！」みたいな批判を、名指しでよく受ける。なんで僕にいうかわからないけど、React = SPA みたいなイメージでスケープゴートにされてるんだろう。それはまあいい。 自分の仕事でSPA技術を使うところは、ちゃんと必要性もあるし理由も説明できる。ただ、やはり近年の複雑化/重量化について思うところはあるので、逆に振って AMP/PWA という選択肢を持っておきたくて、正直言うと依頼されたR&Dの仕事でもあったんだけど、一通り覚えた。なんだけど、今のところ仕事で使うタイミングがない。 PWA技術を仕事で使えなかった理由として
WebストラテジーゲームでJavaScriptが学べる「Empire of Code」の遊び方を大公開！ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、基本的なプログラミングに慣れてきて、「次に何しようかな…？」と考えている人に最適なWebサービスをご紹介しようと思います！ ブラウザから遊べる「ストラテジーゲーム（戦略ゲーム）」なのですが、自軍の兵士たちを自分でプログラミングすることで、自由自在に操作することができるという異色のサービスになっています！ 【 Empire of Code 】 プログラミング初心者向けではないのですが、PythonかJavaScriptの基本的な文法を把握している人であれば誰でも楽しめますよ！ ■「Empire of Code」の始め方！ それでは、実際に試しながら、どのようなサービスなのかを詳しく見ていきましょう！ まず最初に、サイトへアクセスして「START NEW GAME（ゲーム開始）」ボタンをクリックします。 すると、コミカルな漫画でストーリーが
JavaScript開発はこれ1つでOK！超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開！ - paiza開発日誌
どうも、まさとらん（@0310lan）です。 今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です！ バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。 【 Gomix 】 以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。 ■基本的な使い方！ それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコード
node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル | さくらたんどっとびーず
2011年はサーバサイド JavaScript の年！ サーバサイド JavaScript の本命は node.js！ ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなやつです。自作しようと思ったのですが、あまりにもシンプルだったため、これを使用することにしました。ダウンロード スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.periodicalupdater.js" type="text/javascript"></script> 実装 <div id="div1022"></div> <script type="text/javascript"> $(document).ready(function(){ $.PeriodicalU
フォームの内容を自動保存するjQueryプラグイン - [Mi]みたいなもの
ブラウザがクラッシュしたり、うっかりリロードしたり。 たくさんの時間をかけて入力したフォームの内容をあっという間に飛ばしてしまった経験は誰しもあると思います。 私はそういう事故が怖いので、長文の場合は自動保存機能のあるエディタやメーラー上で入力するようにしています。しかし、ユーザーの方にそれを望むのは無理というものですよね。 最近のCMSは大抵自動保存する仕組みがついています。そこまで本格的なものでなくてもいいから、簡単に導入できる、負荷の少ないフォームの自動保存機能、欲しくありませんか？ こんなご希望にぴったりのjQuery autosave plug-inをご紹介します。 機能の特徴 1.フォームに入力した内容をcookieに保存します（軽い） 2.formタグにあれこれ追記する必要はありません（簡単） 3.保存秒数等、細かい設定も可能です 4.さすがにリビジョンを指定して復元したりす
![フォームの内容を自動保存するjQueryプラグイン - [Mi]みたいなもの](https://cdn-ak-scissors.b.st-hatena.com/image/square/0e250634c64eb4fb80539435b0bd5168f3972f80/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127156572702%2F17680117127156584381%2F1558483359)
.htaccess(mod_rewrite)でスマートフォン向けページへリダイレクトさせる方法 | Another Sky
.htaccess(Apacheのモジュールmod_rewrite)を利用して、スマートフォンでWebサイトにアクセスされた時に、自動でスマートフォン向けページにリダイレクトする方法を検討してみたので、記録しておくことにします。 前提条件 同一ドメイン内にスマートフォン向けページのディレクトリを用意する スマートフォン向けページのディレクトリを「/spn」とする ユーザーの希望に応じてPC向けサイト・スマートフォン向けサイトを選択して閲覧できるようにする .htaccessの設定例 RewriteEngine On RewriteCond % !^/spn/.*$ RewriteCond % (iPhone|iPod|Android.*Mobile|BlackBerry|Windows.Phone) [NC] RewriteCond % !iPad [NC] RewriteCond % !
Items
Codex This is a list of items from last.fm's GetHypedTracks Page 1 Shape Glasser (#1 / ID 1) Souls Like the Wheels The Avett Brothers (#2 / ID 2) Prism Tim Hecker (#3 / ID 3) Taking Over Joe Goddard (#4 / ID 4) Brave This Storm Trivium (#5 / ID 5) Radiance Tim Hecker (#6 / ID 7) Live Room Tim Hecker (#7 / ID 8) Live Room Out Tim Hecker (#8 / ID 9) Black Refraction Tim Hecker (#9 / ID 14) Stigmata
Googleが推奨するSEOに適した無限スクロールの構成方法
[対象: 上級] Googleは英語版ウェブマスター向け公式ブログで、検索エンジンが処理しやすい無限スクロール（Infinite Scroll）の推奨構成を説明しました。 細かな話は後回しにして、その推奨構成をさっそく日本語で紹介します。 なお逐一の訳ではなく、理解しやすくするために表現や構成を原文とは多少変えてあります。 構成の概要 無限スクロールからリンクされている個々のアイテム（記事やコンテンツなど）を検索エンジンが確実にクロールできるように、利用しているシステムが、無限スクロールとともにページネーションしたページも作成できるように必ずしておく（無限スクロールで、1つのURLに収めるのではなく、分割して複数のページに分けるということ）。 ※拡大画像はオリジナルのURLで表示します（もう1つの画像も同様） 無限スクロールは、分割したページに変換されることで検索エンジンが処理しやすくなる
history.back();問題を解決してみる at softelメモ
history.back()はブラウザの履歴を利用して1つ前のページに戻る機能です。これによりどのページから来た訪問者でも個々のユーザーに合わせたページへ戻ることができます。 この機能、多くのところでは以下のように書かれており、ブラウザからアドレスを入力して開いた場合は機能しません。 <a href="javascript:history.back();">一つ前のページへ戻る</a> 戻るリンクはそのサイトのトップなり1つ上のカテゴリページへ戻ることを意識してリンクをクリックしますので、動かなかったり、検索エンジンへ戻ったりするとユーザーはそのままサイトから離脱している可能性が高いです。 そこで対策を考えてみます。直接来た場合はトップページへ返すことを考えます。 まず、history.lengthで考えてみます。これは戻す、進むで使う履歴がいくつあるか取ることができます。ですので、直接開
jQueryのAjaxを使用して外部htmlを読み込む
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな？</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
【JavaScript】ドラッグ＆ドロップで画像を非同期アップロードできるライブラリ dropzone.js の デフォルトCSS を有効にしたままカスタマイズする - pospomeのプログラミング日記
【追記 2013/10/24】 サンプルをアップしました。 https://github.com/pospome/DropzoneJsSample 【追記 2013/09/13】 CSSの設定を追記しました。 基本的な使い方を書きました。 http://d.hatena.ne.jp/pospome/20130913/1379050713 dropzone.jsはAjaxを利用した非同期ファイルアップロードライブラリ。 http://www.dropzonejs.com デモを見るとかなりいい感じ。 アップロード中のプログレスバー表示などデザインもちゃんとしている。 jQueryに依存しないというのも環境によっては嬉しい。 ただ、dropzone.jsのデフォルトデザインを活かしたまま、ちょっと手を加えようとすると ハマってしまったのでメモ。 以下はdropzone.jsのデフォルトデザイン
[JavaScript] tr要素 の display プロパティを用いた表示切替えについて | Blog | Development Reference
javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
endo blog: ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」を使ってみる
ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」で知った、gmaps.jsを使ってみます。 まずここで、ダウンロードします。ソースコードをコピペしてgmaps.jsを作成しました。ところで、google map APIはあまり使ったことがないので、とりあえずそもそもの使い方を確認しよう。 Google Maps APIのそもそもの使い方 GoogleマップのAPIは正式には今はGoogle Maps JavaScript API V3というらしい。これのチュートリアルを見ながらそもそもの使い方を大体覚えたい。チュートリアルにあるHTMLコードをコピペ（コピペした後で、titleを加えて、sensor=set_to_true_or_falseというところを、sensor=falseに変更して、スタイルは別ファイルで定義した。）したところ、地図が表示された。どうもid
サーバサイドJavaScriptの本命「node.js」の基礎知識
本稿では、Node.jsの特徴や動作原理に触れ、サンプルや役に立つパッケージ、活用事例などを紹介したいと思います。 主なサーバサイドJavaScript Node.jsに触れる前に、予備知識として他のサーバサイドJavaScriptにも触れておきます。Node.js含め、サーバサイドJavaScriptには、主に以下のようなプロジェクトがあります。 サーバサイドJavaScripの標準仕様「CommonJS」とは サーバサイドJavaScriptには、「CommonJS」と呼ばれる標準化が策定されています。標準化というと難しい感じがしますが、要はサーバサイドでJavaScriptを実行するのに何が必要かを仕様として、定義しているドキュメントのことです（例えば、「ログが必要だよね」など）。 Node.jsは、このCommonJSに則って開発されています。現段階であれば、CommonJSの仕様
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
Ajax中で、画面更新をせずにブラウザのアドレスバーの内容を変更 « KhmerBrains.NET
ポーキーブログ
http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html