リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
JavaScriptでセキュアなコーディングをするために気をつけること – cybozu developer network
（著者：サイボウズ kintone開発チーム 天野 祐介） kintoneはJavaScriptを使って自由にカスタマイズすることができます。 カスタマイズにより独自のリッチなUIを構築したり、新しい機能を追加したりできるようになりますが、セキュアなコーディングをしないとクロスサイトスクリプティング脆弱性を作り込んでしまう危険性があります。 この記事では、JavaScriptでセキュアなコーディングをするための基本的な点を解説します。 主な原因 脆弱性を作り込む主な原因になるコードは、要素の動的な生成です。特に、レコード情報などのユーザーが入力した値を使って要素を生成するときに脆弱性が発生しやすくなります。 対策 document.write()やelement.innerHTMLを使って要素を生成するときは、コンテンツとなる文字列をかならずHTMLエスケープするようにしましょう。 以下は
ページの基本構成 - マッピィ Google Maps API JavaScriptの使い方 -
Webページの中でGoogle Maps APIを使い地図を表示する場合にHTMLタグにどのような記述が必要か順を追って説明します。 ベースのHTMLとして下記HTML5ページを利用します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Google Maps JavaScript API サンプル</title> </head> <body> <p>Google Maps APIを使ったサンプル地図。</p> </body> </html> 一般的なHTMLページです。 HTMLタグ内でGoogle Maps APIを使用する為には、最初にGoogle Maps APIを使用するのに必要なGoogle発行のJavaScriptコードを読み込みます。ＡＰＩキーが必要です。下記のように読み込みます。
無料で使える単一ページのHTML/CSSテンプレート集
美しい単一ページの無料テンプレート集。 CSS/HTMLの勉強にも使えそうですが、細かいところで単一ページらしいアイデアが使われているところも見所です。 色々と使い所満載のテンプレート集 単一ページだからと思って油断していましたがなかなかのクオリティでびっくり。 Free Single-Page HTML5 Portfolio Template Demo / Download スライドショーの部分も細かいですがよく出来てます。 Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3 Demo / Download Page 一般的な縦型のシングルページ。スムーズな移動も特徴的です。 Resume (HTML) Demo / Download Page Roundfolio: A Free Portfolio T
HTML5+CSS3用のブラウザのスタイルをリセットするテンプレートファイル -HTML5 Reset
HTML5+CSS3の環境で汎用的に利用できるHTML・スタイルシート・スクリプトなどのファイルを一式にまとめたテンプレートを紹介します。 ファイル構成：コメント無し版 各ファイルの説明 index.html HTML5の要素を配置した汎用的に利用できるHTMLファイル。各スタイルシートファイルも埋め込まれています。 css/main.css @import用のスタイルシートです。 css/reset.css Eric Meyerの「Reset CSS」です。 css/core.css ベースとなるスタイルが定義されています。 css/_patches 各ブラウザ用のスタイルシートです。 css/_print プリント用のスタイルシートです。 js Modernizrがセットされています。
ふつうのユーザが知らないHTML5コーディングツール10選 - YAMAGUCHI::weblog
はじめに こんにちは、Python界の情弱です。今日はChrome+HTML5 Conferenceのお手伝いに来てます。いままで全く触れてこなかった世界ですが、結構HTML5はXMLのようにセマンティクスに重点を置いてるんですね。CSS3も動的なエフェクトを簡単にかけられるようになってるし、とてもいいですね。 さて、YouTube Live Streamのお手伝いしながらRSS見てたら、ちょうど今日のテーマに沿ったエントリがdiggで紹介されてたので、翻訳しました。 10 Excellent HTML5 coding Tools Many Users Don’t Know About 10 Excellent HTML5 coding Tools Many Users Don’t Know About （オリジナル） HTML5はウェブサイトの作成方法を根本から変えることになるでしょう。
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
サイトを作った時に絶対にやるべき10の事 | 無料SEO対策のススメ
YahooがGoogleの検索エンジンを採用したことで、SEOの観点からやるべき事が軽減されたと思いますが、それでもサイトを作ったらやるべき事がいくつもあります。 サイトの内容によってやるべき事も変わってきますが、最低限やっておいた方が良いことをまとめておきます。 基本的なこと 1.サイト名を考える サイトにユニーク性を出す為に必ずサイト名を考えます。企業サイトの場合には社名がサイト名という事になりますが、どんなサイトであってもそのサイトを紹介しやすいような短いサイト名があった方が良いでしょう。 2.ロゴやファビコンの作成 サイトのブランディングの一環としてロゴマークやファビコンがあった方が良いでしょう。 ⇒@icon変換 3.HTMLチェック 作成したサイトのHTML文法がおかしな事になっていないかチェックします。100点を取る必要はありません。重大なミスが無いかの確認です。 ⇒Anot
フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
みなさん、こんにちは お元気ですか？僕は元気です。 さて 最近よく、「いいね！」ボタンや「ミクシィチェック」ボタンによって、ウェブページを紹介し合う文化が少しずつ定着してきたなーと思います。 そんな中で、今後重要になってくるんじゃないかと思われる OGP （Open Graph Protocol）と言われる仕様があります。今日はそのことについて書いてみたいと思います。 OGP? おーじーぴー？？とはなんでしょうか。 OGP とは 簡単に言うと「このウェブページは何のことを書いているか」という情報を、プログラムから読める形で HTML に付加する記述方法のことです。 まあ、普通のウェブページは人間が読めばだいたい何のことが書いてあるか分かりますよね。 ですが、プログラムは人間ほど頭が良くないので、そのウェブページ内の文章だけではそのページが何のことについて書かれているページなのか正確に識別す
デザイナは要注目！ 明日から語れるHTML5＆CSS3（1/4）- ＠IT
デザイナは要注目！ 明日から語れるHTML5＆CSS3：一撃デザインの種明かし（13）（1/4 ページ） ※本稿では特に断りがない場合、Firefox、Google Chrome、Opera、Safariは2010年7月時点の最新バージョン、IEはInternet Explorer 6/7/8の総称です。 いま世界で一番熱い「HTML5」「CSS3」とは？ 最近、「HTML5」「CSS3」といった言葉をよく耳にしませんか？ これらはWebの表現をもっと豊かにするために策定中の言語です。いままでのHTML 4.01やXHTMLでは実現できなかったことができるようになったり、CSS3はCSS 2.1よりさらにグラフィカルな部分まで表現できるようになりました。 FirefoxやOpera、Safari、ChromeといったHTML5＋CSS3に対応するWebブラウザが増えてきたことで、HTML5
DreamweaverからCodaに変えました
2017年6月29日 便利ツール Webサイトを制作する時のWebオーサリングツール・HTMLエディタは何を使用していますか？きっと多くの人がDreamweaverを使っていると思います。私もそうでした。が、最近私のまわりのWebデザイナーがみんなCodaというソフトを使っているのに気づき、試したところ、あまりにも使い勝手がいいので紹介します。本当におすすめです！ ↑私が10年以上利用している会計ソフト！ Codaの特徴を簡単に 詳しい説明はリンクをクリックでジャンプします。 Mac専用 美しいビジュアル 便利なプレビュー画面 PHPやJavaScriptの動作確認も 素早いタグ打ちが可能 有料 8,500円 はい、Mac専用なんです。このブログを読んでいるユーザーの70%がPC使用なのでこれを記事にするか悩みましたが、Mac愛用者さんに向けて！ちなみに私はCoda英語版をインストールして
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
HTML5の勉強に役立つチートシートやリファレンスのまとめ
TechCrunch