短期プロジェクトが始まって早くも10日が経過しました。
プロジェクトの大まかな形はできてきました。
しかし、Chrome拡張機能でFacebook APIを連携できないという事態に直面しました。
ああ…解決してほしいです…。助けてください…。
とりあえず解決はしました。
Facebookログインは別途行っていません。(ググった結果)誰かがFacebookクエリを分析して公開してくれていたので、その部分だけを持ってきて処理しました。
次は処理結果です。
さらに、既存会員のナム・ドゥヒョン会員から記事内のサムネイル画像抽出に関する情報を得ることができました。
明日は記事リンクを利用して記事のサムネイルを抽出する部分を進める予定です。
次のような順序で行う予定です。
1. HTMLパース
2. メタタグ分析による文字コードの取得(UTF-8, EUC-KR... etc)
3. その文字コードで再パース
4. 正規表現による <script>,<style> の削除
5. <body>内で、正規表現による <h2>,<span>,<p> の削除
6. きれいになったbody内で、テキスト塊の長さとテキスト塊を保存
7. ソート
8. ソートされたテキストで、急激に短くなる部分からずっと削除
9. テキストが多い部分の周辺にあるimgタグを探してhref値を取得
以上は理論的なもので…
明日、必ず試してみます…
追伸:Chrome拡張機能に対する理解度が低いことを痛感しました。既存のFacebook APIをそのまま拡張機能に組み込もうとすると、CSP(コンテンツセキュリティポリシー)にブロックされてしまい…以下の文言を2時間見つめながら分析していたようです。
Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
結果として、その部分はそのままでは組み込めないことが確認できました…。
まだFacebookログインについてはよく分かりません。もしご存知の方がいらっしゃれば…コメントをお願いします。(_ _)
ありがとうございます。
おっと…
もっと見る
朝起きてぼーっとした頭でGoogleドキュメントを読み返しました。
(CSPに準拠する方法)
まず準拠するためには、Google拡張機能のCSPが何であるかを知る必要がありました。
すぐ下に書かれていたことを見落としていました。
What is the CSP for Chrome Apps?
The content security policy for Chrome Apps restricts you from doing the following:
- You can’t use inline scripting in your Chrome App pages. The restriction bans both <script> blocks and event handlers (<button onclick="...">).
- You can’t reference any external resources in any of your app files (except for video and audio resources). You can’t embed external resources in an iframe.
-
You can’t use string-to-JavaScript methods like
eval()andnew Function().
上記の内容を整理するとこうなります。
_Chromeアプリのコンテンツセキュリティポリシー。
1. HTMLページでインラインスクリプトを使えません。
2. いかなる外部リソースも参照できません。また、iframe内に外部リソースを挿入することもできません。
3. 文字列を関数化する eval() などの関数の使用は不可。
ああ…結局、内部のデータだけを使うよう強要されています。XSS脆弱性を根本から封じ込めようとする努力が見えます。
ウェブハッキングに関する情報が多く出てきますね。XSSで検索すると…。
そして下を見ると…
Your Chrome App can only refer to scripts and objects within your app, with the exception of media files (apps can refer to video and audio outside the package). Chrome extensions will let you relax the default Content Security Policy; Chrome Apps won’t.
幸い… Chrome拡張機能は緩和されますが、Chromeアプリはそうなることはないと言っています。
All JavaScript and all resources should be local (everything gets packaged in your Chrome App).
すべてのJavaScriptやリソースはローカルにあることを推奨していますね。
では、本当に外部ソースを使用する方法はないのか…。
下を見るとまたあります…。
Use templating libraries
Use a library that offers precompiled templates and you’re all set. You can still use a library that doesn’t offer precompilation, but it will require some work on your part and there are restrictions.
You will need to use sandboxing to isolate any content that you want to do ‘eval’ things to. Sandboxing lifts CSP on the content that you specify. If you want to use the very powerful Chrome APIs in your Chrome App, your sandboxed content can't directly interact with these APIs (see Sandbox local content ).
Access remote resources
You can fetch remote resources via
XMLHttpRequest
and serve them via
blob:
,
data:
, or
filesystem:
URLs (see
Referencing external resources
).
Video and audio can be loaded from remote services because they have good fallback behavior when offline or under spotty connectivity.
Embed web content
Instead of using an iframe, you can call out to an external URL using a webview tag (see Embed external web pages ).
3つもありますね。
1. SandboxとChrome APIを利用したメインページとサンドボックスページの交流
2. XMLHttpRequestでの blob 等を通じた外部リソース参照。(スクリプトはダメそうです)
3. iframeを使用して処理する。
理論上は、この3つを利用すれば外部リソースが使用可能だと書かれています。
しかし、外部スクリプトを使える部分については言及されていないのでよく分かりません。
後日機会があれば、3つの方式を利用してスクリプトを外部から持ち込めるか試してみます。
今は次のゴールがあるのでパス…