Blocked loading mixed active contentが出た時に気をつけること

FirefoxのFirebugで"Blocked loading mixed active content..."というエラーが出てるので調べてみると、どうやらCDNを使ってHTMLページでインポートしてるJS/CSSファイルが読み込まれていない。

さらに掘り下げてみると、httpsで読み込んでるページからhttpでこれらのCDNからJS/CSSを読み込もうとするとエラーが出てるようだ。

What is Mixed Content?When a user visits a page served over HTTP, their connection is open for eavesdropping and man-in-the-middle (MITM) attacks. When a user visits a page served over HTTPS, their connection with the web server is authenticated and encrypted with SSL and hence safeguarded from eavesdroppers and MITM attacks.However, if an HTTPS page includes HTTP content, the HTTP portion can be read or modified by attackers, even though the main page is served over HTTPS. When an HTTPS page has HTTP content, we call that content “mixed”. The webpage that the user is visiting is only partially encrypted, since some of the content is retrieved unencrypted over HTTP. The Mixed Content Blocker blocks certain HTTP requests on HTTPS pages.

引用：
http://stackoverflow.com/questions/18251128/why-am-i-suddenly-getting-a-blocked-loading-mixed-active-content-issue-in-fire

要するに、HTTPSのページにHTTPリクエストで呼ばれているコンテンツがあると、それを”mixied（混在した）”コンテンツとみなし、MITM攻撃の被害になりえるのでやめて下さいとFirefoxが新しいバージョンではエラーとして表示してくれているようだ。

一般的な解決策は意外と簡単で、インポートしてるファイル(js/css）の構文をhttpからhttpsに変えてやればいい。もしくは//みたいな書き方でURLをブラウザが自動判別してくれるということ。

http://stackoverflow.com/questions/4831741/can-i-change-all-my-http-links-to-just

追加：

ただ、CDNによってはhttpからhttpsになぜかリクエストが変わってくれなかったので、そういうケースは泣く泣くCDNを使わずローカルにファイルを保存したりして回避した。

HTML5でログインフォームの書き方

HTML5でログインフォームの書き方

HTML

<section class="loginform cf">  

<form name="login" action="/path" method="POST" accept-charset="utf-8">

    <ul>  

        <li><label for="usermail">Login Name</label>

        <input type="text" name="loginName" placeholder="login name" required></li>

        <li><label for="password">Password</label>

       <input type="password" name="password" placeholder="password" required></li>

        <li><input type="submit" value="Login"></li>

    </ul>  

</form>  

</section> 

CSSは参考リンク参照

参考
http://www.hongkiat.com/blog/html5-loginpage/

JavaScriptでhtmlのDOMエレメントのクラス名を得るには？

JavaScriptでhtmlのDOMエレメントのクラス名を得るには？

document.getElementById('divId').className.split(/\s+/);

参考
http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery

d3でcssのクラスを複数追加するには

d3.selectAll(".someDiv").attr("test1 test2");

参考リンク
http://stackoverflow.com/questions/13188125/d3-add-multiple-classes-with-function

MavenでJavascriptやStylesheetのファイルはYUI compressor Maven MOJOを使う

MavenでJavascriptやStylesheetのファイルはYUI compressor Maven MOJOを使うと便利です。JSやCSSファイルをデフォルトで-minという名前で圧縮してくれるし、aggregationタグでは圧縮したファイルを一括してくれる。

http://alchim.sourceforge.net/yuicompressor-maven-plugin/index.html

ハマったところと言えば、Mavenのライフサイクルのフェーズがprepare-packageじゃないと思った順序でpom.xmlの内容が動作してくれなかった点。

jQueryの:notセレクタは何かと便利

HTMLのエレメントでclassに何種類か設定してある場合、jQueryの:notセレクタを使ってやると便利。

<div class="someA someB" />

<script>
  var divs = $('.someA:not(someB)');
</script>

みたいな感じ。