Hatena::ブログ(Diary)

IT戦記 このページをアンテナに追加 RSSフィード

2009-03-10

クリックジャッキングの本質的な解決策

誰か書いてそうだけど、気にせずに投下

現実的な解決策ではなくて、本質的な解決策

クリックジャッキングはそもそも CSS の問題なので CSS の枠組みで解決すればいい。

CSS での解決策

具体的には、以下のルールをユーザースタイルシートに追加すればいい。

 * { opacity: 1 !important }

CSS2, CSS2.1, CSS3 では、ユーザースタイルシートの !important な宣言は他のどの宣言よりも優先されるはずなので、ちゃんと仕様を満たしているブラウザを使っていれば問題ないはず。

IE の場合は、 opacity じゃなくて filter を。。というか、オプションで何か filter とか無効に出来た気がするけど、忘れた><)

ユーザースタイルシートは、 IE, Firefox, Opera, Safari ほとんどのブラウザで使うことができる。

あと、 iframe の大きさを制限しておくとさらに良いかもしれない。

 iframe {
   min-height: 200px !important;
   min-width: 200px !important
 }

ただ

すべての要素が透明にできなくなってしまうのは寂しいなあ。。。

ちなみに

iframe { opacity: 1 !important }

のように iframe だけにターゲットを絞ることはできない。親要素や祖先要素が透明になる可能性があるから。

追記

でも、よく考えると iframe の上に div やら何やらを載せてボタン意外を隠してしまうという手もあるなあ。ボタンは見えてるんだけど、ボタンの名前が「送信」とかだったら分からないな。

やっぱ、 CSS オフか iframe { display: none !important } が本質的なのかなあ。やっぱり現実的ではないな。

2008-06-20

CSS のセレクタの名前の整理

はじめに

CSSセレクタ」っていうと以下のようなものを想像すると思うんですけど

div.container ul > li

じゃあ、

などなど色々と疑問が出てくる訳で、どういう名前で呼べばいいか。自分のために書いておく。

これ系のエントリでは、以下のエントリが一番参考になります

http://d.hatena.ne.jp/kiririmode/20080516/p1

Selectors group

カンマで区切られたセレクタのリスト

div.container ul > li, div#hoge.hoge ~ span#fuga.fuga

Selector

カンマで区切られてる一個一個のやつ

div.container ul > li

とか

div#hoge.hoge ~ span#fuga.fuga

Combinator

>

とか

+

とか

~

空白とか

Sequence of simple selectors

Combinator で区切られてる一個一個のやつ

div.container
ul
li
div#hoge.hoge
span#fuga.fuga

Simple selector

div#hoge.hoge

でいうと

div
#hoge
.hoge

あと

Combinator と Sequence of simple slectors を組み合わせた

~ span#fuga.fuga

とか

> li

みたいなものにも名前が欲しいなあ。プログラムではこの単位で扱うことが多いので。

Combinator and sequence of simple seletors とでも読んでおくか。

うーん

JavaScript でこれを扱うオブジェクトを作るときは

var caoss = new CSSCombinatorAndSequenceOfSimpleSelectors();

とかになるのかな><長い><

カオス><

2008-06-03

IE で一時的に要素のスタイルを変更する

いろいろためしたけど、以下が一番楽

// 変更
element.runtimeStyle.cssText = ' width: 100%; height: 100%';

// 戻す
element.runtimeStyle.cssText = '';

特に、戻すときに cssText 以外のプロパティを空にしても、おかしな挙動をするので cssText を使うといい。

しかも IE だけは、 CSSStyleSheet オブジェクトにも cssText が使える

// これも IE だけ
var sheet = document.createStyleSheet();

sheet.cssText = 'div { hoge: hoge; fuga: fuga } div div { piyo: piyo }';
sheet.cssText = '';

2008-06-02

CSS Selector の最大の欠点

先頭に Combinator を置けないこと

// 以下のようなことができない
elm.querySelectorAll('> div');
elm.querySelectorAll('+ div');
elm.querySelectorAll('~ div');

Selector が仕様化されたときは、たぶん、サブツリーを起点に使われることなんて想像してなかったんだろうなあ。

その点、 jQuery はすごいなあ。

2008-06-01

Web 標準的な CSS の値変換方法(px → em など)(訂正あり)

はじめに

W3C の仕様に CSS の値を変換が可能なオブジェクトが定義されていることに気がついたのでメモしておきます。

まず CSSStyleDeclaration オブジェクトを取得する

例えば、

var decl = element.style;

または、

var decl = getComputedStyle(element, '');

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

CSSStyleDeclaration オブジェクトから getPropertyCSSValue という関数を使って CSSValue オブジェクトを取得する
var val = decl.getPropertyCSSValue('width')

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue

以下のようにして様々な単位の値が取得できる

ただし、 CSSValue が CSSPrimitiveValue の場合だけ

if (!(val instanceof CSSPrimitiveValue)) throw Error();

// センチメートル単位で値を取得
var num = val.getFloatValue(CSSPrimitiveValue.CSS_CM);

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSPrimitiveValue

対応ブラウザ

たぶん WebKit (Safari の開発版) だけだと思います。

WebKit++

追記

Firefox 3, Opera 9.5 でも対応しているようです。

ただ、いろいろためすと変換できない単位があったりします。

以下、参照

訂正

ちゃんと仕様のほうを確認してみました。

すると、以下のように記述されていました。

Conversions are allowed between absolute values (from millimeters to centimeters, from degrees to radians, and so on) but not between relative values. (For example, a pixel value cannot be converted to a centimeter value.)

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSPrimitiveValue

絶対値間の変換は認められるが、相対値の変換は認められない。

ということは、どうやら WebKit の独自拡張ということなんですね。

WebKit--