ツイッターでブックマークレットが使えなくなった件

以前からかなぁ。ツイッターのstatusぺーじでブックマークレットの javascript:(function(){location.reload();})(); が使えなくなった。昨日は使えた気がする。Firefoxのアップデートが原因か？

— 正己 (@self7777) 2015, 8月 12

　ツイッターのstatusページでリロードのためのブックマークレットや引用ツイートのためのブックマークレットや、さらにはメールでブログに記事をアップロードするためのブックマークレットや、その他いろいろとブックマークレットを使っていたのだけど、Firefox 40.0にアップデートしてから使えなくなった。
　以前にブログ【Firefoxのブックマークレットが使えないサイトがある】で書いたように、Content Security Policy (CSP) が原因らしいが、それならばと、例えば上のツイートのHTTPヘッダを見てみたら、CSPの所は次のように書いてあった。

Content-Security-Policy: default-src 'self'; connect-src 'self' https://upload.twitter.com https://analytics.twitter.com https://pay.twitter.com https://graph.facebook.com; font-src 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com https://fonts.gstatic.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com data:; frame-src 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com twitter: https://www.youtube.com https://vine.co https://upload.twitter.com https://platform.twitter.com https://syndication.twitter.com https://s-static.ak.facebook.com https://www.facebook.com https://pay.twitter.com; img-src 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com blob: https://syndication.twitter.com https://www.google.com https://www.google-analytics.com https://stats.g.doubleclick.net https://www.facebook.com https://graph.facebook.com https://fbcdn-profile-a.akamaihd.net https://*.fbcdn.net data:; media-sr c 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com blob:; object-src https://twitter.com https://pbs.twimg.com; script-src 'unsafe-inline' 'unsafe-eval' 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com https://platform.twitter.com https://syndication.twitter.com https://analytics.twitter.com https://www.google-analytics.com https://ssl.google-analytics.com https://connect.facebook.net https://cm.g.doubleclick.net https://api.twitter.com https://graph.facebook.com https://www.google.com; style-src 'unsafe-inline' 'self' https://*.twimg.com https://twitter.com https://ton.twitter.com https://fonts.googleapis.com https://maxcdn.bootstrapcdn.com https://netdna.bootstrapcdn.com https://translate.googleapis.com https://platform.twitter.com; report-uri https://twitter.com/i/csp_report?a=NVQWGYLXFVZXO2LGOQ%3D%3D%3D%3D%3D%3D&ro=false;

　重要な所は強調文字にしておいたが、「script-src」の所に「unsafe-inline」がある。これが含まれていれば、ブックマークレットが使えるんじゃないかと思っていたのだが、私の勘違いかもしれない。
　最新の【Content Security Policy Level 2】で関係ありそうなところを引用する。

7. Directives

This section describes the content security policy directives introduced in this specification. Directive names are case insensitive.

In order to protect against Cross-Site Scripting (XSS), web application authors SHOULD include:

both the script-src and object-src directives, or
include a default-src directive, which covers both scripts and plugins.

In either case, authors SHOULD NOT include either 'unsafe-inline' or data: as valid sources in their policies. Both enable XSS attacks by allowing code to be included directly in the document itself; they are best avoided completely.

　英語は苦手なのでよく分からないが「unsafe-inline」を含めるべきじゃないと書いてあるような気がする。

7.15. script-src

The script-src
directive restricts which scripts the protected resource can execute. The directive also controls other resources, such as XSLT style sheets [XSLT], which can cause the user agent to execute script. The syntax for the name and value of the directive are described by the following ABNF grammar:

directive-name = "script-src"
directive-value = source-list

The term allowed script sources
refers to the result of parsing the script-src directive’s value as a source list if the policy contains an explicit script-src, or otherwise to the default sources.

If 'unsafe-inline' is not in the list of allowed script sources, or if at least one nonce-source or hash-source is present in the list of allowed script sources:

Whenever the user agent would execute an inline <script> from a script element that lacks a valid nonce and lacks a valid hash for the allowed script sources, instead the user agent MUST NOT execute script, and MUST report a violation.
Whenever the user agent would execute an inline script from an inline event handler, instead the user agent MUST NOT execute script, and MUST report a violation.
Whenever the user agent would execute script contained in a javascript URL, instead the user agent MUST NOT execute the script, and MUST report a violation.

　よく分からない。
　それで、ページ内をbookmarkletで検索したら次のように書いてあった。

Note: User agents may allow users to modify or bypass policy enforcement through user preferences, bookmarklets, third-party additions to the user agent, and other such mechanisms.

　Google翻訳では次のようになる。

注：ユーザーエージェントは、ユーザーがユーザーの好み、ブックマークレット、ユーザエージェントに、サードパーティ製の追加、および他のそのような機構を介して変更またはバイパスポリシーの適用を可能にすることができます。

