人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

javascript ブックマークレットに付いて

例えば、下記のページの様に、外部ファイルを読み込ませようとするのですが、上手く動作しないページがあります。
http://stabucky.com/wp/archives/1818

その理由と、解決策を教えて下さい。

上手く動作しないページの1つが、facebookです。

読み込む外部のjsファイルには、alert(123);
としか書いていない物で試しています。

yahooやgoogleなどでは、
きちんと 123 のアラートが表示されます。

宜しくお願いします。


●質問者: worldtravel
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

多分、期待通りに動かないページは https で、動くページは http なんだと想像します。
そういうの、Mixed content って言います。
混在コンテンツ - Security | MDN

https なページでは、https ではないところに置かれた .js や .css の読み込みをブラウザがブロックします。

解決策は三通りあります。


worldtravelさんのコメント
ありがとうごいざます。 httpsには置いていました。 httpsには置けば、mixed contentの問題も解決すると勘違いしておりました。 やりたい事が直接書ける量ではないので、諦めるかもしれません。 ありがとうございました。

worldtravelさんのコメント
ちょっとわからないのですが、 googleやamazon、rakutenのカートページでは動くのに、 なぜfacebookでは動かないのでしょうか。 もちろん、ブラウザの設定は変えていません。 サイトによっては「拒否する作り」になっているのでしょうか。

a-kuma3さんのコメント
mixed content は知っていたのですね。 Bookmarklet はサイトから読み込んだコンテンツに対して動くので、alert 程度ではサイトが拒否することができません。 まずは、ブラウザのコンソールを確認してみてください。

worldtravelさんのコメント
失礼しました。 そうですよね、コンソール確認ですね。 出ました。 要するにブロックされていたのですね。 対象外のドメインだから、という事でしょうか... ところで、質問が変わってしまうのですが、 facebookは、この設定をどうやって行うのでしょうか? javascriptで出来るのでしょうか? ご存知でしたら、参考URLでも構いませんので教えて頂ければ幸いです。 (program):1 Refused to load the script 'https://*******/index.js' because it violates the following Content Security Policy directive: "script-src *.facebook.com *.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' fbstatic-a.akamaihd.net fbcdn-static-b-a.akamaihd.net *.atlassolutions.com blob: chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl". (anonymous function) @ (program):1

a-kuma3さんのコメント
同じ環境ではないでしょうが、試してみました。 使ったのは Firefox 45.0.1 です。 コードは Gist に置きました。 https://gist.githubusercontent.com/a-kuma3/491cb1af8c2c2e08cd13/raw/f7575164330b8ba94e5388798b51df240e294d25/q1458986280 Bookmarklet は、こんな感じ。 >|| javascript:(function(src){var%20s=document.createElement('script');s.setAttribute('type','text/javascript');s.setAttribute('charset','UTF-8');s.setAttribute('src',src);document.body.appendChild(s);})('https://gist.githubusercontent.com/a-kuma3/491cb1af8c2c2e08cd13/raw/f7575164330b8ba94e5388798b51df240e294d25/q1458986280'); ||< 成形したのがこちら。 >|javascript| javascript:(function(src){ var s=document.createElement('script'); s.setAttribute('type','text/javascript'); s.setAttribute('charset','UTF-8'); s.setAttribute('src',src); document.body.appendChild(s); })('https://gist.githubusercontent.com/a-kuma3/491cb1af8c2c2e08cd13/raw/f7575164330b8ba94e5388798b51df240e294d25/q1458986280'); ||< Facebook のページで使ってみましたけど、エラーなく alert は表示されました。

a-kuma3さんのコメント
コメントが前後しました。 エラーを出している chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl って、Skype みたいですね。 Skype の拡張機能を無効にしたら動くんじゃありません? であれば、Skype の拡張機能がアクセスを拒否してる、ということだと思います。

worldtravelさんのコメント
ありがとうございます。 見つけました。 少し読んでみます。

worldtravelさんのコメント
> エラーを出している chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl って、Skype みたいですね。 > Skype の拡張機能を無効にしたら動くんじゃありません? えっ そうなんですか... ーー;; 合わせて確認してみます。 探してみたところ、設定はこちらのページの様に行うようです。 https://developer.mozilla.org/ja/docs/Web/Security/CSP/Using_Content_Security_Policy

a-kuma3さんのコメント
ごめんなさい、先のコメントは大嘘でした。 制御してるのはこれです。 http://content-security-policy.com/ HTTP の応答ヘッダで Content-Security-Policy というヘッダを返すことで、その辺りの制御ができるんだそうです。

worldtravelさんのコメント
a-kuma3さんのブックマークレットを試してみたところ、 やはりGoogle等ではアラートが表示されますが、 facebookでは拒否されてしまいました。 自分のページに、phpで適当なページを作り、 説明通りのheaderを入れたら同じ様に拒否する事が出来ました。 facebookが拒否する設定をしているのですね。 下記のページを表示した後に、ブックマクークレットで 別のドメインにある jsを読み込ませようとするとエラーになりました。 <? header('Content-Security-Policy: default-src "self" *.mydomain.com'); print $_SERVER["REMOTE_ADDR"]; ?> 要するに、どうやってもfacebookのページでは 外部のjsは読み込ませられないという事ですね。 ありがとうございました。

worldtravelさんのコメント
あっ すいません。 書いていて下さったのですね。 ありがとうございました。 解決しました ^^

a-kuma3さんのコメント
ん、なんで Gist に置いたスクリプトが動いたんだ……

worldtravelさんのコメント
私の環境では動きませんでしたが... ^^;;

a-kuma3さんのコメント
ですよねえ...

worldtravelさんのコメント
なにか特殊な方法で実行できる事がわかりましたら教えて下さい。^^ 直にダメな様にされてしまうとは思いますが...^^; ありがとうございました。

a-kuma3さんのコメント
>> なにか特殊な方法で実行できる事がわかりましたら教えて下さい。^^ << Bookmarklet ってことは、自分だけで使う用途ってことですよね。 Fiddler っていうデバッグとかに便利なローカルに立てる Proxy があるんですけど、レスポンスヘッダの削除ができます。 http://docs.telerik.com/fiddler/KnowledgeBase/FiddlerScript/ModifyRequestOrResponse 常に Fiddler を通すのはどうもなあ、ということであれば、pac ファイルを用意して facebook だけ Fiddler を通すようにするとか。 https://ja.wikipedia.org/wiki/%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E8%87%AA%E5%8B%95%E8%A8%AD%E5%AE%9A#PAC_.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB

worldtravelさんのコメント
ありがとうございます。 自分だけではなく、ある機能を作って、広く一般に公開しようとしていました。 ただ、こういった事が出来るとなると、 何れ殆どのサイトでブロックされて使えなくなってしまうのかな....と。 ですので、今後どうするかは検討中です。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