　ブックマークレットを使っている場合はCSPを無視させてもいいよ、と読めるのだけど、「may allow」であって、無視させることを推奨してないみたいだから、Firefoxとしては、無視しないことにしたのだろう。
　それで、ツイッターのHTTPヘッダの「script-src」に「unsafe-inline」があるけれど、これを無視することにしたのだろう。
　あっ、そもそも「unsafe-inline」の意味が分かってない。

　結論。よく分からない。とにかく、これはツイッターのHTTPヘッダのCSPの所に何が書いてあったかメモしたかっただけ。

1194055 – Size of <input> elements has changed in Firefox 40 を見て

1194055 – Size of <input> elements has changed in Firefox 40
...
Brian Birtles (:birtles) 2015-08-12 21:47:43 PDT

We're seeing reports on twitter in Japan of layouts breaking in Firefox 40 due to the sizing of <input type="text"> and <textarea> elements.

One report suggests the default font might have changed.[1]

For the test URL the following difference is reported:
ESR38: https://pbs.twimg.com/media/CMQyxHKUEAA2CBm.png:large
40: https://pbs.twimg.com/media/CMQy27dU8AAtJ-a.png:large

[1] https://twitter.com/gooey_archer/status/631658186454401025
...

　Firefoxを40.0にアップデートしたら、Firefoxのスタートページに指定してある私が作ったWebページの検索フォームの入力エリアが、ビヨーンと右に倍近く伸びていた。何が起こったのか分からなかったのだが、ツイッターで検索するなどして辿り着いたのが上のページ。
　どうやら、Firefoxのデフォルトフォントが変わったらしい。

Jonathan Kew (:jfkthame) 2015-08-13 00:45:19 PDT

The fact that the default font for these elements changed is expected; we were using a deprecated API and getting an old default. I note that viewing the testcase from the URL in IE 11 on Win8.1 gives me a result that's closer to our "new" behavior than our "old".

In general, I'm seeing substantial differences between browsers/platforms with the testcase, illustrating the fact that relying on a specific default size of <input> elements is extremely fragile. Authors who want a specific size should be explicitly specifying it.

Is there some reason this is particularly problematic in Japan? (What was the old font being used, what is the new font, and -- aside from the effect on size -- is the new font better/worse than the old one? How does it compare to what IE uses?)

　それで、以前はどのフォントで、今はどのフォントかであるが、議論中に次のように書いてある。

Masayuki Nakano (:masayuki) (Mozilla Japan) 2015-08-13 03:07:16 PDT

I think that the main problem is, the old Japanese UI font "MS UI Gothic" and new Japanese UI font "Meiryo UI" have very different size and glyph. A character size of Meiryo UI is too large. That must cause breaking a lot of web sites' layout.

Edge still uses "MS UI Gothic" for the default style of <input> according to the testcase. So, we should not use "true" system font on Win8 or later.

　英語なのでよくわからないが、"MS UI Gothic"から"Meiryo UI"に変わったように読める。それならば、スタイルシートのfont-familyプロパティで指定すれば、以前の状態と比較できるかもしれない。アップデート前のFirefoxが無いので、どの程度変わったか比較できずに困っていた。
それで、次のソースを使って比較してみた。

<body style="background-color:silver;">
<input type="text" name="name" size="60"><span>指定なし</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ ゴシック';"><span>ＭＳ ゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS Gothic';"><span>MS Gothic</span><br />
<input type="text" size="60" style="font-family: 'ＭＳ Ｐゴシック';"><span>ＭＳ Ｐゴシック</span><br />
<input type="text" size="60" style="font-family: 'MS PGothic';"><span>MS PGothic</span><br />
<input type="text" size="60" style="font-family: 'MS UI Gothic';"><span>MS UI Gothic</span><br />
<input type="text" size="60" style="font-family: 'メイリオ';"><span>メイリオ</span><br />
<input type="text" size="60" style="font-family: 'Meiryo';"><span>Meiryo</span><br />
<input type="text" size="60" style="font-family: 'Meiryo UI';"><span>Meiryo UI</span><br />
<input type="text" size="60" style="font-family: 'serif';"><span>serif</span><br />
<input type="text" size="60" style="font-family: 'sans-serif';"><span>sans-serif</span><br />
<input type="text" size="60" style="font-family: 'monospace';"><span>monospace</span><br />
</body>

　Firefoxのフォントの設定でも変わってくるかもしれないで、それを変えて試してみた。
　その結果が次のツイート。

Firefox 40.0.2で、font-familyを指定してない場合が、指定した場合のどれに相当するか、試してみた。 pic.twitter.com/K8GFET7JE5

— 正己 (@self7777) 2015, 8月 14

　"MS UI Gothic"から"Meiryo UI"ではなく、"MS Gothic"から"Meiryo"に変わったような気がする。

続きを読む